Six Ways to Improve Your Core Web Vitals Scores

How to Improve your Core Web Vitals Scores

1. Optimise Images and Videos

   Optimising images and videos on your site is probably one of the most important steps to take in improving your Core Web Vitals scores, as it has a great impact on loading performance and therefore, user experience.
   
   Loading performance is measured by the CWV metric called Largest Contentful Paint (LCP). This metric marks the point in the page load timeline when the page’s main (largest) content has finished loading.
   
   Google regards an LCP that occurs within 2.5 seconds of when the page first starts loading as a good user experience. Anything above 4 seconds is considered poor.
   
   There is much to be said about image SEO. But in short, images should be served in the size needed and compressed well. Image compressing tools, such as squoosh.app can help you do this.
   
   When it comes to video content, it’s good practise to use an image placeholder where the video would normally load. Videos should also be placed below the fold as placing them above the fold is guaranteed to delay your loading time.
   
   Image optimisation has many facets. If you need a team of SEO specialists to handle this for you, get in touch. Our team is always researching and learning to keep up with new industry tools and trends in order to produce the best results.

2. Optimise CSS Code

   CSS dictates a large part of your website – from colours and text formatting to positioning. So optimising your CSS will help the page load quicker.
   
   CSS files can contain unnecessary characters such as spacing or indentation, without which it can still operate perfectly fine. Minifying your CSS code (removing unnecessary or redundant data) will ultimately reduce the time it takes to fully render the main content of the page (LCP). To minify code, you can run it through a tool such as minifier.org.
   
   Another way of optimising your code for faster loading times is by preloading your CSS – a somewhat more technical task. This will force the browser to load the CSS and have it ready when it’s needed. Preloading CSS is especially useful for websites with bigger style sheets and modern web applications.
   
   Here’s an example of a preload command:
   
   • “href” points to the resource you want to download.
   • “as” can be anything you can download in a browser, for example:
   – “style” for style sheets
   – “script” for scripts
   – “font” for fonts

3. Implement Lazy Loading

   If you display images, animations or videos on your site, implementing lazy loading will make a significant difference to your site’s UX and Core Web Vitals scores. Lazy loading enables the loading of images and other heavy elements asynchronously that is, after the above-the-fold content is fully loaded, or conditionally, only when they appear in the browser’s viewport as they scroll down.
   
   Aside from improving page loading time, lazy loading also limits bandwidth usage. This is great for users accessing the web on mobile devices and with slow connections. Lazy loading can also help keep your visitors on the page and reduce the bounce rate.
   
   One of the easiest ways of implementing lazy loading of images is with native lazy loading, using the HTML markup below:
   
   <img src=”myimage.jpg” loading=”lazy” alt=”…” />
   
   Need a team of SEO experts to take care of this? Contact us today.

4. Speed up Your Server

   There could be a myriad of causes for a poor Largest Contentful Paint (LCP) score, for example slow server response times. If you have a complex site, the server keeps busy with handling requests and serving files and scripts. It’s therefore best to optimise those processes. The faster your server responds to requests, the faster your pages will load, which improves a lot of site speed metrics.
   
   Ways to optimise your server:
   1. Upgrade your hosting plan – preferably one that offers good performance at a fair price.
   2. Use a recent version of PHP.
   3. Upgrade the hardware if you find that lacking.
   4. Research how your databases work and make improvements where necessary. You can use tools like the Query Monitor WordPress plugin to analyse queries on your site.
   5. A content delivery network (CDN) – a geographically distributed group of servers that work together to provide fast delivery of Internet content – can do wonders to improve your Core Web Vitals.

5. Optimise JavaScript Execution

   The main cause of a poor First Input Delay (FID) score (over 300 milliseconds) is heavy JavaScript execution. Optimising how JavaScript parses, compiles and executes on your web pages will directly reduce FID.
   
   According to Google, one of the ways you can reduce the execution time is by reducing unused JavaScipt.
   
   How to see if your website has unused JavaScript:
   1. Go to your website, right-click and choose “Inspect”.
   2. Click on “Sources” and look for the three dots that open up “More Tools” on the bottom.
   3. Click on “Coverage” then press the reload function.
   4. When the load is complete, look at the bottom of the window where you will see how much JavaScript is not being used on your web page.
   
   Now that you know the amount of unused JavaScript, you can start to reduce it. One way of doing this is with code splitting, which essentially means to separate one JavaScript bundle into smaller pieces.
   
   If you lack the time or resources to handle all the technicalities involved with improving your Core Web Vitals scores, get in touch.

6. Provide Dimensions for Images and Embeds

   A Cumulative Layout Shift (CLS) score that’s over 0.1 is indicated as poor. This is usually caused by images or embeds, like videos from YouTube, without dimensions in the CSS file.
   
   If you want to improve your CLS score, it’s import to set proper width and height dimensions. This helps the browser allocate the correct amount of space in the page while the element is loading, which will avoid layout shift if it’s loaded off-screen.
   
   How to resize YouTube videos you want to embed:
   1. Open the video on YouTube that you want to add to your site.
   2. Find the share button and choose the <> Embed option.
   3. Copy the code into your website’s back-end and change the dimensions to the proper width and height that fit your site.
   
   It’s important to keep in mind that there is not one factor that’s guaranteed to fix one specific issue. To optimise your site and improve your Core Web Vitals scores it’s best to take a broad view. A number of little fixes can have big results.