Skip to content

Optimizing Core Web Vitals and Google Page Speed

Google's Core Web Vitals measure real-world user experience through three key 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 Google search rankings and are critical for SEO performance.

While server-side caching (Varnish, Redis) improves Time to First Byte (TTFB) and helps with LCP, most Core Web Vitals issues are frontend-related. A slow TTFB degrades LCP significantly, but achieving good scores also requires optimizing how assets load and how the page renders.

The following sections cover the primary frontend optimization strategies for Hyvä themes:

Reducing Resource Loading for Better LCP

Minimizing the number and size of resources loaded during initial page render directly improves LCP scores:

  • Lazy load below-fold images: Images not visible in the initial viewport should use lazy loading to defer their download until the user scrolls
  • Defer non-critical JavaScript: Load JavaScript libraries only when needed, not during initial page load

Preventing Layout Shifts for Better CLS

Layout shifts occur when elements move after the page starts rendering. Prevent CLS issues with these strategies:

  • Define image and video dimensions: Always specify width and height attributes so browsers reserve space before media loads
  • Avoid JavaScript-driven visibility changes: Do not 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
  • Optimize image sizes: Serve appropriately sized images to avoid layout reflow from oversized assets

Deferring Third-Party JavaScript

Third-party scripts for chat widgets, analytics tracking, popups, cookie consent, and search autocomplete are the most common causes of poor performance scores. Avoid CLF issues using a facade pattern:

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

Custom Font Loading Strategy

Preloading custom fonts can block First Contentful Paint (FCP), hurting both LCP and perceived performance. In most cases, avoid preloading fonts and instead:

  • Use system font fallbacks that match the custom font's metrics
  • Set appropriate line-height values to reserve vertical space, preventing layout shifts when custom fonts load
  • Consider font-display: swap to show fallback text immediately

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

Google Tag Manager and Analytics Performance

Google Tag Manager (GTM) and analytics scripts are among the most challenging third-party resources to optimize. These scripts often load synchronously and can significantly impact all Core Web Vitals metrics.

Consider using tools like Partytown to run third-party scripts in a web worker, isolating their performance impact from the main thread.