6 ways to improve your Shopify 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:
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.
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.
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
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.
