As Google’s Page Experience update rolls out through 2021, optimizing for Core Web Vitals has risen in popularity. Yet as user experience, especially on mobile, becomes more ingrained in Google’s algorithm, many organizations have begun struggling with how they can insert Core Web Vitals into their standard SEO checklist and audits.   

 As always, the first step is understanding what Core Web Vitals is. 

 What is Core Web Vitals? 

One of the primary pillars of Google’s Page Experience initiative alongside Mobile-Friendliness, HTTPS, Safe Browsing & Interstitial Guidelines, Core Web Vitals is a set of metrics designed to measure mobile and desktop user-experience based on three different categories:  

• Loading Performance (Largest Contentful Paint or LCP) 
• Interactivity (First Input Delay or FID) 
• Visual Stability (Cumulative Layout Shift or CLS) 

 When combined, these three categories are meant to provide both organizations real-time measurement of a user’s experience (via PageSpeed Insights, Google Search Console, and other tools) when loading a page on their website.  While still a minor element of Google’s overall algorithm, these elements will continue to become more critical from an SEO perspective over the coming year. 

How can my CMS impact my Core Web Vitals score? 

While recommendations abound by specific CMS (CWV plugins for WordPress, etc.), recommendations typically center on the same core themes on optimizing your CMS to improve your Core Web Vitals measurements. 

Optimizing your Hosting 

For Core Web Vitals, the speed at which your content loads will always be a primary concern. Regardless of whether you’re on a traditional CMS like WordPress or a Headless CMS such as Kentico, ensuring that your host isn’t creating a bad user experience for your customers is the first place you should look.  

• Upgrade your Hosting Infrastructure:  
• Move to a Dedicated Hosting Service: If you’re on a shared hosting plan, consider moving to a dedicated (versus shared) hosting plan. This can significantly increase your website’s performance from a load-time perspective. 
• Audit Web Services: If you’re already using a cloud computing service like AWS, Azure, or Google Cloud for your hosting, you should be auditing these annually at a minimum to ensure that your needs haven’t changed and that you’re not unintentionally creating performance delays based simply on contract level. 
• Content Delivery Networks: Alongside hosting, explore if a Content Delivery Network (CDN) such as Cloudflare can help distribute your content more efficiently. This should be a primary concern if your website serves content to international audiences and you’re still relying on a dedicated hosting service that isn’t considering your international traffic. 
• HTTPS: While HTTPS has been a search signal for Google for a while now, ensuring that you’re utilizing HTTPS is now more critical than ever with Core Web Vitals and the Page Experience update. 

Load Front-end Elements more Efficiently  

While technical SEO at a high level has long focused on a core sample of meta tags, Core Web Vitals begins a unified push by Google to put more of an onus on optimizing your front-end code. While these can be categorized, the overall focus should be to ensure that your primary content (those items visually seen first by a user) loads as efficiently and quickly as possible without unnecessary front-end roadblocks. 

• Fetch priority resources immediately using Preload, Prefetch & Preconnect: Ensuring those core elements of your page are loading first is one of the most critical front-end aspects for all three categories of Core Web Vitals but has the most impact on Largest Contentful Paint in most cases.  This is because strategically adding priority requests to resources that impact your page’s “above the fold” or primary content can ease unintentional roadblocks created by secondary resources holding these elements from fully loading.   
• Preload key content elements: Fonts, Videos, Images, or even CSS that involve primary visual elements. 
• Prefetch/Preconnect 3^rd party content elements: If you’re embedding 3^rd party content or scripts as a vital portion of a page, examine if preconnect/prefect create an impact on their delivery. 
• Use Font Display Swap for Web Fonts: While preloading as mentioned above can help with web fonts, adding a secondary layer of efficiency can help avoid invisible text issues (an issue where a browser waits on a web font and creates a shimmer or flicker as it waits).  Note: If you support legacy browsers, Font Display Swap is not fully supported by all browsers. 
• Minify CSS/JS/HTML when relevant: For larger sites where CSS/JS/HTML may be more prone to sharing unused code across multiple pages, minifying can help reduce inefficiencies for page load by reducing and removing unused characters from these files. This will be a standard recommendation when running Pagespeed Insights or Search Console reports, especially for First Input Delay and Largest Contentful Paint.  Thankfully, minifying is becoming a more common practice with some great solutions available such as: 
• CSSnano for minfying CSS 
• UglifyJS for minifying JS  
• HTML Minifier for minifying HTML. 
• Implement Strategic Caching: Ensure that HTML items are given priority in the cache, allowing more static items like imagery, scripts to have long cache times. This can help ensure, especially on media-heavy pages with a majority of static content, and users aren’t forced to reload the same content continuously.  Traditional CMS’s like WordPress has several plugins that can automate this (WP Fastest Cache), while Google provides a great breakdown on how to Love your Cache to improve your Core Web Vitals. 
• Create Placeholders or Indicators for Elements such as Images: For Cumulative Layout Shift, nothing improves your score more than adding placeholders to your CSS so that your page creates an area for an image before it loads.   
• Add Size or Aspect Ratios to Images and Videos: While this can add to your responsive workload, ensure that your CSS anticipates the size rations for images, and videos will instruct browsers to provide placeholders while these items load (especially on mobile). 

While this list could become exhaustive, the above items should provide a great starting point to put your website and your CMS in the right direction with Core Web Vitals.