SOURCE

Improving Core Web Vitals, A Smashing Magazine Case Study

Properties1
tagsweb-dev, core-web-vitals, lcp, crux, rum, font-loading, performance
AUTHOR
Barry Pollard
PUBLISHED
2021-12-20
ORIGINAL
view original

3 min read

Improving Core Web Vitals, A Smashing Magazine Case Study

Author: Barry Pollard | Published: 2021-12-20 | Source: Smashing Magazine · article

Summary

A real, measured account of Smashing Magazine’s own ~6-month struggle to move mobile LCP from “amber” to green — valuable because it independently corroborates the vendor-sourced core-web-vitals thresholds while adding nuance those guides omit. The site was already fast (static generator, inlined critical CSS, CDN images with preconnect, Netlify hosting), yet Search Console flagged mobile LCP across most articles.

WebPageTest showed the LCP element was the author photo on a separate assets domain. Fixes: inline it as AVIF base64 (only +3 KB; lab improved, field didn’t), then realize they were optimizing the wrong element and make the headline the LCP (text paints faster than images). Field data still oscillated. The root cause was geographic: India was the largest source of mobile-Chrome traffic (~31%, ~3× the US) and sat just outside the 2500 ms LCP threshold. Because CrUX only measures Chrome users, iPhone-heavy rich countries are under-weighted, and Core Web Vitals use one global threshold (no per-country split) across Search Console page groupings — so strong US scores couldn’t offset failing India scores.

The winning fix wasn’t raw speed but segmentation: ~two-thirds of mobile Indian users had Save-Data enabled, so they wired NetworkInformation.saveData into the font loader (skip extra web fonts) plus prefers-reduced-data CSS. Weeks later all ~5,000 URLs flipped green.

Key Claims

  • LCP passes at 2500 ms measured at p75 of real users; Smashing hovered right at the line. (measured; corroborates the vendor threshold)
  • Lab ≠ field: a page can be green in Lighthouse/WebPageTest yet fail CWV in the field. (measured)
  • Inlining the author image as AVIF base64 cost only ~3 KB. (measured)
  • Making text (the title) the LCP element helped (text > images for paint). (measured)
  • India ≈ 31% of mobile-Chrome traffic (~3× the US); India “good LCP” rate 74.48% — just under the 75% bar. (measured)
  • CrUX is Chrome-only → under-weights iPhone-heavy markets, over-weights Android-heavy/lower-connectivity ones. (general)
  • Thresholds are global, not per-country; GSC page groupings swing whole classes of pages. (general)
  • Fix = Save-Data-conditional font loading (NetworkInformation.saveData + prefers-reduced-data); ~2/3 of mobile India users had Save-Data on. (measured)

Notable quotes

“Core Web Vitals don’t have a different threshold per country… all users go into the melting pot, and if the score for those page groupings do not meet the threshold, then the ranking signal for all users is affected.”

Why citable: The global-threshold trap for international sites — a real operational gotcha vendor “how to pass CWV” checklists rarely surface.

“To improve the metrics, you have to improve the experience.”

Why citable: CWV as a UX proxy, not a gameable metric — the ethos behind the whole case study.

Connections

Entities mentioned: Barry Pollard, Smashing Magazine, Netlify, Lighthouse, Google · WebPageTest, Google Search Console, CrUX, BigQuery, web-vitals library (minor) Concepts referenced: Core Web Vitals, Rendering Strategies (CSR / SSR / SSG / ISR / RSC), Web Architecture & Scalability, Technical SEO from Architecture

Contradictions / Tensions

  • No contradiction — it validates the vendor thresholds (LCP ≤2.5 s @ p75, field-over-lab) and enriches them with field-vs-lab divergence, CrUX Chrome-only bias, global thresholds, and page-grouping swings.
  • Recency: 2021 — pre-INP (focuses on LCP), and prefers-reduced-data/AVIF were then experimental. The thresholds/measurement points remain valid; treat the specific font/AVIF tactics as of-their-time.

Notes

Moves Core Web Vitals from single-vendor toward genuinely established, and adds the “measure the users you actually have” lesson. Good client-facing evidence that CWV work is UX work.