How To Improve Core Web Vitals On Shopify

At some point, Google’s “Core Web Vitals” have probably come across your radar, or if they haven’t, they should be on it.

Everyone knows site speed is important from a user and conversion perspective, and then they’ve learned that Google uses that for page ranking, and so it becomes even more important for SEO purposes. But one of the hardest problems historically has been to measure site speed accurately and know if your optimizations are effective.

Because site speed can be a bit subjective and depend on a lot of factors, so when merchants complain that their site is “slow,” the first question I ask them is what are they using to measure the slowness.

So queue Google’s latest project: Core Web Vitals. This is their latest attempt at putting some solid metrics and measurements to measure page “speed” or, in their new words “Page Experience.”

There’s two main metrics they measure with this tool, and they can be a bit confusing.

• LCP — Largest Contentful Paint. This one is trying to measure how long it takes for the biggest thing in the main window above the fold to appear. This could be different from mobile to desktop and its typically slower on mobile.
• CLS — Content Layout Shift — This is measuring how many elements on the page shift during page load. You’ve probably experienced websites where when you click from page to page, things will appear at different times, and when a particular element loads, it shifts everything down. For Google, they think it doesn’t matter if an element appears super quickly if it moves all around on the page. It’s a bad experience.
• FID — First Input Delay — This is measuring any delay in the elements being visible on your site, but you’re not able to actually click on them. This one isn’t usually a problem unless there’s a major technical issue on your site.

• Google Search Console — This is the best tool for seeing how Google sees your Core Web Vitals metrics. The only downside is that the measurement isn’t real-time, so if you make improvements, you have to re-scan and wait for a few days to a few weeks to see if Google is scoring it better.
• Google Page Speed Test — This is an old tool, and I recommend ignoring the page speed score itself, but they’ve added some core web vitals measurements to the top of the page. You can also use this tool to see what Google is considering the “Largest Contentful” element as well as what elements are being dinged for shifting around during the page load. I also recommend ignoring their specific optimization recommendations, as many of these things can actually hurt your core web vitals. For example, they recommend lazy loading images, but if you lazy load your largest contentful paint image, that will decrease your LCP score.
• Lighthouse — This is a tool inside of Google Chrome developer tools that’s essentially what Google Page Speed Test is using to do its measurements, but you can run it in real-time.

So it’s great to know how Google measures your site, but how can you improve it?

• CLS — Use the Lighthouse tool to get a trace and see how your site looks in slow motion as it loads. Look at what elements move around and try and build into your CSS those parameters so that the final position is the same as the starting position. A lot of the shifting elements in Shopify comes from apps and integrations loading after the main content, so you might have to copy some of their CSS into your main CSS file.
• LCP — This one is a lot harder because there can be a lot of contributions to the largest contentful paint element loading slower. A relatively easy optimization for this can be to optimize your images. You should also remove anything from your theme that is unnecessary. Even after a lot of apps are uninstalled, they often leave behind scripts that will slow down your site.

Even after doing all this, your site might not still be performing up to snuff for Google’s very high core vitals standards. If you need help diving deeper and fixing your core vitals, drop me a line at mark@netalico.com.