Table of Contents & Menu
On this page
Navigation

Optimizing Core Web Vitals and Google Page Speed

Core Web Vitals (LCP, CLS, INP) measure real-world user experience: Largest Contentful Paint (LCP) for loading, 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.

Though server-side caching (Varnish, Redis) improves Time to First Byte (TTFB) and LCP, most Core Web Vitals issues are frontend-related. A slow TTFB degrades LCP, but good scores also require optimizing frontend asset loading and page rendering.

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

Reducing Resource Loading for Better LCP

Minimize initial page resources to improve LCP:

  • Lazy load below-fold images: Defer images not visible in the initial viewport 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

Prevent CLS issues (elements moving after render) with these strategies:

  • Define image and video dimensions: Always specify width and height attributes to reserve space before media loads.
  • Avoid JavaScript-driven visibility changes: Do not hide or show elements with JavaScript after initial render. For elements like cookie or promo banners, pre-allocate their space in CSS.
  • Optimize image sizes: Serve appropriately sized images to prevent layout reflow from oversized assets.

Deferring Third-Party JavaScript

Third-party scripts (chat widgets, analytics, popups, cookie consent, search autocomplete) often cause poor performance. 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), impacting LCP and perceived performance. Avoid preloading fonts; instead:

  • Use system font fallbacks matching the custom font's metrics.
  • Set appropriate line-height 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 challenging to optimize. They often load synchronously, significantly impacting all Core Web Vitals.

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