Skip to content

Optimizing Core Web Vitals and Google Page Speed

Google's Core Web Vitals measure real-world user experience through three metrics: Largest Contentful Paint (LCP) for loading performance, Cumulative Layout Shift (CLS) for visual stability, and Interaction to Next Paint (INP) for responsiveness. These metrics directly influence search rankings, so getting them right matters.

Server-side caching (Varnish, Redis) improves Time to First Byte (TTFB) and helps with LCP, but most Core Web Vitals issues live on the frontend. A slow TTFB degrades LCP significantly, yet good scores also depend on how assets load and how the page renders.

Measure first, optimize second

Before making changes, run your pages through PageSpeed Insights and check your Chrome User Experience Report (CrUX) data. Real field data tells you where the actual bottlenecks are.

Reducing Resource Loading for Better LCP

Largest Contentful Paint (LCP) measures how quickly the main content becomes visible. Minimizing the number and size of resources loaded during initial render directly improves LCP scores in Hyvä themes.

  • Lazy load below-fold images: Images not visible in the initial viewport should use lazy loading to defer their download until the user scrolls. This keeps the browser focused on rendering visible content first.
  • Defer non-critical JavaScript: Load JavaScript libraries only when they're actually needed, not during initial page load. Every script loaded upfront competes with your main content for bandwidth and CPU time.

Preventing Layout Shifts for Better CLS

Cumulative Layout Shift (CLS) tracks how much elements jump around after the page starts rendering. Even small shifts frustrate users and hurt your CLS score.

  • Define image and video dimensions: Always set width and height attributes on images and videos so the browser reserves the right amount of space before media loads. Without these, the page reflows when each asset arrives.
  • Avoid JavaScript-driven visibility changes: Don't hide or show elements with JavaScript after initial render. If elements like cookie banners or promotional banners need to appear, pre-allocate their space in CSS so they don't push content around.
  • Serve appropriately sized images: Oversized images that get scaled down by the browser can cause layout reflow. Serve images at the dimensions they'll actually display.

Deferring Third-Party JavaScript

Third-party scripts for chat widgets, analytics, popups, cookie consent, and search autocomplete are the most common causes of poor Core Web Vitals scores. These scripts block the main thread and often trigger layout shifts.

Use a facade pattern to defer third-party JavaScript loading in your Hyvä theme until the user actually needs it:

  • Chat widgets: Load only after the user scrolls or moves the mouse
  • Search autocomplete: Load when the search field receives focus
  • Video embeds: Show a thumbnail first, then load the video player when clicked

Warning

Loading third-party scripts synchronously in the <head> is the single biggest performance killer on most Magento storefronts. Always defer or lazy-load these scripts.

Custom Font Loading Strategy for Hyvä Themes

Preloading custom fonts can block First Contentful Paint (FCP), which hurts both LCP and perceived performance. In most cases, you're better off skipping font preloads and using these strategies instead:

  • Use system font fallbacks that closely match your custom font's metrics
  • Set appropriate line-height values to reserve vertical space, preventing layout shifts when the custom font swaps in
  • Use font-display: swap to show fallback text immediately while the custom font downloads in the background

For detailed font loading guidance, see the custom fonts documentation.

Google Tag Manager and Analytics Performance

Google Tag Manager (GTM) and analytics scripts are among the trickiest third-party resources to optimize for Core Web Vitals. These scripts often load synchronously and can impact all three metrics: LCP, CLS, and INP.

The challenge is that GTM scripts need early access to track page views accurately, but that early loading competes directly with your page content.

Consider using tools like Partytown to run third-party analytics scripts in a web worker. This isolates their performance impact from the main thread, keeping your INP scores healthy while still tracking what you need.