• Services
    • Headless Ecommerce Development
    • Ecommerce UI/UX Design
    • Agency Support Services
    • Platforms
    • Shopify Plus
    • BigCommerce
    • Craft CMS
    • Shogun Frontend
    • ButterCMS
  • Case Studies
  • Blog
  • About
  • Contact
  • SEO
  • ecommerce
6 ways to improve your Shopify page speed and core web vitals  |  Read time 8 Minutes

6 ways to improve your Shopify page speed and core web vitals

June 17, 2021 |  Read time 8 Minutes

Chris Ching profile photo
By Chris Ching
Connect on LinkedIn
How to improve page speed and core web vitals

Whether you’re trying to sell blue shoes or generating leads for your coaching business, page speed can make or break your website’s conversion rate. Consumers expect a user-friendly performant experience, or they’ll likely bounce to Amazon or another competitor. In fact, Shopify's average page load time is 4.5 seconds, and achieving a speed of 2.8 seconds or less will put you in the top 10% of performers. Google would like to see sites performing under 3 seconds, so it's best to aim for performance over certain nice-to-have features that may bog your site down. Google’s search algorithm also prioritizes pages with better site speed, because why would they want to send you to a slow site? As of May of 2021, Google has indicated Core Web Vitals will heavily influence page rankings. This is the first time they're also laying out clear instructions and tools for meeting their standards. With that in mind, let’s look at the various ways you can improve your Shopifu page speed which literally means more bang per click.

Page speed testing tools

The first step in improving your performance is to understand where the issues may be happening. It could simply be a massive 3mb png that someone forgot to compress before uploading, poor code structure, or too many js libraries and apps. If you’re able to identify the images you need to optimize, you’re already on your way to a blazing fast score. One simple way to test this is by using your browser’s developer tools to inspect all the assets that are loading into the site.

While in Incognito mode In Google Chrome for Mac, press CMD + Option + I, and on PC it’s CTRL + SHIFT + I.

This will pull up the developer tools. Click on the ‘Network’ Tab. If nothing is showing, do a hard refresh (CMD + SHIFT + R on Mac and CTRL + SHIFT + R on PC). You should see the sizes of each image in the ‘size’ column. Anything over 100kb should be double checked if it can be optimized without looking like Cyberpunk on PS4 (sad gamer joke).

For a more robust report of your issues, there’s plenty of free tools to leverage. Here are some of our favorites:

Google Page speed Insights

Nothing matters more than Google’s own opinion of your website’s performance. So it’s in your best interest to ensure that you do achieve a good score with Google.

Web Page Test

This is my favorite tool to use, and it recently underwent a redesign after looking like it hadn’t been refreshed since the inception of the internet. Which is why good design truly matters when it comes to establishing trust, but I digress. By addressing any underperforming factor’s, it’s quite easy to gain a solid score with just a few tweaks.

Web Page Test
https://www.webpagetest.org/

Shopify has their own built-in performance report you can access here.

I also like to use this nifty Chrome Extension called Page Size Inspector which gives you a full detailed report of your page byte by byte across javascript, css, images, fonts, html, etc. It’s scary when you see how fast those third-party applications can add up!

Also built within Chrome’s dev tool’s is lighthouse, which also powers their own page speed insights. This will give you similar results as well. Keep in mind that you will get different scores across desktop and mobile and each should be addressed in order to improve search rankings.

Understanding your page speed report

There are 6 core areas that Google uses to measure your site.

First Contentful Paint (FCP) is the time it takes in which DOM content is first rendered on your website. This could be text or images. Achieving 2 seconds or less is considered great.

Speed Index gives a rating based on how long it takes for content to be populated. Video is actually used to capture how your site appears as it loads. The progression of your site between video keyframes yields the ultimate score. Ideally you want to be under 4 seconds which should net a 75-100 (green) speed index.

Largest Contentful Paint (LCP) measures the time it takes to render that raw and uncompressed blog image your content manager forgot to run through Tinypng. Anything over 4 seconds is considered bad.

Time to Interactive (TTI) measures the time it takes your website to understand your website’s code so that all functionality is fully accessible to the user. Having too many of those FOMO apps can surely bog your website down. You must be under 3.8 seconds to be in Google’s good graces.

Total Blocking Time (TBT) indicates how long a user is blocked from the website accepting their inputs. This could be keyboard, mouse clicks, or screen taps. Ever try to add to cart and it just doesn’t seem to work right away? Hello, bounce rates!

Cumulative Layout Shift (CLS) measures the web vitals of your website. Have you ever loaded up a blog and tried to click on the article, only for it to get pushed down and you end up driving to the wrong article? Well, that annoying little feature comes with it’s own score. Having heavy images, video, or a lot of third-party apps will significantly impact this score. Pay extra attention to this one, because starting May 2021 Google’s search algorithm will leverage CLS to influence page rankings. If you’re already using Google Search Console, you can see which URL’s are performing poorly across desktop and mobile.

TLDR; Solutions

Core Web Vitals Infographic
Improving your Core Web Vitals

1. Core Web Vitals

Identifying what your LCP, FCP, etc. can be done within chrome. Open your dev tools on chrome, and select the performance Tab. Hit the little refresh or record button and this will run the diagnostics. Scroll down on the right side and look for the timings section. You should see multiple tags for the areas we need to address. By highlighting them, such as LCP, you will see within your website’s view, what Google actually considers the largest contentful paint. Sometimes it can be a large paragraph, a video, a headline, etc. I was always surprised at what Google considered to be the LCP every time, so don’t leave it up to guessing.

Based on what it’s highlighting, you’ll have to alter the element. Big image? Run it through tinypng.com. If it’s video, perhaps switch to user-initialized or try compressing it down further. Services like Wistia and Youtube will give you the ability to stream, but you’re still loading in massive JS libraries to support the framework. I’ve also seen headlines and text come back as LCP. You may need to consider a different font if it’s not responding to changes. Not ideal, but neither is having a bad LCP score.

2. Defer your Scripts

Determine which scripts don’t necessarily need to load right away. These can be third-party libraries, trackers, etc. However, make sure they’re not connected to any functions that will give you runtime errors.

    Example:

    <script src=”somelibrary.js” defer></script>

    You can also use ‘async’ to run libraries asynchronously, which execute after downloading. This is different from defer, as it doesn’t wait for the page to fully parse before running.

    3. Use Lazy Loading

      Lazy loading will reduce your initial loading of images by delaying initialization until necessary. This will conserve the user’s bandwidth and allow for a faster page load. Most modern browsers will support lazy loading natively. You can simply append a loading=”lazy” within your <img> tags.

      Example:

      <img src=”your-image.jpg” alt=”your image” loading=”lazy”>

      Keep in mind that not all browsers support this feature natively, so you may want to consider a library such as LazyLoad or blazy. They’re both lightweight libraries that will work across all browsers.

      4. Compress your images

      It’s easy to forget about compression when you’re in a rush to push out a new product or that new blog article. Many platforms like Shopify, Craft CMS, and Wordpress have baked in image compression or third party tools to help at the CMS level. Uploading a non-compressed image, or something straight from a camera will do some heavy damage to your page speed. Tools like TinyPNG can help mitigate that. TinyPNG is a drag and drop tooling that’s free and easy to use. If you’ve got hundreds of images to compress, then you may want to upgrade to a paid account as they limit the number of compressions per batch. They also support jpg formats, so don’t let the name fool you.

      5. Use Content Delivery Networks (CDN) for third party libraries

      Most of your popular tools and libraries will already have links connected to a CDN. More often than not, these tools will provide you with said link. It’s a good chance that the library is also cached on the user’s end from visiting other sites. This will significantly improve load times.

      6. Minify your CSS and Javascript

      Minification is the process of removing white space and other markups in order to reduce file size. If your website doesn’t already have built-in tooling for minifying your CSS and javascript, then consider using a third party like Minifier. Minifier is a drag and drop tooling like TinyPng that will allow you to compress your files in seconds. You’ll need to upload these files to their respective folders and update the source from your HTML. Most third-party libraries will give you a minified version, so be sure to use that instead of the uncompressed version.

      With these 6 tips, you should be able to improve your page speed significantly. There are additional techniques such as fixing runtime errors or simply coding more efficiently to improve your score. These areas will likely require a developer to integrate. At Electric Enjin, we offer services such as Page Speed Optimization. If page speed is preventing you from hitting your website’s performance goals, feel free to drop us a line.

      6 ways to improve your Shopify page speed and core web vitals
      Electric Enjin

      More thoughts on Shopify

      best shopify plugins for ecommerce

      8 Shopify Plugins That Help Run Your Ecommerce Business

      4 Minutes

      Optimizing product pages for ecommerce seo

      How To Optimize Product Pages For Shopify SEO

      4 Minutes

      Shopify Benchmarks Bounce Rate Conversion Rate

      Top Ecommerce KPIs To Optimize Your Shopify Site For

      5 Minutes

      optimizing shopify for lower bounce rates

      How your Shopify site can win the fight against declining attention spans

      4 Minutes

      • Craft CMS Partner
      • Shogun
      • ButterCMS
      • Shopify Partners
      • Zendesk Partner
      • bigcommerce partner

      Electric
      Enjin

      • Home
      • Work
      • Company
      • Careers
      • Blog
      • Contact
      • Rss
      • Blog Archive
      • Work Archive
      • Sitemap

      Our
      Services

      • Headless Ecommerce Development
      • Ecommerce UI/UX Design
      • Shopify Plus
      • BigCommerce
      • Craft CMS
      • Shogun Frontend
      • ButterCMS
      • Agency Support Services

      CMS
      Guides

      • Shopify vs Magento: The best ecommerce platform for your business
      • Shopify vs Shopify Plus: Is the price tag worth it for your ecommerce business?
      • Craft CMS vs WordPress: Which is the best CMS? 2023 Edition
      • Craft Commerce vs Woocommerce
      • Craft CMS vs WordPress: SEO Matchup
      • Craft Commerce, Shopify & BigCommerce Platform Comparison

      Let's
      connect

      • 203-939-9344
      • [email protected]
      • Electric Enjin
        20 N Main St
        4th Floor
        Norwalk, CT 06854

      Ecommerce tips & insights
      straight to your inbox.

      © Electric Enjin LLC 2023.
      Electric Enjin is a certified Minority Business Enterprise.

      Privacy Policy

      ×

      Let's Talk

      To get started, we just need a little information.

      Noel Lopez, Client Success Manager

      Chris Ching, Founder


      What to expect

      1. Chris will reach out to schedule a free 30 minute consultation.
      2. We'll discuss your goals, requirements, timing, and other details.
      3. Afterwards, you'll receive a tailored proposal.
      4. We get to work.
      ×

      Give us your email (so we know you’re not a bot) to access the case study.