- Published: May 17, 2021
- Last Updated: August 30, 2021
- Author: Lindsey Nelson
Page Speed has always been important to the user experience and to online business. In 2021, with the rollout of the Google Page Experience Update — starting in June — page speed will have an impact on search engine rankings. The update will make it harder for slower websites to rank in Google search results, making it more important now than ever to have a high-performing, fast website.
Of course, the larger an online business becomes, the harder it often is to maintain a high-performing website. This applies to all sites — including Shopify sites.
This article will explain ways you can improve your page speed through troubleshooting, and how Huckabuy Page Speed can benefit your Shopify store website.
Table of Contents
- Shopify Performance Issues and How to Fix Them
- Theme Issues
- Code Bloat
- Third-Party Integration Issues & Shopify Apps
- Image Loading Issues
- Why larger brands need a page speed solution
Shopify Performance Issues and How to Fix Them
Shopify has extensive documentation on Shopify speed optimization and possible troubleshooting tactics you can implement to speed up your Shopify site. Below we’ve sectioned out some of the most common reasons for site performance issues as detailed in a recent webinar on Shopify speed optimization.
The next step is to discover the circumstances in which the theme issue occurs. Once you have been able to identify the circumstances that the theme issue occurs — and can recreate the bug — you can contact the theme developer to address the issue.
Read this article for more information on how to solve theme issues with your Shopify site.
Note: The different variables with the browser, device, or operating system (all client-side, real-world user variables) are important to take into consideration because these variables could be missed in a controlled testing environment like Google Lighthouse Report. Make sure to reference testing tools like Google Search Console Page Experience Report to get real-world user data to measure site performance.
Third-Party Integration Issues & Shopify Apps
Certain third-party solutions and Shopify apps can slow down your site with synchronous scripts, style sheets, and other external resources loaded from their parties. It’s important to be aware of how these external solutions are impacting your site speed and remove any apps that are causing a negative impact on your site performance.
“Seriously consider the trade-off between features and performance. Shopify provides some tools that allow brands to detect performance damage, and we plan to continue improving them to support their app choices in the future.”— Javier Moreno, Data Science Manager, Shopify
Larger images can slow down your page speed and negatively impact your site performance. The first thing you should consider is the file size of the images on your website. When the image file size is larger it will take the browser longer to load it. For smaller images and graphics, you should aim to keep the file size below 300 KB, and all image file sizes should be under 1 MB. Overall, the smaller your image sizes, the better.
You can shrink your images in one of two ways:
- Resize your images
- Compress your images
Resizing your images involves manually changing the size of your images in software like photoshop, and then saving the image as a smaller file size. To shrink your images further and still maintain pixel quality, you can use an image compression tool. There are various free compression tools that are easy to use. All you need to do is open your document finder and drag and drop (or upload) the image files you’d like to compress into the compression tool. The tool will then give you new, smaller image files to download and then upload to your website.
Click here for a step-by-step guide to shrinking image files.
GIFs can be a great way to enhance the UX of your website, but they will take a toll on your site speed. GIFs require more complex code than images and they make the file size of the page larger. You’ll want to consider how much a GIF enhances the user experience on a given page, and then replace any unnecessary GIFs with images.
Lazy Image Loading
Another thing to consider with images is to prioritize loading images above the fold. Instead of forcing users to download every image on your site, lazy loading enables a browser to prioritize loading only the images that are visible in the initial screen view.
If most of your visitors use Chrome, you can implement lazy loading manually by adding a loading=“lazy” property to the <img> tag, but be aware that your images won’t load lazy in other browsers.
Note: Huckabuy’s Media Deferral and Fold Prioritization features replace the need to implement lazy image loading and optimize important performance metrics like Largest Contentful Paint.
Why larger brands need a page speed solution
Huckabuy Page Speed provides several different features to holistically enhance the speed of your website. These features address some of the most common issues that slow down websites — including the problems mentioned above.
Here are all the features you can get when you apply Huckabuy Page Speed to your website:
- Script Timing
- Bandwidth Aggregation
- Media Deferral
- Fold Prioritization
- Rocket Loader
- HTML, CSS, and JS minification
- Image Polish, Automatic WebP, and Image Mirage
- Argo Routing
- HTTP/2 and HTTP/2 Edge Prioritization
- Brotli Compression
Boost Your Speed Score 20-40 Points
There are several things you can do to improve the speed of your Shopify site. Huckabuy can help improve your site performance considerably, but even with Huckabuy, you may need to make difficult decisions between implementing certain UX features and site performance. Overall, site performance is the most important aspect of user experience and makes a huge impact on the success of any online business.