The Customer Experience Imperative: Milestone Has Cracked the Code for Solving Core Web Vitals at Scale

On 15 June 2021, Google rolled out the Page Experience ranking update and by 31 August 2021 it will be fully rolled out. The Page Experience Update will be an official ranking factor, which means that the user experience of a website is now a ranking factor to meet the expectations that customers have when visiting a page. Like it or not, it will decide a website’s position on search. Adding to the other website ranking factors such as mobile friendliness, HTTPS, and having no intrusive interstitials, the Core Web Vitals brings in 3 more factors to the Page Experience Update - loading of the page, speed of interactivity and visual stability of the web page when loading.

Core Web Vitals are a subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools. Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome. Core Web Vitals are made up of three specific page speed and user interaction measurements: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).   

• Largest Contentful Paint (LCP)  

This is the primary element of the update and is the time taken for the largest content on the page to load. The largest content has to load within 2.5 seconds for it to score well.  

• First Input Delay (FID)  

FID is measured as the time taken till the user can make an interaction with the page. 0.1 seconds is the benchmark for it to be deemed good.   

• Cumulative Layout Shift (CLS)  

Cumulative Layout Shift (CLS) is an important, user-centric metric that measures visual stability as it helps quantify how often users experience unexpected layout shifts. A low CLS score (below 0.1) helps ensure that the page is delightful. 

For websites to meet the benchmarks, the following needs to be incorporated to improve the Core Vitals score:  

•  Optimize images 

Website images need to be in the right image format with compression and responsive markup with its dimensions specified and hosted on CDN 

• Lazy load images and video 

This improves the overall page load time and allows the user to interact with the page without having to wait for the image or video to load 

• Optimize JavaScript 

To reduce the network and JavaScript browser payload, the JS needs to be split, minified and compressed 

• Prioritize resources 

Prioritize your website resources and choose what needs to load first. This will improve the page speed and speed of future navigation 

• Optimize CSS 

Minify the code, load critical CSS and defer non-critical CSS, and optimize the CSS background image with media queries. This will result in faster paint operation of the page and improve interactivity 

• Optimize third-party resources 

If the third-party resources aren’t constructed well, it contributes significantly to slow page speed. Implement various methods to load the third-party script efficiently 

• Optimize web fonts 

This ensures that the text remains visible while loading the web font and ensures efficient loading and rendering of large fonts 

• Optimize network quality 

Setup your sites and host resources such as images and videos on the CDN server to deliver high quality and optimized resources over the network. This will improve the asset delivery and loading of the page 

Apart from the fact that the Page Experience Update is an official ranking factor, creating a seamless web page user experience is key to winning and bringing back customers and improving the chances of potential customers visiting your website. According to Google’s Chromium team, implementing the Core Web Vitals will ensure 24% less page load abandonments and 24% less abandonment for shopping sites. To add to this, in a user experience survey, ThinkwithGoogle proved that just by offering a positive user experience, 67% more customers are likely to buy and 74% are more likely to return to the website.     

Every second counts and improves the chances for potential revenue.   

An Akamai survey concluded that a 1 second delay in page load time reduces conversions by a drastic 7%. Retaining users is crucial to improve conversions as obviously, slow sites have a negative impact on revenue and fast sites are shown to increase conversion rates. Loading time is a major contributing factor to page abandonment and the average user has no patience for a page that takes too long to load - which is exactly why Google is implementing Core Web Vitals as a ranking factor. 

Milestone’s technology team worked with industry experts to define a solution and we’re proud to say that we’re the first to roll out a comprehensive and future-proof Core Web Vitals solution. Our breakthrough solution proved to increase the Core Vitals score by 30 points and we cumulated field data (to capture real-world experiences) and lab data (debugging performance issues) to determine the best practices to improve the score. 

Implementing the Core Web Vitals requirement isn’t a one team effort and our CMS plus Website Programming, Product & IT, Design, and Content collaborated to define a winning solution that answers the aforementioned best practices to improve a website’s Core Vitals score. Here’s a peek into what we did:  

• Digital Asset Management (DAM) 

This feature allows the CMS to store images in a centralized location and use them across all products. The images are served in next-gen formats and enhances the fluidity of the UI whether it is being viewed on a mobile phone, tablet, desktop or even a TV screen. 

• Componentization 

To meet the benchmarks of this ranking factor, every piece of content is treated as a component – modular and movable. While all elements will be displayed on a single screen, the page is made up of multiple components that are arranged based on priority. The data contains meta data and is separated from the presentation for it to be edited and updated easily.  

• Hybrid CMS 

Milestone employed the Hybrid CMS model to decouple the front-end and back-end layers to make it easier to work on the design without affecting the actual content displayed on the screen.  

• JavaScript/Cascading Style Sheets custom loading 

To deliver a stellar user experience and improve page load speed, Milestone CMS customized the loading of JS/CSS at a template and page level 

• Image lazy loading 

To improve the Core Web Vitals score in terms of speed, layout shift and interactivity, our CMS configures the image loading behavior