5 Tips to optimize page speed for Shopify stores

Posted by Hilda Wandawa on

5 Tips to optimize page speed for Shopify stores

Humans are inherently impatient beings, so much so that we’ve gone as far as labeling patience as a virtue, something to strive for as it is not easily obtained. This has only been made worse as consumers shifted to the digital realm. In fact, the human attention span has decreased by 12 seconds since 2000 and continues to decrease by 88% each year. Technology and the instant connectivity it has birthed have ultimately rewired our brains.

So how can Shopify merchants cling on to the ever impatient digital consumer? Optimizing the page speed of your store is sure to be a direct hit on a dwindling attention span.

Speed optimization quite simply involves tweaking online elements in a way that results in faster loading times. It is also useful to take note of the difference between page speed optimization and site speed optimization.

Site speed refers to the speed at which your site loads as the customer moves through various paths. Site speed is therefore gauged by forming an average from a few sample pages on a website. 

Page speed, on the other hand, focuses on the length of time it takes for content to load on a particular page. When you optimize the page speed of your Shopify store, you are reigning in on specific attributes that will decrease each page’s loading time.

Why Should I Optimize Page Speed?

As page speed optimization involves a more targeted response, you are ensuring that whichever page the user is accessing in your store, is loading content as fast as possible.

Page speed is also becoming a growing concern for both consumers and eCommerce merchants. 

Almost 70% of consumers confess that page speed influences their likelihood of making a purchase or even returning to a site should this speed be lower than expected. This shows that time really is money for eCommerce merchants! 

So just how fast do consumers expect pages to load? Pretty fast as 47% of consumers expect web pages to load in 2 seconds or less. This could be seen as a tough hurdle to overcome as even the top online retailers are falling slightly short of this expectation with an average of 3.88 seconds to load. 

top retailers page speed optimization
Even top retailers are falling short of the exceptionally high page speed consumers expect. (Source: Digital Commerce 360

The average eCommerce retailer however should not be deterred by this seemingly difficult hurdle. Even small improvements in page speed result in positive benefits. Research from Deloitte found that a 0.1-second decrease in loading times led to an 8.4% increase in conversions with retail consumers spending almost 10% more on purchases.

In addition to satisfying consumer expectations, page speed optimization also goes a long way in improving your store’s SEO ranking. Google uses page speed as a factor in determining the website ranking on its search engine in response to this consumer concern. With Google being the king of search, it is vital for eCommerce merchants to take this into account when forming their SEO strategy.

As well as being a ranking factor for Google algorithm, page speed may also indirectly affect your ranking position through bounce rates. 

Bounce rate is the percentage of visitors who leave a webpage without making any actions, such as clicking on a link. Bearing in mind the short amount of time that people expect a page to load, if your page speed is low, your bounce rate will increase as a result. It is important to note that Google does not use bounce rate to determine rankings. However, a study which analyzed 11.8 million Google search results closely correlated bounce rate with first page Google rankings.

bounce rate affects google ranking
Backlinko’s study seems to suggest a link between bounce rate and a site’s positioning on Google search.

So now you can see the benefits of optimizing your web pages for speed, it’s time to take a look into how this can be achieved with some practical tips you can start implementing now.

Tips to Optimize Page Speed on your Shopify Store

Limit images and videos

Rich visual content is key when it comes to showcasing your inventory to digital consumers. It lifts the barrier of consumers being unable to use all their senses to assess products online. However, large images and videos directly impact the speed at which pages load on your Shopify store. The larger these files are, the longer it will take for your pages to load. 

Whilst Shopify does automatically compress the images you upload, there are a few factors you should consider to further ensure that your images are not ruining your page speed.  

  • Image file type: your best option for images on Shopify is JPEG as they provide the best quality at smaller file sizes. PNGs will degrade in quality as they are compressed, leading to lackluster images. Additionally, PNGs are much larger in size in comparison to its JPEG counterpart.
image file quality affects page speed
Here we can see that the color remains the most vivid in the JPEG format when this image is reduced to a tiny 24kb. (Source: Shopify Blog
  • Decorative images: these are any images which are not product related like background images, buttons and borders. Try to keep the size of the files to a minimum that won’t greatly affect their quality.
  • The purpose of your images: whilst images do make your site look beautiful, do make sure all of them serve an explicit purpose. If it is not to showcase a product or convey your brand, you are better off not including them.

You may be surprised to learn that in 2018, the average web page size inflated to twice the size they were three years prior. One of the main culprits of this ballooning size is the use of videos. This is a highly visible trend in the retail sector. A recent analysis by Digital Commerce 360 unveils that 42% of merchants in their Top 1000 database incorporated video in at least one location on their eCommerce site. 

optimize page speed on shopify
ASOS includes a video on almost all of their product pages, allowing visitors to better visualize the fit of their clothes. These videos do not compromise page speed as they only load once the user has clicked play.

The video trend in eCommerce is in line with the media consumption habits found in modern life. 

Digital video platforms like YouTube, TikTok and Twitch have skyrocketed in popularity. YouTube boasts 2.3 billion users worldwide, TikTok broke borders to become the most downloaded app in 2020 and now has 689 million users worldwide (that jumps to over 1.2 billion once you factor in Chinese users), and the video game live streaming platform Twitch racked up 2 billion hours of views in February 2021 alone. This shows that there is a clear shift towards video content as a vital media source, with tech experts like Facebook’s Mark Zuckerburg hypothesizing that “the majority of content we consume will be video” all the way back in 2016. 

The thirst for video spills over into the eCommerce world for consumers also, not just in entertainment. Research from eMarketer unveiled that consumers of all ages expect to see videos on a product page.

emarketer survey result about demanding for video

eMarketer’s survey of digital consumers shows that they all expect to see at least two videos for a single product on an eCommerce site.

Despite being a great tool in visualizing products' fit and usage, videos are essentially a large collection of images plus audio, so you can imagine just how drastically this could decelerate page speed.

How do you overcome this conundrum? There is a way to include video without compromising page speed too much: video embedding with lazy loading. Video embedding involves hosting videos via an external platform, such as YouTube. It uses an embed code to insert the video onto your product pages, so you have to first upload your video on a platform and retrieve the embed code.

get video embedding code for page speed optimization

Now that you have the embed code, head on over to Products from your Shopify admin. Select a product to view its details page, here you’ll see the option to embed a video. This is where you’ll be able to paste the embed code.

insert video embedding code on shopify product page

Let’s move on to the second step, lazy loading. Lazy loading ensures that certain assets only load when it is visible or clicked on by the user. When we apply this to video, a thumbnail is shown until playback is initiated or required. 

Lazysizes.js can be found in most Shopify themes, head here for a detailed guide on how to implement lazy loading to your videos and images.

When you combine these two methods,  your pages are optimized for speed. Hosting frees up server space and less content needs to be rendered on the page with lazy loading.

Limit App Use

Apps are great, they can strengthen your store with an array of capabilities and new ones seem to be released constantly. Hence, it’s easy to get carried away and install apps to equip your store with all the latest functions. However, they can have a great impact on your page speed.

Even when out of use, the Javascript/CSS files still run in the background, increasing loading times. It is therefore useful to go through your store and take a look at the apps you have installed, removing the ones that have not been useful. If you are a long time Shopify user, there may even be some you have completely forgotten about! Try to make a habit out of this by regularly sifting through your app arsenal and deleting any redundant apps.

You can also opt to use apps that serve multiple functions as a simple way to limit app use without limiting your store's capabilities. One example of such an app is Boost’s Product Filter and Search. This app gives Shopify merchants the ability to have an advanced product filter based on limitless attributes, alongside smart search and instant search capabilities all in one neat package.

Use AMP 

eCommerce accessed through mobile devices is soaring. Since 2015, the proportion of mobile commerce  sales has more than doubled with 55% of all time spent on online retail coming from such devices. This stresses the importance of having a focus on mCommerce when considering page speed optimization. 

Mobile devices, like tablets and smartphones, have a much smaller screen size and lower processing capabilities. Web pages designed only for desktop will not naturally perform well, particularly when it comes to loading times. A sure-fire way to overcome this obstacle is by making use of Accelerated Mobile Pages (AMP).

The AMP framework was created by Google to standardize web pages accessed via mobile devices so that they load instantly and elegantly. AMPs prioritize only the most performant design elements, restrict heavy JavaScript, and use cached content so that pages load at lightning speed. 

guardian amp usage for page speed optimization
The Guardian incorporated AMP from the very moment Google released this handy framework. 
amp usage in guardian site
Once clicked on, visitors can browse through a number of news articles that load at speeds so fast that it feels like the pages exist natively. (Source: The Guardian

Fortunately, Shopify has made adopting an AMP framework a breeze! Apps such as Fire AMP and Rocket AMP are available in the Shopify App Store and will transform your pages with just one click.

Minification

Minification is one of the main methods used to reduce load times and bandwidth usage on websites. It refers to the reduction of the code and markup in your web pages and script file. This would involve removing any redundant data such as unused code, clearing code comments and formatting, and using shorter variable and function names. 

If you are comfortable with diving into the code of your Shopify Store you can use tools like CSS Nano. When added to your build process, it compresses identifiers, purges unnecessary definitions and clears extra characters. UglifyJS is another popular minifier for the JavaScript of your theme, it reduces local variables’ names to single letters, and removes unreachable code. 

If this sounds a little too intimidating, or beyond your understanding of coding, apps such as File Optimizer and HyperSpeed contain processes for automatically minifying CSS and JavaScript files.

Reduce redirects and get rid of broken links

Redirects can be extremely useful in letting visitors view the most up-to-date iterations of your web pages. Should they try to access a web page that has been moved to a new location, need to view the site's mobile version or a country-specific version, redirects ensure that they are taken to the correct page instantaneously. However, each redirect adds latency to the overall page load time, hence, too many redirects lead to a higher page overhead.

This does not mean you should completely abandon redirects. They are great for the customer experience and optimizes SEO, you just need to implement them wisely.

  • Avoid unnecessary redirects: only use redirects where they are essential. For example, if your store has a responsive design (in that it will adapt itself to mobile devices) there is no need for you to have a redirect set up to view the mobile webpage.
  • Clean up your redirects: go through all your redirects and verify all the ones you have set up. Get rid of any old redirects, unless they have high referral traffic.

Moving on to broken links, not only do they negatively affect the customer experience, it can also slow your pages down as they waste resources, becoming a drain on bandwidth. You can use  Google Search Console to identify all your broken links. This free tool will crawl through errors to provide a list of all links that result in a 404 error. Once these are identified, head back to your Shopify account to manually delete the links.

Final Thoughts

Digital consumers are growingly impatient, desiring access to online products and services in an instant. A delay of response to this demand on your Shopify store is sure to have your potential customers running to the next best thing. Fortunately, page speed is very much controllable. By taking some, or even better, all of these actions, you’ll find your visitors on your site for longer, ready to take the leap to a purchase.