As we know Google keeps working on improving its algorithm for best search results in term of relevant topic, time and user-friendliness. May 2021 Google started using Core Web Vitals to improve user experience and add it to a ranking factor in search results as well.  A site which meets the page speed score on 6 parameters give an advantage in SEO and helps the web designer to focus on website performance on mobile and desktop. you can read more about core web vitals here because this post is about how to improve scores. 

Note: now websites are considered mobile-first, so we will be working to improve performance in small devices/mobiles. 

Scan the site with Google page speed insights or alternatively, you can use Chrome inbuilt lighthouse. Note the suggestion and error you see them.

Improving Core Web Vitals with simple steps below

 Server side improvement 

  1. Serve resources via h2 or h3 header most of the server support h2 protocol these days or use CDN like cloud flare 

  1. Set cache to a maximum of 1 year for static resources like images, CSS, local is files.

  2.  

Optimize remote resources 

  1. Use rel=”preconnect” or dns-prefetch or preload on remote resources according to usage. 

  1. Preload font files and remotely served files. 

  1. Delay loading remote resources via lazy load if used below the fold. 

  1. Use google tag manager for google analytics, Facebook pixel, and other tracking codes (learn here) 

Css optimization  

  1. Defer all the CSS. Which will remove render blocking resources message but increases the CLS. 

(using below snippet to load wil preload the css (non-renderblocking) once its preloaded its added as stylesheet in html ) 

<link href=”URL” rel=”preload” as=”style” onload=”this.onload=null;this.rel=’stylesheet'”> 

<noscript><link href=”URL” rel=”stylesheet” as=”style”></noscript> 

 

  1. To decrease CLS score add all the structure-based CSS to inline(on CSS required for above the fold) between head that will reduce the CLS score to minimal may be 0. “Some CSS class may vary according to screen size s and fold area as per device. 

  1. Merge small CSS files manually (or third party like cloud flare) and server them as single (decreases no of request). 

  1. Use CDN Resources as more as possible.

  2. Also read : A Guide to Optimise web fonts performance

Image Optimization 

  1. Set width and height for images in img tag (can be overridden with css) Save browser time to evaluate image size. (Important for CLS) 

  1. Use properly size images in webp (WebP is a modern image format that provides superior lossless and lossy compression for images on the web). 

  1. Lazy load all the images. 

  1. If using header image, try preloading the image with rel=”preload”. 

  1. Serve properly size images (never use oversized images in terms of width and height). 

JavaScript optimization 

  1. Never use on load event for multiple Dom manipulation. (For example: sliders) 

  1. Use lazy load for event-based resources like recapture must be added dynamically when focusing on form. 

       JavaScript optimization is a little tricky above 2 are the most common but other changes defer from site to site. 

Other Optimization 

User service worker to cache resources (including pages) locally for re-visitors for lighting fast speed. Use can also use it for background process without losing page speed. 

 

I will update this post next week with other optimization methods and tricks.  

Follow me on Facebook @pawan6161, or mail me at [email protected] 

4 thoughts on “How to improve Core Web Vitals score with google page speed insights.”

Leave a Reply

Your email address will not be published. Required fields are marked *