How To Improve Core Web Vitals on Shopify Plus and Shopify

  • 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.
  • 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.

--

--

eCommerce Web Developer (Magento/Shopify). Remote Worker (currently working from Miami Beach). Business Owner (netalico.com). Cat Lover (Cookie/Fender).

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mark William Lewis

Mark William Lewis

236 Followers

eCommerce Web Developer (Magento/Shopify). Remote Worker (currently working from Miami Beach). Business Owner (netalico.com). Cat Lover (Cookie/Fender).