Core Web Vitals – How We Optimise For It

Core Web Vitals is the latest update currently being rolled out by Google. SEO’s and web developers have been preparing for the update roll out which was planned for May, but ended up being pushed back to June. So how did we optimise for it? Below are the key steps we took on the Emrbyo website to prepare for Core Web Vitals.

What The Website Scores Today

Using GTmetrix to measure performance, we can see the website passes the largest contentful paint, total blocking time and cumulative layout shift scores. Note the LCP is currently in amber, Google has confirmed that you don’t need all three vitals to score good to receive the reported ranking boost. The LCP is currently at a healthy score to receive the ranking boost, optimising this further would not gain any further increases in rankings. This has been outlined in the following article from Search Engine Roundtable.

Getting Cumulative Layout Shift (CLS) to 0

Following from our website rebrand, the website launched with a number of animations which ran on the initial load of the homepage and a further transition when clicking through to subpages of the website to fit in with our ‘We see what others don’t’ ethos. CLS measures when elements on the page unexpectedly shift and can have an impact on the user experience. As part of Core Web Vitals, the transitions and animations in place on the website were attributed to a poor CLS score. To get the CLS score to 0, we had to remove these animations and transitions that were in place, this reduced the CLS and also helped to improve the largest contentful paint score (LCP).

Optimising Total Blocking Time (TBT)

Total blocking time is the time it takes for a website to become interactive for users, the shorter this time is the better. The longer this is can have a negative impact not just on Core Web Vitals but can contribute to users bouncing off your website. For Emrbyo we reduced the total blocking time by focusing on the following:

• Deferring assets which aren’t critical to rendering the page – Mainly CSS and JavaScript files.
• Loading Google Fonts locally – Loading Google Fonts directly from the server environment that Emrbyo is hosted on, helps to reduce the number of third party/external requests which can add latency when rendering and loading web pages due to having to establish a connection with a remote server to load the resource.
• Compress CSS files – This helps to reduce the file size of the stylesheets used on the website. The reduced file sizes help to reduce the overall page size when loaded along with other website assets which aids in loading the website faster.
• Compress JavaScript files – Similar to compressing CSS files, compressing JavaScript files too helps to reduce the overall page size which helps the website to load and respond a lot faster.

Improving Largest Contentful Paint (LCP)

Largest contentful paint determines when the main content of the page has finished rendering on the page which is measured in seconds. A score above 4 seconds is considered poor, a score above 2.5 seconds is considered needing improvement, below 2.5 seconds is considered a good score. To improve the LCP score on the Embryo website, we setup the following:

• Implemented Page Caching – Page caching generates static HTML files of pages used on the website, these files help to reduce the queries needed to the website database which can slow down page loading times.
• Browser Caching – Browser caching stores assets of the website on a users device, this makes the loading of other pages quicker by loading the assets which are the same across pages from the users device storage, this makes it quicker compared to loading repeated assets from the server each time.
• Utilise DNS Prefetch and Preconnect – Preconnect and DNS Prefetch can be used to help optimise loading external resources by establishing connections to third party resources that are required for rendering the page. Preconnect can establish the full connection to the resource earlier, DNS-prefetch allows the DNS lookups to be performed quicker.
• Optimise & Compress Images – Serving images at the correct size for the placeholder helps to keep the filesize of the image to a minimum, compressing images also reduces the file sizes of images further without too much of a compromise on image quality. We have also utilised WEBP image compression, a new image format which is built for the web and has improved image compression over JPEG and PNG file formats.
• Preload to Key Internal Resources – We preloaded the local fonts that we installed on the website, by preloading internal resources we can define when these assets need to be loaded sooner rather than later, contributing to an improved LCP and rendering time.

Tasks from total blocking time also have an overlap in optimising for LCP, these include deferring assets on the website and compressing the CSS and JavaScript files used.

Conclusion

As Core Web Vitals is still rolling out, we’ll be monitoring it’s release closely. Google reports that websites that have improved Core Web Vitals scores will receive a ranking boost. Over time the Core Web Vitals has evolved from it’s additional proposed launched guidelines, from the optimisations we’ve completed, we are in a strong position for the roll out of the update. If you think your website could benefit from Core Web Vitals optimisation, get in touch with the team at Embryo today!