How I Got Lighthouse 99/95/100/100 on a Custom Shopify Theme

DAY happy — Sun, 26 Apr 2026 11:57:09 +0000

Most Shopify stores score somewhere between 40-70 on Lighthouse. I got mine to 99/95/100/100 (Performance / Accessibility / Best Practices / SEO) without any paid apps or external optimization tools. Here's exactly what I did.

The starting point

I'm running YourHealthier, a DTC supplement brand on Shopify. I built a custom theme from scratch instead of using a pre-built one, which gave me full control over every line of Liquid, HTML, CSS, and JS.

What actually moved the scores

Performance (99)

The biggest gains came from fixing CLS (Cumulative Layout Shift). Most Shopify themes load product images without explicit width/height attributes, which causes layout jumps. I added explicit dimensions to every image element and used aspect-ratio in CSS as a fallback.

I also deferred all non-critical JavaScript. Shopify injects a lot of scripts by default — I moved everything I could to defer or loaded it after user interaction.

Accessibility (95)

This one is mostly about semantic HTML that people skip:

Every image got descriptive, branded alt text — not just "product image" but something like "YourHealthier Magnesium Glycinate 120 capsules front label"
Proper heading hierarchy (H1 > H2 > H3, no skipping)
Focus states on all interactive elements
Sufficient color contrast ratios on all text

Best Practices (100)

No mixed content, no deprecated APIs, HTTPS everywhere. Shopify handles most of this, but third-party app scripts can break it. I removed every app I wasn't actively using.

SEO (100)

This is where I spent the most time:

Enhanced Product Schema with JSON-LD including price, availability, review data, and brand
Semantic breadcrumb navigation with BreadcrumbList schema
Canonical URLs on every page to prevent duplicate content
Meta descriptions dynamically generated from product data instead of generic defaults
Proper robots.txt and sitemap submitted to Google Search Console

The CSS crawlability fix most people miss

I had tab content on product pages (Description, Ingredients, Reviews) hidden with display: none in CSS. Google doesn't reliably index content behind display: none. I switched to a CSS approach that keeps content in the DOM and accessible to crawlers while still functioning as tabs visually.

What I'd tell someone starting from scratch

Don't start with a heavy pre-built theme and try to optimize it. Start minimal and add only what you need. Every app you install adds JavaScript. Every feature you don't use is dead weight.

Audit all 53 theme files if you have to. I did. It took time but the result is a store that loads fast, ranks well, and doesn't depend on any paid speed optimization apps.

If you're working on Shopify performance and have questions, happy to share specifics. The store is live at yourhealthier.com if you want to run your own Lighthouse audit on it.

DEV Community: DAY happy