Nobody likes to wait, even online. E-commerce site speeds can make a huge difference in how your potential customers engage with your online store, or even if the stay long enough to see the great products and services you have to offer. To aid in that, we have put together these 7 quick and easy tips to help speed you your Shopify storefront.
If your Shopify storefront takes too long to load, customers will often leave the site.
Source: Google/SOASTA Research
As sites become more complex, so does the demand for high quality images, responsive design coding, colorful and engaging graphics, and more. Therefore, the balance between creating an engaging site that attracts your customer and one that loads fast enough so that your customer can start engaging is a tricky one.
Beyond the customer experience, site load speed is also becoming an increasingly important factor for search engine ranking algorithms, including Google.
According to Moz.com, Google has made it very clear that site speed (and/or page speed) is one of the key factors used by its SEO algorithm to determine the rank of key pages. In addition to that, slow pages take up more search engine crawler time, which means that search engines can crawl fewer pages, taking longer to crawl your entire site.
7 TIPS FOR SPEEDING UP YOUR SHOPIFY STORE
Although you may not be able to get your page down to the 1 – 3 second range because of complex graphics or videos, these tips will help make the most out what is on your page and get it displayed to your customer, and to search engines, faster and more efficiently.
#1 - MAKE SURE YOUR IMAGE FILES ARE THE RIGHT SIZE AND THE RIGHT FORMAT
Make sure that images are sized and compressed appropriately for where they are being displayed. Too often, I see a small logo – usually a couple of hundred pixels wide – being sourced to a high-res logo file that is thousands of pixels wide. Even though the site may show the smaller version, it still needs to load the full-size file and then resize it to fit where you put it. A smaller file, sized correctly, will load much faster.
The same goes for image file types. PNG files have more flexibility when it comes to creating interesting designs, but they tend to be large file sizes and therefore load slower.
Utilizing CDN (content delivery network) for your images can also help speed up file transfers. A CDN is a global network of servers that can optimize web performance by utilizing the closest available node to the user who is currently visiting your site, reducing the distance – and therefore the time – to deliver images and other assets.
Lastly, utilize lazy-loading of offscreen or hidden images. Lazy loading means that the site waits to load these elements until after all of the other critical resources have finished loading.
#2 - REMOVE UNNECESSARY SHOPIFY APPS
Shopify Apps are a great way to customize your store and your customer’s experience to meet your unique business needs. Instead of everybody getting the same out-of-the-box solution, each store owner can create a unique combination of theme + apps to make your store your very own.
However, these apps can take a toll on site load speed, so make sure you only add apps that are necessary for your site and your customers. And delete any deactivated apps so that they do not take up space within your Shopify configuration.
#3 - RUN A PAGE SPEED TEST ON YOUR SHOPIFY SITE
Page speed tests are a great way to identify potential areas of improvement in the load time of your pages.
You might wonder why this wasn’t the first item on the list, and perhaps it should be. However, these tools get very granular into specific areas of coding, style sheets, scripts, and more. That’s one of the reasons I like to focus on images and apps first, as those are easier concepts to tackle – even though they can be time consuming.
Free tools that you can use to check the speed health of your Shopify store (or any website for that matter), include:
- Google PageSpeed Insights: https://developers.google.com/speed/pagespeed/insights/
- Pingdom Website Speed Test: https://tools.pingdom.com/
Although the results of these speed tests can sometimes be overwhelming, especially for the Shopify novice, they are a great way to identify critical to-do items and track your progress towards creating a faster, better site.
#4 - PICK THE RIGHT THEME FOR SPEED AND RESPONSIVENESS
Each Shopify theme is different, and – as such – each will load at a different pace. Depending on your goal, a simplified, faster theme may work better for you and your customers than a really heavily coded theme that takes longer to render.
Plus, you want to make sure that any theme you pick is responsive so that it can render properly on a variety of devices and screen sizes.
#5 - REDUCE REDIRECTS AND REMOVE BROKEN LINKS
Redirects come in a variety of shapes and sizes. Some tell the world wide web that a page has moved from location A to location B, and only matter if someone tries to visit location A.
Others tell the wold wide web that a resource, such as a script or image file, has been moved. Redirects on images and resources add an extra layer of complexity to your sites loading process, and therefore slow down the site load speed.
Try to avoid these redirects as often as possible by checking the key links and elements on a page to make sure they are referenced correctly.
#6 - INSTALL GOOGLE TAG MANAGER TO ORGANIZE ALL OF YOUR TRACKING CODES
Tracking codes are an important part of understanding and refining your marketing efforts as well as your e-commerce design. They can range from overall analytics, to campaign trackers from paid programs including Google Adwords, Facebook Business Manager, affiliate programs, and more.
Each of these codes require coding to populate key information, including order and revenue details. By combining these codes into one tag manager, such as the Google Tag Manager, you can streamline this coding to have all of your codes in one place.
Plus, depending on the purpose of the code, you can determine the placement so that it loads at the appropriate time and place on the page.
#7 - UTILIZE AMP (ACCELERATED MOBILE PAGES) TO CREATE A FASTER VERSIONS OF YOUR SITE FOR MOBILE DEVICES
As the use of smartphones to browse and shop increases, as does the importance of having mobile optimized pages. AMP pages render a simplified version of your website that loads better and faster on mobile devices, increasing speed and usability.
Few things are more frustrating for a customer than trying to open a site on their mobile phone, only to have it hang for too long – until they give up and move on. I’ve watched this happen live when people I know attempt to open up a website, sit there looking at a blank screen for about 8 seconds, and then move on to something else.
8 seconds may not seem like that long, but you’d be amazed how quickly people will give up if your site takes too long to load. This is even more prevalent when browsing on mobile phones because it’s far too easy for them to get distracted by something else on their device or in the real world around them.
Also, more and more, search engines are looking at these AMP pages as a signal for both your mobile search ranking as well as your overall site ranking.
SHOPIFY SITE SPEED IS CRITICAL TO ECOMMERCE SUCCESS
There is an old saying – Time is Money. That applies as much, if not more so, in the Ecommerce space than it ever did in the traditional marketing world.
An extra second or two of page load time can cost your business thousands - if not hundreds of thousands - of dollars in lost revenue from customers who would have purchased from you if your site had loaded fast enough.
