May’s hotly anticipated algorithm update will further emphasise the importance of Google’s Core Web Vitals. Taking Largest Contentful Paint (LCP), First Input Delay (FID) and Cumulative Layout Shift (CLS) into account, the update puts User Experience (UX) front and centre. By following Google’s lead, websites and ecommerce platforms can expect to see better site performance and ranking in SERPs.


Google’s Core Web Vitals

So, what do the metrics consist of? Well, guidance from Google suggests that a low LCP score of 2.5 will put you in its good books. That means a page’s main content should load within 2.5 seconds of landing on it. When it comes to FID, customers should be able to interact with any page within 100 milliseconds of landing on it. Finally, CLS measures how many unexpected layout shifts take place on a website. CLS scores should be lower than 0.1 to maintain ranking. That means having very few pages that unexpectedly jump as it loads, a blessing to all internet users I imagine.

With this major algorithm update due in May, you may find yourself stuck with how to prepare. To help you out, here are the top 11 things you can do to make sure your website meets Google’s Core Web Vitals checks. I’ve used Magento as the example throughout this article, but that doesn’t mean it isn’t relevant to your site. If there’s a fix you reckon your website needs, then speak to your developers to find out how. Or, if you don’t have a team of developers on hand to help out, then why not use this article as the jumping off point for some more research?

  1. Don’t forget to cache

It may seem like a simple step to take, but make sure all your website’s caches are turned on. You shouldn’t just be caching your images and scripts, caching HTML content is equally important. Caches will help improve your website’s response time. Forgetting this quick fix is more common than you’d think, so make sure you remember.

  1. Configure a caching tool

We recommend a caching tool as well as one of the top two open-source web accelerators, Fastly and Varnish. Both help improve high-content page performance, specifically those full of images. Whilst both platforms are well-respected, Fastly has all the power of Varnish, with a little more added functionality.

As well as Fastly or Varnish, you may want to add a separate upgrade from a content delivery network, also known as a caching tool. This is a useful addition to websites as it improves website stability, making your store faster and more reliable. The choice tends to be between Redis and Memcached.

Whilst the two can be used interchangeably, they should never be used alongside each other. 

  1. Use lazy loading for images

If your website hosts lots of images, then it’ll probably benefit from some image optimisation. Lazy Loading is one way to do this. Lazy Loading makes sure images only load when a user scrolls down the page. This means the browser won’t try to load the whole page at once, instead it will prioritise loading visible content first. 

This can make a huge improvement to your LCP and helps preserve bandwidth. It’s also an SEO-friendly technique as search engines will continue to crawl the images as usual.

  1. Improve loading times by optimising CSS 

On most websites the main elements that need downloading are photos and graphics. But that isn’t to say we should ignore other elements hosted on your website. In fact, optimising CSS can make things go much faster.

If it takes a while until anything appears on a page, that’s because CSS is one of the last things to load. To improve UX, you need to optimise anything that appears above the fold on your webpage. That may mean removing any critical parts of your design from the CSS file and inlining it in your code. So, even if the rest of the page takes longer to load, there’s still something to see above the fold.

If your website is built in Magento, there is a trick to improving existing CSS code and therefore load speed by enabling CSS minification and merge. These settings are not accessible from the admin interface whilst your site is in 'production' mode so you will need a technical person to configure this using in the app/etc/config.php file. Be careful when enabling CSS merging as it can wreak havoc with some third-party CSS so make sure to test this out on a staging environment first.

  1. Make sure your JavaScript settings are offering the best performance

Software like Magento will try to combine all your website’s JavaScript (JS) files into a couple of big bundles. Why? Well, because it helps to improve loading procedures. However, this can prevent the page from loading until the browser has downloaded all of the bundles. In the eyes of Google’s Core Web Vitals, this is detrimental to UX.

With sizes as big as 10MB large, JS files are much larger than CSS. As your server has to load these bundles for every page a user clicks on, they can really disrupt a shopping experience. And remember, it isn’t just the JS bundles your browser needs to download. It also needs to load all the other media and files on your webpage. So, if the first experience of a brand-new customer is low page speed, they’re hardly leaving with a positive impression.

To get round the low load time, a common fix is to pair JS bundling with a CDN upgrade. Together, the JS bundles will be smaller and the CDN will help deliver them to users quicker, making pages load faster.

  1. Turn on HTML minification

Minifying HTML, CSS and JavaScript files means they’ll take up less space and load faster, improving UX. Not only will minifying remove any developer comments and replace names with shorter versions, but it’ll also do a general tidy up of your code and help reduce clutter. Overall, these make for a much more streamlined UX. 

If using Magento you can apply the similar trick mentioned for CSS merging and minification, as HTML (and JavaScript) minification can be enabled the same way using app/etc/config.php.

  1. Compression

For an ecommerce platform that’s driven by performance, Gzip is a must have. This clever tool compresses every page that’s requested from your site’s server. That means that a large file will be sent to your browser as a much smaller gzip archive file. 

It’s worth remembering that compressing files doesn’t come without its drawbacks. In fact, compression takes up your computer’s processing time. That means servers have to find the right balance between data savings and fetch time. So, whilst compression can improve your website speed, it does come at a cost.

In a practical sense, one of the best things about Gzip is its accessibility. This module is very popular, meaning most environments and web platforms support it. Get in touch with your website developer or host to make sure it’s turned on for your site. If it isn’t, it’s simply a case of switching it on.

  1. Fix .htaccess caching options

In order to get the best performance out of your website, you’ll need to optimise your critical server instructions. These are stored in the .htaccess file and you’ll need to do some coding to optimise them. Speak with your developers or SEO consultant to make sure they’re optimised properly for Google’s Core Web Vitals.

  1. Replace Apache with Nginx

If you’re reading this article the making your website load faster is most probably one of your goals. Well, one of the ways to do this is to find a web server that can process your request fast. It’ll also need to deliver both PHP and static content efficiently. 

When it comes to Magento specifically, it’s known that it runs best on Nginx 1.x and Apache 2.2+. But deciding between them can be hard, so which one should you choose for the best performance?

Well, Nginx is the recommended choice by Magento itself. The fact that it chooses Nginx rather than Apache speaks wonders. That’s probably because Nginx has settings that can help improve website performance.

If your website isn’t a Magento site, then not to worry. Lots of other web hosts have pinpointed Nginx as the best solution for loading large quantities of static and moving content. The best bit? Nginx uses less resources but manages to cope quickly with more requests.

  1. Remove unused plugins and event observers

Many web hosts are beginning to encourage developers to stop using observers and opt for plugins instead. At the moment, most sites are probably running both plugins and observers. This can slow the website down and needs to be fixed.

In Magento, for example, many event observers are loaded by default, even if they aren’t necessarily being used for that page. Unfortunately, even if they aren’t being used, they will still take up your system’s resources. 

To see what core observers your website is running, as well as their tags, head over to the events.xml file. This file can be found at /dev/tests/functional/etc/ in Magento. By disabling as many of these event observers as possible, all Magento pages will speed up. If you want to really see the difference, it’ll be most noticeable on any pages that are heavy in AJAX.

For Magento users just add the below text to an observer’s code to disable it.

disabled="true"

To do this, I recommend creating a separate events.xml file within a third-party module. That’s because disabling an event observer in the main events.xml file could compromise the file’s structure. Doing so in the custom .xml file will override it without risk.

Even though plugins are now the recommended method of choice, that doesn’t mean your website should be littered with them. Take time to audit your Magento plugins regularly to see what is unnecessary and can be safely removed. Whilst plugins can prove very useful for providing extra functionality that Magento doesn’t have, they shouldn’t be used unnecessarily. So, if changing preference settings will overhaul Magento’s core functionality, then that should be your first port of call. Plugins are only the second-best option.

  1. Avoid an excessive DOM size

If your website’s DOM tree is larger than necessary, then you’ll find that it increases memory usage, creates costly layout reflows and leads to longer style calculations. In other words, that means a worse on-page experience. For UX and general user satisfaction, avoiding an excessive DOM size is definitely in your site’s best interests.

Ok, so you’ve ticked all the boxes and reckon your site is ready for Google’s Core Web Vitals checks? Well, let’s put it to the test. Check how fast your website is using one of the tools below. If it’s still performing badly, then it might be time to bring an SEO consultant or agency onboard to help.

WebPageTest.org

Simply enter your website, location and browser and you’ll be privy to all your Core Web Vitals results. Searching browser by browser could be tiresome. Instead, I suggest using Google Analytics to pinpoint the top three browsers used on your site and focusing on them. Once you have them under control, it’s time to finesse the more niche sites.

Page Speed Insights

Run by Google, this tool helps you to see how your site’s running on mobile and desktop. The best thing is that it also offers some guidance on how to improve the site’s speed. 

GTmetrix

Whilst GTmatrix makes you create an account to change location, browsers and other options, for some companies it’s worth it. It’ll give your website an overall score and assess its load time and page sizes. Plus, it highlights some of the top issues and ranks them according to their importance.

Author: Amine Dahimene is an experienced SEO consultant working for The Pixel client, Heal’s.