9 Shopify Site Speed Fails You Need to Fix Before BFCM 2022

Black Friday is just around the corner. Are you ready to make the most of them? When people land on your Shopify store, will they find it smooth and responsive, or frustratingly slow? 

Site speed is one of the most important factors in answering that question.

We asked our Shopify site speed expert Fernando Sala the biggest mistakes companies are making right now — that way you can create the best possible experience before BFCM 2022.

You Aren't Properly Optimizing Your Images

Too many companies upload images as-is, large file sizes and all. The problem is that when a page loads, unoptimized images are loaded at their original size and resolution before scaling down to fit.   Fortunately, this mistake is simple to avoid.

Make sure images are properly-sized and optimized. For hero photos, that means under 150 kb and 1200x800 pixels — though this varies depending on layout. Product photos should be around 250x300 pixels and no more than 20 kb.

When a page loads, unoptimized images will be loaded at their original size and resolution 

Your Code Is Bloated

Issues with JavaScript, HTML, and CSS arguably represent the most common reason for poor website performance. Coding errors may cause a page to hang, either because it's caught in a loop or because it's trying to find an element that doesn't exist. Redundant or unnecessary code can even further increase load times. 

Remember that you're going for a largest contentful paint of 2.5 seconds or less. The main content of your site should be fully loaded and accessible to the user within this timeframe. To ensure your code doesn't impede this, you'll need to do a few things: 

• Only load resources when the user needs them. 
• Although Shopify automatically minifies JavaScript and CSS, we recommend doing it yourself before uploading. 
• Don't load JavaScript, CSS, and HTML simultaneously. Load them asynchronously in sequence. 
• Make sure you're using the right JavaScript libraries, and that there's not a more efficient option available.

You Have Way Too Many Apps

Not all Shopify apps are created equal. Some include extensive libraries, images, and other unnecessary  content. Others block loading by storing everything on their own server. 

Even well-optimized apps can bog your website down if you have too many of them.  You need to be incredibly discerning about the apps you use and the themes you install. Remove everything that isn't absolutely necessary for your store. 

Additionally, when installing an app or uploading a theme, use Google's PageSpeed Insights to measure performance both before and after installation. You can also use the Shopify Theme Inspector to help you avoid bloated themes. 

You're Loading Video Assets When You Don't Need To

Video can be incredibly effective when used properly. However, it can also destroy your site's performance. Not only that, if your videos are configured to autoplay, you will also alienate a large percentage of your visitors. 

If you must use videos, embed them. Try to keep them under 5 mb or 10 seconds as well, and remember that each second of video adds approximately 1 mb. And again, make sure you lazy load your videos. 

You Aren't Using Lazy Loading

We've already said it several times, but it bears mentioning again. Apply lazy loading to your entire site. Page elements should only render once they're on-screen for the user, and only if the user actually needs them. This is doubly true if you intend to use GIFs. 

Although not as heavy as video, they still have a significant impact on page speed. In addition to lazy loading them, make sure you strike the proper balance between quality, speed, and file size. Generally, 480x480 is a good resolution for GIFs, and they shouldn't be larger than 600 kb. 

You Aren't Installing Pixels Properly

Pixels and other tracking tools are incredibly resource-intensive. If you load them on-page, the user insights they provide simply aren't worth their impact on speed. Instead, you should preload them into Google Tag Manager. 

This will allow you to keep all your tracking code, scripts, and other tools in a single location. More importantly, you'll be able to load all these elements asynchronously, ensuring they don't interfere with rendering. 

You Have Too Many Fonts

You might be surprised to learn that the wrong font choices can drag your website down just as surely as poorly-optimized media. A single non-system font takes up a surprising amount of space, translating to a large download. If you use more than one font, that adds up fast. 

You have a few options where fonts are concerned: 

• Use a font from the mono, serif, or sans-serif family. Because these are all system fonts, they're already present on most systems. 
• Use a font that supports Scalable Vector Graphics (SVG). 
• Load your pages with a default font initially, and apply custom fonts once the page is fully loaded. 

Your Pages Are Too Complex

Technical blunders are not the only thing that can impact page speed. Overdesigning is just as bad, while also creating a confusing and frustrating user experience. As a general rule, especially when creating your homepage, less is more. 

Keep things simple and streamlined.  Give people the most important information at the top of the page, and make sure everything from navigation to site copy is intuitive. You might also consider further optimization by leveraging heatmaps to see how people interact with your website. 

Your Site is Outdated

It's tempting to ignore patches. However, this is something you do only at your own risk. In addition to addressing cybersecurity vulnerabilities, theme and application updates often contain bug fixes and performance enhancements. 

We strongly recommend leaving automatic updates for both applications and themes enabled, if possible. 

Get Your Website's Health in Check With Parkfield Commerce

Struggling to address any of the problems described above? Fix them before Black Friday & Cyber Monday by partnering with Parkfield Commerce. 

We've already helped multiple major brands optimize their performance — Helimix.com, for instance, saw its PageSpeed Insights score increase from 5/100 to 90/100 on desktop.

Looking to conquer BFCM 2022? Contact us today and we’ll show you how to achieve the quick wins.

‍