How to Optimize Shopify for the Core Web Vitals Update
Google has spent a lot of time, manpower, and energy over the last decade pushing for an internet that has, above all else, a good user experience. Everything from Panda to their most recent algorithmic updates has been focused on improving the user experience and cutting down on the sites that promote sales over usability.
Most recent in their push for usability is the Core Web Vitals update. They announced Web Vitals back at the start of May, and have slowly been pushing it further with their minor updates since.
So what is it, how can you determine where your site stands, and how can you improve the performance of your Shopify store? Read on to find out.
What Are the Core Web Vitals?
Web Vitals is, as Google calls it:
“..An initiative by Google to provide unified guidance for quality signals that, we believe, are essential to delivering a great user experience on the web.”
For years, Google has said that one of the best things you can do to improve a website is to make sure that the user experience is good. As long as you have a good user experience – and good content, of course – your site is bound to do well. Until now, though, Google hasn’t really said what makes a good user experience.
Oh, they have some guidance out there. No keyword stuffing, no broken links, no broken scripts, no excessive redirects, and so on. Most of that, though, you’re never going to do accidentally. Only people who know enough about SEO to do it, but not enough to avoid doing it wrong, fall into those kinds of traps. Most people just running sites meet all the basics of good user experience, as far as they know.
The Core Web Vitals are what Google has determined – through analysis of real-world user behavior – are the most important aspects of good user experience. There are three of them: LCP, FID, and CLS.
LCP is “Largest Contentful Paint”. If that sounds like nonsense, we thought so too until we read about it. This is a measurement of how long it takes for enough of your website to load that it feels fully loaded.
If you’ve ever visited a website and seen it sit there loading for a while, and seen it load a handful of content, only for an image to pop in later and shift the whole thing down, you know that’s a disruptive experience. Google wants to push websites towards a design where most of the page’s content – at least the content above the fold – loads quickly. You can lazy load content below the fold, in the footer, or otherwise out of view later, and that’s fine.
This is a similar metric to the various “time to first byte” and the like, but it’s focused more on the time before the page can be considered more or less fully usable. Anything faster than 2.5 seconds is good, anything between 2.5 and 4 seconds is alright but needs improvement, and anything longer than 4 seconds is poor and needs work.
FID is “First Input Delay”. It measures the amount of time between when the user makes their first interaction with your page and when your page responds to that interaction. They might click on a link, or use a script-based button, or otherwise try to interact with the page.
One of the most common issues with this metric is the page that loads a script after the content and monopolizes the browser’s threads to execute it. The user might see your page looking fully loaded, but when they try to interact with it, they find they can’t, at least not as immediately as they would like. Even a minor delay can feel terrible for usability.
The scale here is measured in milliseconds. Under 100ms is good, while 100-300ms is in the “needs improvement” category. Anything longer than 300ms is considered poor and will need attention.
CLS is “Cumulative Layout Shift”. This is a measurement of the visual stability of your page. We’ve all encountered websites where, as elements load, the layout of the page shifts to accommodate them. A lazy-loaded image shifts text down, an ad loading late creates a break in the page, and so on.
Most of the time, a layout shift will merely disrupt the user’s experience by moving the text they’re reading. In some more extreme cases, however, an abrupt shift can move an element the user was about to click on, causing them to click on something they didn’t intend. This video from Google illustrates a worst-case scenario involving a one-click buy option on a storefront.
Google uses an equation derived from two factors to rate a site: how much of the page is taken up by elements that move, and how far those elements move when they move. You can read the scale and the equation on the page linked under CLS above.
Where Does Your Site Stand?
Thankfully, measuring where your site stands with the Core Web Vitals is pretty easy. Like most unique metrics Google develops, they have produced a tool to show you a report for your site.
To view your report, simply click on this link. This will bring you to your Core Web Vitals report in the Google Search Console. Obviously, you need to have your site added as a property in the Search Console to get this report.
If you see “no data available” instead of a report, either you haven’t added your site to Google’s search console, or your site is too new for it to be indexed and analyzes, or there’s not enough data to generate the report.
If you see data, you’ll see a report with an overview page, and tabs for Poor, Needs Improvement, and Good. You can see how individual pages on your site stack up, with data for both mobile and desktop users.
Ideally, your site across the board will rate Good. In the real world, you’re likely to have some issues across different pages on your site, which will drop some pages or entire URL groups down to one of the lower categories.
Now, Core Web Vitals is not a huge impact on SEO and search ranking, at least not yet. You can gain tangible improvement by focusing on getting everything to green, but if you have other more important issues to contend with, optimizing your Core Web Vitals won’t outweigh them.
How to Make Improvements to Your Shopify Store
There are a lot of different things you can do to improve your Core Web Vitals ratings. As a Shopify store, you have some of the groundwork covered already. Unfortunately, some popular scripts, apps, and themes for Shopify integrate what were previously best practices, but which now cause a hit to one of the Core Web Vitals.
The first step, of course, is to look at your Core Web Vitals Report and check to see what issues your site is having. Look at Poor pages first, since improving them will give you the best positive impact. Once everything is at least Needs Improvement, you can focus on those pages and get everything into Good.
Here are some actions you can take, depending on the problems you may have.
Use a Next-Gen Image Format. In the past, the best way to save images on the web was to use JPGs for lossy compression, PNGs for lossless compression, and GIFs for animated content. These days, animated content can be formatted as a WebM file, and images – both lossy and lossless – can be formatted as WebPs.
Google unveiled WebP as an image format in the middle of 2019, and it’s quite impressive. It makes images significantly smaller than comparable JPGs while supporting lossless compression and transparency.
Shopify already supports WebP natively, but you may want to use an app to optimize images you upload so that they’re as small as possible. Small image files mean more compression is available in the WebP conversion, which means faster loading times, and thus faster time to Largest Contentful Paint.
Try out Image Optimizer or TinyIMG Image Optimizer to “crunch” down your images effectively.
Rearrange Above the Fold Elements. Part of the measurement of the Largest Contentful Paint is fully rendering everything that appears above the fold on your site. Unfortunately, lazy-loading images tend to slow down the Largest Contentful Paint measurement. Typically, one of the best things you can do is disable lazy-loading for any images or other elements (like lightboxes or script-generated interactive content) that appear above the fold. If you can’t optimize those elements, consider rearranging them such that your lazy-loaded images are pushed down below the fold.
Optimize Scripts. Scripts tend to have the largest impact on the First Input Delay metric, as the time it takes to execute a script is time that delays a browser from acting. There are a few ways you can work with your scripts to minimize this problem.
- Optimize your scripts. The faster a script executes, the better. Using a Minify plugin to crunch down scripts can save space as well.
- Minimize scripts. The fewer scripts you have running on the page, the fewer opportunities for delay.
- Rearrange scripts. Put your scripts in your footer whenever possible, so they execute once the initial content has loaded. Just make sure you aren’t delaying the loading of a script that changes your site layout, which can cause issues with your Cumulative Layout Shift.
Some scripts you can’t change much, like Google Analytics, but others – especially custom scripts – can be optimized or removed.
Remove Preloaders. One feature that is all the rage among some Shopify themes is a preloader. A preloader essentially delivers a placeholder to people with slower connections. Sometimes it’s a “now loading” animation, sometimes it’s an image render of what your site will look like.
The problem here is that a preloader delays your Largest Contentful Paint, and it can disrupt your First Input Delay and your Cumulative Layout Shift when the real content loads and the preloader content disappears.
Unfortunately, while the idea was sound – providing something for the user while they waited – the implementation is not what Google has decided should be ideal.
Use CSS Sprites. A “sprite sheet” is a single image with a variety of smaller images combined. First created for video games, the concept has been ported to web development as a speed-enhancing feature. By combining small, common images like logos, social media buttons, and icons, you turn what would be half a dozen or more image load calls to the server into one single call. Meanwhile, you use CSS to specify which portion of the sprite sheet to load in a given position.
Invest in a CDN and Cache. Putting your media and scripts on a content delivery network like Cloudflare allows you to offload some of the server calls, load times, and delivery delays inherent in rendering a website. A major company like Cloudflare, combined with a caching app, will offer more speed to customers across the country and around the world than hosting everything yourself and loading it up-front would.
Remember that part of the search rankings is site speed. Core Web Vitals are all impacted by general site speed improvements as well.
Hire an Expert. If you’re not a developer yourself, some of this article might sound like nonsense to you. It can take days or weeks to optimize even a relatively small and simple site to meet the standards of the Core Web Vitals, and a more complex or larger site can have all manner of unexpected issues along the way. Sometimes it’s simply better to hire a talented developer or a company to handle the optimization for you.
Every step you can take for each Core Web Vital, pulling individual pages or entire URL groups from Poor to Needs Improvement and from there to Good is beneficial to your site. It can be complicated and confusing to identify and fix problems, but thankfully, some single changes can improve your entire site all at once. The first step, though, is to run the report and figure out where you stand.
- Which Shopify Apps Can Help You Sell Subscription Products? - January 16, 2021
- 6 Ways to Build a Visual Product Customizer in Shopify - January 4, 2021
- How to Build and Configure a Chatbot For Your Shopify Store - December 16, 2020