Mastering Core Web Vitals

A Guide to Page Experience

When the internet was born, cell phones could only be found in your rich uncle’s Porsche. They were limited to calls and text. Now smartphones are the main access point for the world wide web. Users expect everything online to load instantly, anywhere, anytime and on any device. Cue Core Web Vitals.

To reflect this shift in user expectations, Google has made mobile-friendliness and page speed a focus of recent algorithm updates. In 2021, Google is implementing the ‘Page Experience’ update. This update uses Core Web Vitals – new metrics for page speed, responsiveness and visual stability – to calculate a performance score that quantifies user experience on a given page. 

In this article, we introduce what’s measured by Google to differentiate a poor and great page experience, as well as what causes lackluster performance scores. We list the steps necessary to fix poor performance scores and deliver a great experience to your users. 

    • Intro to Core Web Vitals

      These updated metrics provide new standards for measuring page speed and experience.

      image source

      Largest Contentful Paint (LCP) – How long does your web page take to load? This metric is the new standard for measuring page load speed, and it measures when the largest visible element of the site can be perceived by the user. Causes of a poor LCP may include:

      • Server Response Times
      • Excess JavaScript and CSS
      • Resource Load Times
      • Client-Side Rendering
      image source

      First Input Delay (FID) – How long does your web page take to react to user input? It’s frustrating when you try to scroll or interact with a page and nothing happens. This is the type of poor user experience Google is trying to help users avoid.

      • Caused by heavy JavaScript execution and long tasks
      • Field metric that cannot be simulated in a lab environment
      • To predict FID in lab testing, use Total Blocking Time (TBT)
      • Fix by optimizing how script is parsed, compiled and executed
      image source

      Cumulative Layout Shift (CLS) – How much does content move while loading? We’ve all been there. You’re about to click something on a page and the content shifts to make room for an element that just loaded. This can be visually jarring and frustrates the user experience.

      Poor CLS is often caused by:

      • Images without predefined dimensions
      • Ads, embeds and iframes without dimensions
      • Dynamically populated content
      • Actions waiting for response before updating DOM

      Improve Page Experience & Pass Core Web Vitals

      Since the dawn of the mobile web, WompMobile has been on the frontlines of the mobile user experience. We’re a close partner of Google and have learned to stay ahead of their updates, delivering big wins to clients as a result. Here’s a breakdown of some basic steps to boost page experience:

      Improve LCP with Faster Mobile Page Speed

      Now that Google has switched to mobile-only indexing, your mobile page speed is all that matters. Therefore, always test the mobile version of your site when benchmarking performance scores. You can improve LCP and other page speed metrics by:

       Fixing slow server response times

      • Optimize your server-side code
      • Use a CDN with edge servers near your users
      • Cache assets like HTML to minimize resource storage
      • Serve HTML pages cache-first with a service worker
      • Speed up third-party connections with rel=”preconnect” and rel=”dns-prefetch”
      image source

      Reducing render-blocking JavaScript and CSS

      • Defer non-critical CSS and unused JavaScript
      • Inline Critical CSS
      • Remove any unused code
      •  Minify all CSS and JavaScript
      • Compress JavaScript and load asynchronously
      image source

      Speeding up resource load times

      • Optimize and compress image files in next-gen formats
      • Use a CDN to serve responsive images
      • Preload critical assets like fonts, above-the-fold media and critical code
      • Compress HTML, CSS and JavaScript text files
      • Use adaptive serving to deliver content based on device or connection data
      • Cache assets with a service worker and serve pre-rendered HTML instantly
      image source

      Reduce client-side rendering 

      • Reduce critical JavaScript by minifying and deferring JavaScript
      • User server-side rendering when possible (can add complexity)
      • Use a headless approach to generate and pre-render static HTML files

      Improve FID for a More Responsive Page 

      First Input Delay (FID) is a user-centric metric for usability, interactivity and responsiveness. It measures how long it takes your page to respond to the first user input like a click or scrolling. 

      FID is a field metric because it requires a real user’s input. Therefore, it cannot be simulated in a lab environment and you won’t find it on your Lighthouse score. Time to Interactive (TTI) and Toal Blocking Time (TBT) are lab metrics you can use to gauge improvements to FID.

      Poor responsiveness is generally caused by heavy JavaScript execution. To improve FID:

      • Break up long tasks (over 50ms) that block the main thread
      • Use several smaller tasks that run asynchronously <script async>
      • Move non-essential JavaScript off the critical path
      • Use progressive loading and optimize/compress/minify JavaScript
      • Be aware of server-side rendering’s effect on TBT and TTI
      • Minimize data-fetching and client-side post-processing
      • Consider a web worker to run non-UI JavaScript on a background thread
      • For more, check out this web.dev guide on reducing JavaScript execution time.
      image source

      Improve CLS and Ensure a Great Visual Experience

      Cumulative Layout Shift accounts for 5% of your Lighthouse performance score compared to FID and LCP accounting for 50% together. However, shifting content creates the kind of poor user experience that spurs users to abandon and go elsewhere. Here are some tips to improve CLS:

      • Avoid using images without dimensions. There are several tips here.
      • The same goes for ads, embeds and iframes. Reserve space as they load.
      • Avoid inserting dynamic content above existing content without user input
      • Load fonts before the first paint with Font Loading API and <link rel=preload>
      image source

      Other Considerations for Optimal Page Experience

      In addition to Core Web Vitals, there are other considerations for a great experience. Google wants to send users to secure, easy-to-use experiences that aren’t invasive. 

      • Mobile-Friendly – Your website should be mobile-friendly.
      • Safe Browsing – Ensure no malware or deceptive content is affecting your website.
      • HTTPS – Use an SSL certificate and a secure connection.
      • Intrusive Interstitials – Avoid ads and banners that block most of the viewport because they frustrate users.

      Best Tools for Diagnosing Page Experience Issues

      Chrome DevTools – This tool is built into the Chrome browser. Right-click the page and select ‘inspect’ from the pop-up menu. The performance tab allows you to get real-world data with the option to add throttling to simulate mobile. This is an excellent way to see how your page loads and displays over time. Below, we see JM Bullion coming in at less than a half-second for LCP.

      Lighthouse 6.0 – Google Lighthouse is an open-source tool that measures the quality of a web page. It can run audits on performance, SEO and accessibility, emulating mobile or desktop. A performance audit gives you an array of lab metrics including LCP, CLS and TBT, which can indicate FID. Lighthouse can be accessed in DevTools as well as at web.dev/measure.

      Chrome UX (CrUX) report – This is real-world user data and offers aggregated metrics for a given website. The field data includes all three Core Web Vitals.

      PageSpeed Insights – This is a useful tool that offers both field data from CrUX as well as lab data from Lighthouse. As in Lighthouse, specific recommendations are outlined.

      Google Search Console – Core Web Vitals Report shows which pages pass, fail or need help.

      Optimal Page Speed, Performance and Experience

We understand what it’s like to tirelessly work on every ‘opportunity’ identified by Lighthouse. If you’re tired of slogging through a list of audit results and suggestions for improvement, consider these tips we’ve learned to stay ahead of Google and deliver an unmatched user experience.

We start by ensuring an instant-first impression from search by deploying AMP for all landing pages. The AMP framework offers rich functionality and design, while adhering to strict standards for optimal mobile development. By serving the mobile versions of your pages in AMPHTML, we effectively follow all of the mobile development best practices in one fell swoop. AMP pages on average are 5x more likely to pass Core Web Vitals than non-AMP pages.

We also utilize a service worker to deploy a site as a Progressive Web App (PWA). This allows aggressive caching and predictive preloading of assets to extend near-instant page speeds and an optimal user experience. These technologies have proven to enhance page experience to such a degree as to increase engagement and conversion rates after implementation.

Of course, our platform leverages a headless infrastructure and a serverless delivery network, but what really sets us apart is our approach to service. Instead of a complicated SAAS product that requires your team to adapt and implement – ultimately costing you precious resources – our approach is turnkey and our team is professional from start to finish.

We can improve page experience on your mobile site or web app

To learn more about our platform or development process, schedule a discovery call here. We’ll align on your goals and set some milestones to achieve them. We’ll then develop, demonstrate and rigorously test our solution before final delivery. Just add a code snippet to unlock a sub-second, instant-loading websites powered by next-gen APIs. After launch, we offer continuous support, detailed reporting and ongoing upgrading to ensure the best page experience possible.