Page speed is a critical component of any online storefront. Loading pages with noticeable delays can be discouraging for customers and have a negative effect on your search engine optimization (SEO). Network speed, Shopify theme, platform limitations—there are many factors that contribute to poor performance. This article explores some actionable tasks that can streamline your theme for better performance.
Update to the latest version, minimize your apps, simplify above-the-fold content, tie up loose ends in your links, and fine-tune your images for better theme performance.
Update to the latest version
Support agents may sound like broken records when it comes to updating themes, but for good reason. Updating to the latest version ensures that you are working with the most refined version of the theme. Whether the latest version includes speed-specific enhancements or not, keeping up with the latest release is the best foundation for accelerating page speed.
Minimize your apps
Adding an app offered in the Shopify App Store is easier than ever before. Removing an app is not as simple a task, however, and leftover code changes can impact a store's performance. It is always advised to weigh the benefits and costs of an app before adding it to your dashboard.
Even if an app is deleted from the Apps dashboard, additional theme files or modifications may be left behind by the app. Consider this article's steps for cleaning up leftover code from 3rd-party apps.
Simplify above-the-fold content
'Above-the-fold' refers to the area immediately visible upon page load. This often includes the header (with logo, navigation, etc.) and content added for the page's introduction. Many themes include sophisticated features for this area, most notably slideshows, but with more features come more delay in the page's loading time.
Consider simplifying your above-the-fold content by disabling your slideshow and replacing it with other image-based sections, such as Image with text overlay. Alternatively, limiting the slideshow to a single slide can have a positive impact on page speed.
Each Pixel Union theme for Shopify includes lazy loading options, which load the content within view first to balance content and speed. Positioning fewer features to load in this initial viewpoint will increase page speed.
From our blog:
"Lazy-loaded images are images that load as needed. Images wait to load until they’re just about to be viewed, making initial loading speeds much quicker. So if you have a large collection of images near the bottom of your page, but a customer never scrolls down, the large collection of images will never load. "
Read more about lazy loadingTie up loose ends with your links
Avoid broken links (leading nowhere) and redirects (leading to one page, then another) as much as possible. These can impact a store's performance and customer experience.
Test your store's links manually to confirm their accuracy. Use tools like Online Broken Link Checker for this task.
Fine-tune your images
The Responsive Image system (RIMG for short) is an enhancement in all current Pixel Union Shopify themes. The RIMG system basically takes your largest available image and creates incremental sizes for different window or device widths. This helps to balance image quality with page speed.
For more information on RIMG, refer to this article: Using the Responsive Images system
More page speed resources
Get hands-on help from a Shopify Expert
If you need help with this effort, we recommend Storetasker.