Critical: Core Web Vitals on Shopify Plus

Search Engine Optimization is a critical way for future customers to discover your Shopify or Shopify Plus store. ‍Soon, Page Experience will become a ranking factor, mainly through Core Web Vitals. Google will start penalizing stores that have poor Core Web Vitals starting June 2021. 

If you’re wondering, Core Web Vitals are new web performance metrics that Google deems important to your shopper's user experience. They are crucial if you're focusing on maintaining Search Engine Optimization for your Shopify storefront.

These three new website performance metrics assess how fast your store loads, how stable it appears as it loads, and how quickly your site responds to user interactions. Having metrics that perform well indicates that the page is likely to have a good page experience. Having Healthy Core Web Vitals helps ensure that your website provides a good user experience for your customers. 

Good website performance has already been shown to affect how users engage with your website. Shoppers are more likely to stay on your site and complete a purchase if it’s fast and tailored to their experience.

Here’s a refresher if you forgot what these are:

• Largest Contentful Paint (LCP) – Measures when the main content is downloaded, visible, and useful to the site visitor.
• First Input Delay (FID) – Measures how long a user has to wait for the site to react when interacting with a web page element like a link.
• Cumulative Layout Shift (CLS) – Measures how much time it takes for the content to stop shifting around and be stable enough for users to interact with it successfully.

​​​​​​​Shopify’s Core Web Vitals dashboard
The ability to track Core Web Vitals is widely available across popular Google web developer tools and can be accessed by every site owner in development and production.

In Shopify, this app provides a built-in report about how real-world Google Chrome users experience your Shopify-powered storefront, and it enables you to benchmark your site against a custom list of competitors on each of these vital metrics:

• Largest Contentful Paint
• First Input Delay
• Cumulative Layout Shift

The user experience data is provided by Chrome UX Report and aggregated from anonymized Chrome users browsing the web.

Improving Core Web Vital in your Shopify Plus store

There are a lot of different things you can do to improve your Core Web Vitals scores. If you have a Shopify store, you have some of the groundwork covered already. Unfortunately, some former best practices now cause a hit to one or more Core Web Vital metrics.

After you have analyzed your store URLs, look at “poor” pages first. Once everything reaches 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:

• Rearrange above-the-fold Elements
• Use a next-gen Image Format
• Optimize scripts 
• Remove preloaders
• Use CSS sprites
• Invest in a CDN and cache

Rearrange above-the-old Elements

Part of the Largest Contentful Paint measurement fully renders 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 that appear above the fold. If you can’t optimize those elements, consider rearranging them so that your lazy-loaded images are pushed down below the fold.

Use a next-gen image format 

Previously, 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.

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 faster time to Largest Contentful Paint. Try out an image optimization store app to crunch down your images effectively.

Optimize scripts 

Scripts tend to have the largest impact on the First Input Delay metric, as the time it takes to execute a script delays a browser from acting. There are a few ways you can work with your scripts to minimize this problem.

The faster a script executes, the better. Using a Minify plugin to crunch down scripts can save space as well. The fewer scripts you have running on the page, the fewer opportunities for delay. 

Additionally, 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 can be optimized, removed, or rearranged.

Remove preloaders 

Preloaders are popular features among Shopify themes. A preloader essentially delivers a placeholder to people with slower connections. Sometimes it’s a “now loading” message, and 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 content loads and the preloader content disappears.

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.

Leverage CDN and cache

Putting your media and scripts on a content delivery network allows you to offload some of the server calls, load times, and delivery delays inherent in rendering a website. These solutions offer more speed to customers across the country and around the world than hosting everything yourself. Remember that part of the search rankings is site speed. Core Web Vitals are all impacted by general site speed improvements as well.

Contact The Experts

It can take days or weeks to optimize even a relatively small and simple site to meet the standards of Core Web Vitals, and a more complex or larger site can have issues along the way. Sometimes it’s simply better to ask a developer to take a look under the hood and make improvements.  If you’re looking for help, reach out to the team at Third and Grove and start enhancing your store for Core Web Vitals today.