Core web vitals (CWV) are a deciding ranking factor and one can receive more organic traffic should you have a good page experience. Pages with good core web vitals also experience a lower bounce rate. Getting the CWV right for the initial viewport is crucial. Violations of the CWV below the viewport are less severe. Here, we are going through all CWVs and how you can avoid them.
Table of Contents
What are core web vitals metrics?
Largest Contentful Paint (LCP): measures the loading time of the largest visual component in the viewport. This can often be images which can take time to load (especially when they are set to lazy loading in the viewport). You should aim for a score of < 2.5 seconds.
First Input Delay (FID): measures interactivity. To provide a good user experience, pages should have a FID of 100 milliseconds or less.
Cumulative Layout Shift (CLS): measures visual stability. This means that after a page is first visible to the user, the elements should not move position anymore. It’s a bad user experience if the user needs to wait until all elements have been set into place. You should aim for a score of <0.1.
How to check core web vitals performance?
To perform a first check on your CWV, please go to https://pagespeed.web.dev and type in your URLs. Lighthouse scores are lab results. In the wild core web vitals often differ. For example, PageSpeed only tests two screen sizes but in reality, users have a large variety of screen sizes (and issues can arise for them). Users also enjoy very different internet speeds, which can lead to different loading times and web performance results.
You should check your homepage, your blog page and your catalogue page and your single product page. It is likely that all pages have different architecture and need improvement, hence it’s important to check them individually.
You should note that the lighthouse report can change quite a bit every time you hit the ‘Analyze’ button. The CLS score is very reliable but other scores tend to fluctuate. Vercel offers an analytics tool as well to measure performance of core web vitals. Analytics on Vercel show core web vitals performance for users with different internet speeds and different device sizes creating a much more realistic measure.
Improving the overall page speed often drastically improves the Core Web Vitals. In the following, we will first identify low-hanging fruits to improve the loading time of your website.
Improve the overall page speed
Pagespeed is by definition not included in the Core Web Vitals. Nevertheless, pages bloated with redundant third-party libraries and large images can affect CWVs across the board. Many sites are totally bloated and there are easy fixes to reduce the bloat.
Remove unnecessary third-party libraries
As much as possible, please try to remove loading third-party libraries in the header. In many instances, libraries are getting added more and more and no library is ever deleted. For example, google analytics, google tag manager, facebook pixel and many more are imported. This results in incredible bloat and very slow loading times.
You can visit https://pagespeed.web.dev to check your website. Then click on View Treemap.
It is obvious that this site is loading a bunch of js libraries and this might substantially affect the loading time. As much as possible, it is advisable to remove the libraries altogether. Generally speaking, it is more critically important for the business that users can load the website fast compared to marketers having 100% visibility on attribution (marketers will disagree).
Statically render your web pages
Next.JS allows you to pre-render some pages making them blazing fast. Incremental Static Regeneration (ISR) gives you the benefit of static pages without having to build the entire website during the build. In addition to time-based ISR (rebuilding the static website every X minutes), Next.JS has recently introduced on-demand ISR (rebuilding the website based on your request). Client-side and server-side rendering are slower than static pages.
Host your Next.JS app with Vercel
Next.JS has the best integration with Vercel out of all the React Frameworks. Vercel (the parent company of Next.JS) is a platform for front-end frameworks and static sites. Vercels edge network serves as a CDN, caching and allows you different rendering methods out of the box.
Load JS libraries asynchronously
Should it not be possible to remove some of the third-party libraries, you can try to avoid that they block the page by loading them asynchronously. For plain javascript, you can simply add async to the script. (For a full tutorial and more information, please see here https://javascript.info/script-async-defer)
<script async src="<https://javascript.info/article/script-async-defer/long.js>"></script>
In next.js, you make use of the Script component. You can instruct next.js to load the third-party library with a selected strategy.
<Script
src="<https://www.googletagmanager.com/gtag/js?id=YOUR_KEY>"
strategy="afterInteractive"
/>
Removing redundant third-party libraries and implementing asynchronous loading strategies, will substantially increase your loading speed.
Code splitting your code
Code splitting your code lets you delay importing certain components. This can help to speed up your page loading because you can choose to only import components which are directly used in the viewport. Note, please do not use code splitting in the viewport. This will slow down your page because loading a component can be slower.
import dynamic from 'next/dynamic'
import component1 from '@/components/component1';
const component2 = dynamic(() => import('./component2'))
const component3 = dynamic(() => import('./component3'))
function YourComponent() {
return (
<>
<component1 />
<component2 />
<component3 />
<>
)
}
Improve the page speed by optimising your images
Many websites use images in non-optimised versions. The images are way too big and they are making the website speed slow. First, you should first right-size your image. Specifically, if your image is 6200×4800 pixels and the large screen size is 1366×768, you should right-size your image. Second, you can convert your images to webp format. Third, you can implement lazy loading strategies (outside of the viewport).
Next.JS has an in-built image component which helps with image optimization. It optimises the size, format and caching of the image. Images are a frequent problem when it comes to building fast web pages. It is not uncommon that images are 2 megabytes and in jpeg format. After resizing and changing to webp format, they are 100kb. The Image component of Next.JS can remove all this overhead for you.
How to optimise CLS?
Cumulative Layout shift means that the elements on the screen change position and size after the first render. Often this happens when developers try to make the website responsive and render elements differently when the screen is mobile. This results in elements moving around the screen.
How to optimise LCP?
LCP is the loading time of the largest visual component. As stated before, optimising the pagespeed of the website, often has dramatic effects on LCP and FCP. For example, if you have blocking resources which are waiting to be loaded, the loading of the largest component is delayed.
Should you not be able to further improve the LCP score, you can consider moving the element out of the viewport. For example, should you be running a website and you have display ads in the viewport, you can move the ads out of the viewport.
