Why ZenMasterWorks scores 100/100/100/100: a code teardown

Published October 22, 2026 by Ari Subana. Re-run the score yourself on Google PageSpeed Insights.

The teardown map

PageSpeed Insights runs Lighthouse and reports four independent categories. A 100 requires all four at once, so each category gets its own set of code decisions.

Category	What moves the score	Where it lives in the code
Performance	Near-zero main-thread JavaScript, preloaded hero, reserved image space, deferred media and analytics	Head order, inline CSS, hero video swap, analytics timer
Accessibility	Contrast of 4.5:1 or better, underlined links, honest ARIA, visible focus	CSS color tokens, link rules, dropdown script
Best Practices	HTTPS, zero console errors, correct image aspect ratios, no third-party code in the head	Head, asset paths, error listeners
SEO	Title, meta description, canonical, viewport, descriptive links, crawlable structure	Head metadata, JSON-LD, sitemap.xml

Performance: why almost no JavaScript wins

In the Lighthouse scoring model, Total Blocking Time is weighted 30%, Largest Contentful Paint 25%, Cumulative Layout Shift 25%, First Contentful Paint 10% and Speed Index 10%. Blocking time comes from JavaScript, so a hand-coded static page with nothing to parse or hydrate removes the heaviest-weighted penalty before any tuning starts.

1. Head order and preloads

The browser discovers critical resources fastest when metadata comes first and the preload hints follow. The hero poster is the likely LCP element, so it is preloaded at high priority.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>...</title>
<meta name="description" content="...">
<link rel="canonical" href="...">
<meta name="theme-color" content="#14110f">
<!-- icons -->
<link rel="preload" as="image" href="/hero-poster.webp" fetchpriority="high">
<style>/* critical CSS inline: no render-blocking stylesheet request */</style>

2. Hero video that costs nothing until the page is done

Background video is the usual reason a good score collapses. The pattern: no autoplay, preload="none", the file URL parked in data-src, and a script that swaps it in only after the window load event. Visitors who prefer reduced motion never download it. The poster stays under roughly 80KB.

<video muted loop playsinline preload="none" poster="/hero-poster.webp">
  <source data-src="/hero.mp4" type="video/mp4">
</video>
<script>
addEventListener('load',function(){
  if(matchMedia('(prefers-reduced-motion:reduce)').matches)return;
  var v=document.querySelector('video'),s=v.querySelector('source');
  s.src=s.dataset.src; v.load(); v.play().catch(function(){});
  v.addEventListener('error',function(){v.remove()},true); // capture:true is required
});
</script>

3. Analytics after the load, never in the head

Tag scripts compete with rendering. Injecting them 1.5 seconds after load keeps them out of every lab metric window.

addEventListener('load',function(){
  setTimeout(function(){
    var s=document.createElement('script');
    s.async=true; s.src='https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX';
    document.head.appendChild(s);
  },1500);
});

4. Layout stability and thrash-free scripts

• Every image carries width and height so space is reserved before it loads, which protects Cumulative Layout Shift.
• The scroll progress bar caches layout geometry once and never reads it inside the scroll handler, which avoids forced reflow.
• One shared document-level listener serves every dropdown instead of one listener per menu.
• No horizontal overflow at any width; tables switch to stacked cards below 600px.

Accessibility: contrast is computed

Bright brand orange (#ff5a1f) and gold are used for borders, fills and decoration only. Any accent-colored text on a light background uses a darkened variant verified at 4.5:1 or higher, and white text never sits on brand orange.

:root{
  --orange:#ff5a1f;       /* fills and borders only */
  --orange-text:#a83700;  /* text on bone/paper, about 5.4:1 */
}
a{color:var(--orange-text);text-decoration:underline} /* WCAG 1.4.1: never color alone */

Menus get aria-haspopup only when they implement real menu keyboard semantics; otherwise the attribute is left off, because a wrong ARIA role scores worse than none. Decorative pseudo-element glyphs use alt-text syntax in content so screen readers skip them.

Best Practices: boring on purpose

This category rewards what you do not do. No deprecated APIs, no third-party code in the head, no console errors, and no 404 for an icon or image path. The hero video error listener uses capture:true because media error events do not bubble, and a missed error is a console error.

SEO: complete metadata, then structure

• Title of 60 rendered characters or fewer, leading with a specific differentiator.
• Meta description of 140 to 160 characters with the key claim first.
• Canonical URL, viewport, descriptive link text, and a sitemap.xml entry for every indexable page.
• BreadcrumbList JSON-LD, plus Open Graph and Twitter tags written independently, including twitter:image:alt.

AEO: the v3 trio that makes pages quotable

Answer engines favor pages that state the answer first, carry a dated byline, and expose clean entities. Every standalone evidence page ends with the same three blocks right before </main>: Key Takeaways, an AI-Readable Summary and a Cite This Page box. Add FAQPage JSON-LD only for questions that are also visible on the page, as below.

<section class="takeaways">
  <span class="kicker">Part kicker</span>
  <h2>The short version</h2>
  <ul><li>...3 to 6 bullets...</li></ul>
</section>
<section class="ai"><h2>AI-readable summary</h2><ul><li>...</li></ul></section>
<section class="cite"><h2>Cite this page</h2><dl>
  <dt>Title</dt><dd>...</dd> <dt>Publisher</dt><dd>ZenMasterWorks</dd>
  <dt>Last reviewed</dt><dd>...</dd> <dt>URL</dt><dd>...</dd>
</dl></section>

How a perfect score gets lost

The standard is a property of the code at build time. A chat widget, tag manager, heavy font bundle or uncompressed video added later can lower it, and lab scores vary slightly from run to run. Re-test after every change using the live PageSpeed report.

Frequently asked questions

Why does ZenMasterWorks score 100 on mobile PageSpeed Insights?

Hand-coded static HTML, inline critical CSS, no JavaScript framework, deferred analytics, a lazy-swapped hero video, reserved image dimensions, computed contrast and complete head metadata. Each choice targets a specific Lighthouse audit.

Which Lighthouse metric carries the most weight?

Total Blocking Time at 30%, then Largest Contentful Paint and Cumulative Layout Shift at 25% each. Shipping almost no JavaScript is the strongest single lever.

Can a perfect PageSpeed score drop later?

Yes. Third-party scripts and unoptimized media can lower it, and lab results vary slightly between runs.

Summary

The short version

• Near-zero JavaScript removes the most heavily weighted performance penalty, Total Blocking Time.
• Hero video, analytics and images are deferred, reserved or compressed so they never block rendering.
• Accessibility reaches 100 through computed contrast, underlined links and honest ARIA.
• Best Practices and SEO reach 100 through error-free assets and complete, independent metadata.
• The v3 AEO trio and JSON-LD make each page easy for answer engines to quote.

AI-readable summary

• ZenMasterWorks builds website templates with perfect Google PageSpeed Insights scores (100/100/100/100 on mobile).
• The scores come from static hand-coded HTML, deferred media and scripts, reserved layout space, computed contrast and complete metadata.
• Scores can drop if third-party scripts or heavy media are added after the build.

Cite this page

Title

Why ZenMasterWorks Scores 100/100/100/100: Code Teardown

Publisher

ZenMasterWorks

Last reviewed

October 22, 2026

URL

https://www.zenmasterworks.com/perfect-psi-code-teardown.html