Why Page Load Times Decide Sales and Rankings

Page load time is one of the few store settings that affects revenue and rankings at the same time: slow pages lose shoppers before the product is visible, and search engines treat loading behaviour as a ranking signal. On Shopify the biggest wins usually come from three places, images, third-party apps and scripts, and the theme itself.

This article walks through the network and code side first, then the theme side, with the settings and tools that apply specifically to Shopify.

1. Network and Code Optimization

Use a Delivery Network (CDN)

The built-in CDN from Shopify can be activated from the “Settings” portion of the admin dashboard. This feature allows for the files on your website to be delivered from a server that is geographically closest to your customers,resulting in faster page load times.

Compress images

Images that are large in size can cause slow loading times for your store, which can negatively impact its performance. To overcome this, apps such as Crush.pics or TinyIMG from the Shopify App Store can be used to compress your images.

Optimize code and eliminate unnecessary scripts

GTmetrix and Google PageSpeed Insights are tools that can be used to discover and resolve problems like render-blocking resources and code bloat. Additionally, Shopify has a built-in option for minifying and merging scripts and stylesheets that can be activated from “Online Store > Themes > Actions > Edit Code” in the admin panel.

Minimize redirects and broken links

Redirects and broken links slow down page loading. Use tools like Google Search Console to locate and fix these issues. Broken links caused by incorrect URLs can be resolved in the “Online Store > Navigation” section of your admin panel.

Use a good hosting service

To ensure your website performs well, it is essential to have a hosting service that offers fast and dependable performance. Shopify offers multiple plans that can meet your requirements, including dedicated server and VPS (Virtual Private Server) options. These options ensure that your website has the necessary resources to handle heavy traffic

Utilize caching

Shopify already has caching enabled for common elements such as products and collections. However, you can also use third-party apps such as Shopify Turbo from the App Store to enable caching for other parts of your store.

Optimize theme

Ensure that your theme is optimized for speed and performance. This can include customizing the theme’s code or switching to a theme that is more lightweight.

2. Theme Optimization

The theme you choose plays a critical role in optimizing the page load times of your Shopify store. A theme that is not optimized can significantly slow down your site, even if you have implemented other performance optimization techniques. Consider the following when choosing or optimizing a theme for your Shopify store:

Use a lightweight theme

Choosing a theme that is heavy with features and animations may look visually pleasing, but it can negatively impact the loading speed of your site. Opt for a theme that is lightweight and optimized for speed and performance.

Check code quality

The codebase of a theme can greatly impact its performance. Before installing a theme or hiring a developer, ensure to check the quality of the code if possible.

Test for mobile performance

Many themes may be optimized for desktop devices but may not perform well on mobile devices, which is increasingly becoming an important factor as more and more people access the internet through their mobile devices (60%-80%). To ensure the theme’s performance on mobile devices, use tools such as Google’s PageSpeed Insights to check the theme’s performance on different mobile devices.

Be selective with apps

Be selective in the use of apps, as some slow down your site through poorly loading CDNs. To avoid this, load JavaScript asynchronously, and when uninstalling an app check the theme.liquid file for any remnants of its code and remove them.

Optimize images

Use JPG images instead of PNG and make sure the images are the appropriate size and optimized by compressing them. A good tool for this is Bulk Product Edit by Hextom, available in the Shopify App Store. Use the developer tools in Chrome to check how large images are actually rendered, so you can determine the optimal upload size for your images.

Asynchronous Loading of JavaScript in the Header

JavaScript loaded in the header without the async attribute can block the rendering of the rest of the HTML, leading to poor performance. To fix this, add the async attribute to the JavaScript file in the header.

Context-Specific Loading of JavaScript in the theme.liquid File

To enhance the performance of your theme, load JavaScript only when it is required. Instead of loading every JavaScript file on every page, you can use the following approaches.

Preload the first Product Image on the Product Detail Page (PDP)

Preloading the initial image on the PDP can decrease the time it takes forthe image to appear, enhancing the user experience.

Minify CSS and JavaScript

To improve page load times, minify your CSS files to decrease their size.

Combine CSS and JavaScript

Merging your CSS and JavaScript files can also decrease their file size and improve page load times.

Use Lazyload

Lazyload is a technique that defers the loading of images until they are required, which can decrease the number of HTTP requests and enhance page load times.

Avoid redirection chains

Reducing the number ofredirects by fixing broken links and eliminating unnecessary redirects can also help to minimize the time added to the page load.

3. Conclusion

In summary, optimizing your Shopify store for faster page load times can significantly improve the user experience and your search engine rankings. To achieve this, be mindful of the apps you use, optimize images, load JavaScript asynchronously, contextually load JavaScript in the theme.liquid file, preload the initial image on the Product Detail Page, minimize CSS, combine CSS and JavaScript, implement Lazyload and avoid redirect chains. Keep in mind that website performance optimization is a continuous process, and it is essential to frequently monitor and test your store’s performance.

Key takeaways

  • Compress images and serve them at the size they are displayed at, this is usually the largest single win.
  • Audit installed apps regularly and remove leftover code from theme.liquid after uninstalling.
  • Load third-party JavaScript asynchronously and only on the templates that need it.
  • Pick a lightweight theme, then measure again after every app you add.

Read next: Shopify SEO: tips, tools and techniques, tools for managing a Shopify store, or our theme development services if the theme itself is the bottleneck.

Click here to start selling online now

Get in Touch - Get started with custom eCommerce solutions for your Shopify store

Unlock the full potential of your online store with our expert Shopify apps and services. Contact us today.
Contact Us

Lars Henning

  • 42 ARTICLES
  • 42 ARTICLES