Most Magento 2 storefronts score in the 30s on mobile Pagespeed. Most Hyva storefronts score in the 70s. We consistently ship Hyva at 99 across all four metrics — Performance, Accessibility, Best Practices, SEO — on real production catalogs with real product imagery.

This isn't a magic plugin. It's a stack of small, boring decisions, each of which earns a few points. The whole thing only works if you commit to the bar.

Pagespeed isn't a feature you bolt on at the end. It's a budget you spend across every decision.

Why Hyva is the easy 70

Hyva ships without Magento's frontend stack: no jQuery, no Knockout, no RequireJS, no Underscore. The default Hyva bundle is Alpine.js + Tailwind, and that's most of the JS budget gone. You start at ~70 Performance on a default Hyva theme without trying.

Closing the gap from 70 to 99 takes work. Most of it is paying attention to what the page actually needs to render on the first 800 milliseconds, and ruthlessly deferring everything else.

The 70 → 99 playbook

1. Eager-load exactly one image: the LCP

Largest Contentful Paint is almost always the hero image on a product or category page. Tag it explicitly: 

<img
  src="hero.webp"
  srcset="hero@1x.webp 1x, hero@2x.webp 2x"
  loading="eager"
  fetchpriority="high"
  decoding="async"
  width="1440" height="810"
  alt="..."
/>

Every other image gets loading="lazy". The one you tagged eager is the only image the browser prioritizes during LCP. Width and height on every image to prevent CLS.

2. Serve AVIF, fall back to WebP, never PNG

Configure your image pipeline (Cloudflare Images, native Magento WebP, or a custom Imgproxy worker) to serve AVIF when supported. AVIF is typically 30–50% smaller than WebP, which is already 25–35% smaller than JPEG. On a hero image, that's the difference between passing and failing LCP.

3. Critical CSS inline, the rest deferred

Hyva already does most of this for you via Tailwind's PurgeCSS pass. We extend it with a build step that inlines the critical above-the-fold CSS into <style> in the document head, and loads the full stylesheet asynchronously: 

<link rel="preload" href="main.css" as="style"
      onload="this.onload=null;this.rel='stylesheet'" />

4. Defer or kill every third-party script

Audit every <script> the storefront loads. For each one, ask: does this need to run before LCP? If the answer is no — and for 95% of marketing tags, the answer is no — defer it:

  • GA4, Meta Pixel, TikTok Pixel → load after LCP via requestIdleCallback
  • Chat widgets → load on user interaction, not pageload
  • A/B test scripts → push to your edge worker if possible
  • Recommendation engines → server-rendered, not client-fetched

This single change typically buys 15+ Performance points on a marketing-heavy Magento store.

5. Cloudflare config, not just Cloudflare presence

Putting Cloudflare in front of your store doesn't help Pagespeed by itself. The configuration does:

  • Brotli compression on all text assets (CSS, JS, HTML, SVG)
  • Cache-everything on static assets with hashed filenames; cache catalog HTML at the edge with smart purge on price/stock change
  • HTTP/3 enabled — meaningfully faster on mobile networks
  • Early Hints for preconnects and preloads
  • Image resizing at the edge — never serve a 2400px image to a 360px screen

6. Font loading: small subset, swap fast

Self-host your fonts. Subset them to the characters you actually use. Use font-display: swap or optional if you can accept a fallback flash. Preload only the weights used above the fold.

7. Magento's own footguns

Magento ships with a number of default behaviors that punish Pagespeed and need explicit removal in Hyva:

  • requirejs-config.js on every page (Hyva removes for you, but third-party modules will sneak it back in)
  • Inline customer-data JS blocks rendered into every page
  • Module-level CSS bundles that aren't actually used on the current route
  • Magento's default image cache writing 200KB JPEGs for thumbnails

Every third-party Magento module is, by default, a Pagespeed liability until proven otherwise.

Accessibility & SEO are bundled in

If you build for Performance properly, Accessibility and SEO mostly fall into place. The exceptions worth flagging:

  • Semantic landmarks on every template (<main>, <nav>, <footer>)
  • Skip-to-content link in the header (one line, two Lighthouse points)
  • Alt text on every product image — and not the SKU. Real descriptions.
  • Form labels wired correctly. Hyva does this; double-check after any custom checkout work.
  • Structured data on PDPs and category pages — Product, BreadcrumbList, Organization

What we don't do

We don't:

  • Use a Pagespeed-cheating service worker that fakes the metrics under Lighthouse but degrades real users
  • Strip features the merchandiser actually needs (live search, filters, recommendations) to chase a number
  • Ship without RUM (real user monitoring) — Pagespeed is a synthetic test, what matters is field data

The number isn't the point

99 Pagespeed is a proxy for something more important: a storefront that respects your customer's attention. Faster pages convert better. The Pagespeed score is a useful target because the techniques that earn it are the same techniques that buy you real-world performance.

Most agencies don't hit 99 because most agencies don't commit to it. They commit to 70, treat the gap to 99 as "diminishing returns," and ship. We treat the gap as the whole job.

Questions, corrections, or a Hyva storefront you'd like us to look at — hello@trace-ai.ca.