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
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, as seen in the Superstore Beauty Demo.
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 loading
Tie 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. You can also 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
That being said, merchants could determine their own maximum dimensions for their largest images. For example, consider setting dimension caps for your product images based on the desktop view of the image. If you're using the Natural image aspect ratio option for Empire's product page, the container's largest width is 669px, so considering Retina display, we could confidently use an image that is double this (1338px) without reaching the platform recommendation (2049px).
Image zoom requires product image widths above 1600px, so keep this in mind if this sort of feature is important for your store. If close-up imagery is not a selling point for your products, consider disabling the feature for better performance.