pagefly.ioSlow sites are responsible for high bounce rates. Here’s how to speed up website load time, increase your conversion rate and get more sales.
I. How Speeding Up Load Time Can Bring 60% More Sales
We are living in a world where the faster the service, the better. Speed has become a killer – and most powerful weapon – for those thriving in business.
In eCommerce, your website response time is vital to success.
Pagespeed affects every business metric you care about. It can win sales in a blink of an eye, or turn visitors away quickly. According to wpengine, one-third of customers count speed as the most important factor on mobile websites.
Despite the different devices, customers on other devices enjoy speed as much as they do on mobile.
II. What Is Page Speed?
In short, page speed is a measurement of how fast the content on your page loads. It starts from the moment your browser receives the first byte of information from the webserver to the endpoint where the content of your page is fully displayed.
III. Why Is page Speed Performance So Crucial To Your eCommerce Business?
Traffic’s no good if it isn’t converting.
The loading time of your page plays a very important role in visitors’ experience. If you have a slow loading website, users are more likely to abandon the page which will drastically increase your bounce rates, and eventually, it will affect your conversions.
You would rather have a fast loading page than a complex page with lots of content. According to Hubspot, 1 second delay means a 7% reduction in conversions and 11% loss of page views. Overall, speed and hosting improvements can amplify your sales up to 60% compared to what you are having right now.
01. How Mozilla used speed to boost conversions
Still not convinced?
Mozilla observed that their landing pages for Firefox loaded much slower than the Chrome and Opera pages. After making it through hard work, they improved Firefox loading page speed by 2.2 seconds. These seconds increased download conversions by 15.4%, which means an additional 10.28 million downloads per year.
Ultimately, it would be best to have your page fully loaded in under 3 seconds. Speed has been shown to improve landing page downloads in many tests including Mozilla’s case. It also counts in other areas, such as Google’s search algorithm.
02. How to track page speed performance
Now that you are interested in the speed performance of your page, below are some trustworthy and easy-to-use tools to help you check your page speed. If the result shows up as green, it’s good to go.
- Google’s PageSpeed Insight: This tool measures the performance of web pages, assigns a Page Speed Score to evaluate how the page is performing on both mobile and desktop devices (ranging from 0-100, with 85+ is good), and suggests how to speed up the page. Additionally, you can install their extension if you are on Chrome (link), you can then check the speed of your page without going to the website.
- WebPage Test: This open-source tool will run speed tests from multiple locations across the world, across consumer connection speeds to provide rich insights including resource loading waterfall charts, page speed optimization checks, and suggestions for improvements.
- Google Analytics: Site Speed reports in Google Analytics offer insights into how quickly users are able to see and interact with content, as well as what the drop-off points are.
- Chrome DevTools: Chrome DevTool is a versatile real-time tool for evaluating your website’s performance right in the browser. You can simulate network and CPU speeds, examine network loading details and see how your site’s code is impacting your page.
- Mobile-Friendly Test: Designed specifically for mobile sites, this tool analyzes exactly how mobile-friendly the site is, and focuses on elements beyond speed as well.
IV. How To Speed Up Website And Reduce Load Times
01. Choose A Fast Responsive Theme
Themes generally refer to pre-build templates for designing web pages. Depending on your preferences, you should note that the theme that you’ll choose for your Shopify store will generally affect its loading time.
The fact here is, Shopify themes are meant to give your online store a basic layout that you can mold and style to your liking. Their skeletal framework primarily consists of Liquid codes like JavaScript and CSS that allow for customization, meaning that the addition of content, Shopify apps, and plugins will later influence the overall load speed performance of your Shopify sites.
In other words, lightweight Shopify themes for e-commerce stores generally have higher loading times than heavyweight options. By lightweight, I’m referring to themes that are well-coded and optimized for site speed.
Most themes that are both fast and responsive don’t feature many sliders, fancy decorations, and complicated navigation systems, as they affect page speed. To check if your most preferred Shopify theme will take minimal time to load, run its preview page URL through the Google PageSpeed Insights database. This will give you a detailed output of its load times on both desktop and mobile devices, coupled with other relevant suggestions on how you can improve page speed if you’ll end up using it.
For those who are pressed for time, we’ve comprehensively tested all of the current Shopify themes, and below are our top-performing theme suggestions for your Shopify store:
For speed optimization purposes, it would be best if you first ensure that your best pick is up to date before using it on your Shopify web pages. This will not only increase page loading performance but also optimize the user experience and amplify sales.
02. Optimize Image Loading Times
Images usually top the list of the most effective non-verbal means for online merchants to engage with site visitors directly. But the use of too many photos or large-sized images can drastically slow down your Shopify speed and cost your visitors more bandwidth to load.
Ideally, the addition of images to your page layout usually adds extra weight to it. If you are not keen enough, such poor image optimization practices can potentially put off your ready-to-buy buyers and prevent you from ranking top on search engines.
To ensure that you are using the proper image format, you must ensure that every image featured on your Shopify sites is compressed and optimized. Lucky for you, numerous image compression tools will help you reduce image sizes without compromising their quality.
To compress images without losing any crucial data, here are our top recommendations:
- Tiny PNG – a trustable online database for compressing both JPEG and PNG image formats of up to 5 MB for free
- Crush.Pics – a Shopify app that automatically compresses all existing images once installed for faster loading time
- Optimizilla – an online image optimization tool that allows for compression of up to 20 large images manually before uploading them to Shopify
- Compressor.io is another online image compressing tool for shrinking image files by up to 90% without pixel loss.
- Image Optimizer – available in the Shopify app market, Image Optimizer essentially speeds up Shopify and improves Google Image Search rankings by automatically minimizing image sizes.
Replacing GIFs with optimized static images and choosing to use hero images instead of sliders or carousels like in Campos Coffee should help cut down page load and quickly amplify page speed.
03. Optimize Web Fonts
Shopify’s Font Library ideally houses hundreds of fonts that commonly range from system fonts to licensed alternatives. Fonts usually play a fundamental role in Shopify website design, and we naturally tend to focus more on the type, variant, family, and style of the font we want to use.
Unfortunately, this focus on pleasing readers often deters the thought of its performance costs.
No matter your preferences, all fonts have weight, and choosing the wrong font can dramatically slow down your site’s loading time. This usually happens when you decide to use third-party fonts that need to be downloaded first.
Note that every font download results in additional files, which slows down page loading speed because the store pages are heavier. This automatically favors system fonts, but do not worry because we have a solution for optimizing web fonts for Shopify use.
Many online store owners tend to use Google Fonts more, so we will use them as our example. To help speed up your Shopify, you will need to preload your preferred web font first. To do this, you only have to add ‘&display=swap’ at the end of the font’s URL, just like we have done for Verdana Google Web Font:
Now, open the new link on your browser and use any of the src: url bracketed links to download the preloaded font variant of your choice. This way, you will be able to remove render-blocking scripts affiliated with your favorite, meaning that your pages will now load faster.
A quick performance report from Lighthouse should confirm and verify that you are using the preloaded font on your Shopify website. Otherwise, below are our best font recommendations for Shopify:
- Arial
- Calibri
- Verdana
- Open Sans
- Times New Roman
- Courier
- Helvetica
- Bookman
- Lato
- Impact
04. Optimize Front-end Code
Front-end code in Shopify practically refers to the use of a wide range of programming languages like JavaScript and CSS for a successful and direct end-user interaction. The objective of optimizing front-end code is to ensure that your content is easy to read, in an attractive format, and loads faster even on mobile devices.
The only problem is that adding coding resources in the form of scripts and apps usually comes with performance implications. To optimize front-end code and reduce loading time without losing functionality, we recommend that you consider migrating them to Google Tag Manager.
This way, you can asynchronously load and easily manage all of your front-end code resources from one place without having to edit the code. Furthermore, this tool automates rendering, integrates well with Shopify, and helps to load front-end resources faster on Shopify stores.
4.1. Convert Your Images To A Next-gen Format
Do JPEG 2000,d, and WebP image formats sound familiar to you? That’s right, it’s 2019 and these formats have superior compression and quality characteristics compared to their older JPEG and PNG counterparts. Encoding your images in these formats rather than JPEG or PNG means that they will load faster and consume less cellular data.
The difference between these images is barely noticed. WebP format is half the size of JPEG while having the same quality. How’s that for resource saving?
The only downside of these next-gen formats is browser support is not universal for them. Check out these links below to see the current browser support for each format.
If you insist on using traditional formats, below are some good old guidelines for you
| PNG | JPG | JPEG | |
| What it is | Lossless compression file format | Lossy compressed file format | Lossless compression file format |
| When to use | Common choice for file use on Web, when you need clear lines and crisp detail
|
Best option for photographs at a smaller size than a BMP | For photographs and realistic images |
| What to use |
|
|
|
- GIFs should only be used when you can optimize their size. It’s good etiquette to make GIF size as small as possible – no bigger than 1MB, with a dimension of less than 500 pixels across.
- No BMPS or TIFFs, please.
Tip: Instead of GIFs, considering embedding MP4 onto your page for faster load times. PageFly advanced page builder lets you drag and drop video elements onto your web page.
4.2. Minify Files
The best place to get started to reduce page load is to minimize HTML, CSS and JavaScript files. These files determine your site’s appearance – like the clothing and shoes that you wear – so it’s vital to run them through some quality filters.
Let’s start with reducing the size of each file and the total number of files. This task includes removing unnecessary formatting, whitespace and code.
- To minify CSS files, you can use CSS Minifier.
- To minify JavaScript files, you can use JavaScript Minifier.
- If you site runs on WordPress, plugins like WP Rocket can make the job simple.
JavaScript Minifier provides simple but efficient tool to reduce your file size with no coding needed.
4.3. Enable Compression
Gzip is a file format and software application that essentially locates strings of similar code in your text files, then temporarily replaces them to make the files smaller. Compressing files is one of the easiest ways to reduce load times, and today, enabling compression with Gzip is considered standard practice. This works well with CSS and HTML, because these files typically have repeated code and whitespace.
Most web servers can compress files in Gzip format before sending them for download. According to Yahoo, this can reduce download time by about 70%.
If you’re not sure if your site has Gzip enabled, use checkgzipcompression.com by entering your site’s URL, and if you have Gzip enabled, you’ll see something like this:
If you have a static HTML site, however, you’ll need to enable Gzip in your .htaccess file. The exact code you need depends on your server but if your site runs on Apache, for example, it looks like this:
For NGINX servers, you can check this code.
4.4. Eliminate Render-blocking Resources
The most common render-blocking resources are JavaScript and CSS files that are located in the head of your web page. They load in above-the-fold area (or the area that you normally see on a website before scrolling down to see the rest of the content) and they are a part of the critical rendering path used by a web browser.
There are 2 ways to fix render-blocking CSS & JS issues by using asynchronous loading:
Method 1: Optimize CSS delivery
- Your CSS file should be linked to your HTML file like this:
<link rel=”style.css” href=“style.css”> instead of relying on using the @import method.
- Why not using the @import method?
- The @import method usually lies near on top of your regular stylesheet, which causes the browser to go back and find the imported file before it can read the rest of the CSS file, resulting in a huge delay. You want to avoid this delay as much as possible, so linking the CSS
- So avoid including CSS in HTML code (like in divs or your headings) like in the inline CSS pictured above. You’ll get cleaner code if you put all of your CSS in your external stylesheet.
Method 2: Optimize JavaScript delivery
- You can add either the “defer” or the “async” attribute to the script HTML elements that call JavaScript resources.
- Why adding the “defer” or the “async” attribute?
- The defer attribute tells the browser to hold off on downloading the resource until HTML elements are loaded. Once the browser has finished with the HTML it will then download and render all deferred scripts in the order in which they appear in the document. If you defer larger files, like JavaScript, you ensure that the rest of your content can load without a delay.
- The async attribute tells the browser to start downloading the resource right away without slowing down HTML parsing. Once the resource is available, HTML parsing is paused so the resource can be loaded. You can remember “async” as “download at the same time”.
- How to add the “defer” or the “async” attribute?
- You would want to open the file that contains CSS and JavaScript (usually, it’s the theme.liquid file), find the line starting with <script src=”//
- Then, add defer=”defer” or async=”async” to right after <script and right before src=”//
- You can use both defer and async attributes in a file, no matter which one comes first.
- Last but not least, always put JavaScript codes at the bottom of an HTML file.
- You want to place a call an external JavaScript file just before the </body> tag, which looks something like this
You can check out this tutorial on defer loading JavaScript if you’re up for it right now.
4.5. Minimize Time to First Byte
Besides the amount of time it takes for your page to fully load, you’ll also want to look at the amount of time it takes to start loading. Time to first byte, or TTFB, is the amount of time a browser has to wait before getting its first byte of data from the server. Google recommends a TTFB of less than 200 ms.
Unlike a lot of the front-end performance factors most site owners focus on, this is a server-side concern. You can see how long this process takes for your site using either Chrome’s Developer Tools or a third-party tool (WebPage Test, for example).
It’s important to remember that response time can be affected by your Internet connection. So the slower your own connection, the slower your server response will appear.
In general, most issues with slow TTFB are caused by either network issues, dynamic content creation, web server configuration, and traffic. You can minimize time to first byte by reducing the number of CSS files in the critical path.
If at all possible, combine all the different CSS and JavaScript files into one and remove the call to those files from your HTML. You can follow the 3-step guide below to combine your CSS and JavaScript files into one in your Shopify store back-end.
First, access your Shopify Theme, choose Edit code, scroll to Assets folder and select Add a new asset.
Second, you would want to give this a simple name (we choose “combined” to say what it does) and choose “.js.liquid” as file type. Hit Add asset. This file will carry all CSS and JavaScript codes from other files to reduce the loading time.
Third, open all other files belong to type “.js.liquid”, copy their codes and paste onto the “combined.js.liquid” file that you just created. Notice that you must paste them in the order that they appear in your assets folder.
Once you’re done combining all the files into one, you can delete them and only keep the combined file. Remember to visit important theme files that used to call those “.js.liquid” files and replace them with “combined.js.liquid”. Et voila!
Once you’re done, you can check the code by select right-click and choose “View Page Source” (we exampled with Unsplash – let’s see how they handle their code).
This may look intimidating, but it’s the sweet result that you want to have with your site too. When a screen of continuous plain code shows up like Unsplash has, you’re in a good place. All of your files have been minified and combined into one.
It’s intimidating to look at, but sweet to have.
You can use any free third-party tools like WebPage Test to test your site from a data center.
4.6. Defer unused CSS
The front-end code in Shopify essentially includes programming languages designed to give your visitors an easy time navigating and interacting with your Shopify website. While it is common for online merchants to focus more on user experience, front-end code adds additional programming files that might slow loading speed.
In terms of web performance, HTTP Archive documents that an average web page makes at least 7 Stylesheets requests, requires a 60 KB download, and takes up to 18 seconds for it to load on a mobile device.
Considering that a typical web page with images and videos weighs up to 2,100 KB on average, keeping your CSS files in check should significantly reduce the number of bytes that your visitor’s browser needs to download and render when loading your online store.
To do so, you will first need to check for unused CSS files and defer them. Keeping in mind that shared media contributes to up to 78% of your page load, it would be best if you begin by lazy loading them.
Once you’ve optimized your store with lazy load images and videos, you can use Shopify apps such as Plug in Speed to detect and defer or minify any unused CSS to a later time when needed. This action reduces unnecessary page load like unused stylesheet rules, making the website more lightweight and easier to load.
4.7. Reduce External Scripts And The Number of Plugins on your site
It’s worth noting that the system running your store can greatly influence the load time and Javascript timer.
If you’re running a Shopify store, chances are you are using tons of apps to design the store, run marketing promotions, create effects, etc. They make your life easier (and richer), plus extremely easy to install. Unfortunately, the number of apps that you install makes a remarkable impact on site speed. The more apps you have, the slower the pages become, due to tons of Javascript code embedded in them. Even if you don’t have many apps, it’s a good idea to evaluate the ones you have installed on a regular basis
So stay informed and selective when it comes to installing apps. Deleting any that are unnecessary can improve the overall speed and make maintenance easier in the long run. If you want to be extra-cautious and data-driven, you can run a selective sped test to check how each app is affecting your site. This can be a tedious process, but can show you the difference each one makes.
05. Optimize back-end codes
5.1. Minimize HTTP requests
An HTTP request is made when different parts of the page (images, stylesheets, scripts) being downloaded. The more on-page elements and styles, the longer it takes for the page to “read” the script (aka, to render). The first step to minimize the requests is to figure out how many that your site makes, to use as a point of reference.
If you use Google Chrome browser, you can use the browser’s Developer Tools to see how many HTTP requests your site makes.
Right-click on a space in the page you want to analyze, then choose “Inspect”, and click the “Network” tab. The “Name” column shows all of the files on the page, the “Size” column shows the size of each file, and the “Time” column shows how long it takes to load each file.
In the bottom left corner, you’ll also see the number of total requests the site makes. Reducing this number of requests will speed up your site, look through your files and see if any are unnecessary.
5.2. Use a CDN
Beyond the server that hosts your site (Shopify server), you can also use other networks of servers to decrease load times for your visitors. With a CDN (Content Delivery Network), you cache your site on a global network of servers. When a visitor’s browser caching requests files from your site (loading certain page, image or data in general), that request is routed to the closest server.
The content that user receives is identical, but can load much faster than it would if their browser were making requests to a server that was geographically far away. This eliminates loading lags and latency issues that users located far from hosting servers sometimes experience. In one experiment, VentureHarbor reported decreases in load time ranging from 20-51%.
If you want to start using a CDN, check out MaxCDN and Cloudflare. MaxCDN is a full CDN, meaning that it only offers CDN services. They have more data centers and focus solely on improving load times. Cloudflare, on the other hand, combines CDN service with security and optimization features.
The one you choose depends on whether you want those extra features, or just want to focus on improving speed. Generally speaking, using CDN is a fairly premium option that only huge brand opt for, so don’t push yourself if you are not ready for this.
Another option is to use Shopify Files as it is a CDN. It can be found in Settings on your Shopify Admin.
06. Reduce redirects
Redirects are mainly designed to revamp user experience by directing visitors to a more relevant live page away from dead or broken links. Unfortunately, each redirect adds latency and increases page overhead, causing delays in page load time.
What happens is that browsers have to make additional requests to the webserver before fetching the redirected page. These other round trips commonly result in higher load times than usual. Just like broken links, having redundant redirects in your Shopify store will hurt your overall page speed.
To help you minimize both redirects and broken links, you must consider creating redirects for dead page links only. Register and scan your Shopify store using the Google Webmaster Tool to find all broken links and use the URL Redirect function in your store admin panel to create working redirects.
07. Don’t forget Google Indexing after
To ensure Google crawls your page and recognizes the changes you’ve made, request indexing using Google Search Console for your website. The sooner Google indexes your site, the better. Speeding up your website may help your Search Engine Result Pages (SERPs).
08. Get Better Speed with PageFly
Shopify speed optimization is one of the main factors that directly influence user experience and customer retention, further determining conversions and sales. However, optimizing Shopify speed is commonly technical, and many Shopify store owners often find it challenging.
Well, this should not be the case anymore because PageFly is uniquely offering you a simple yet comprehensive one-click solution to all of your loading speed problems.
The PageFly app is fully optimized and designed to provide you with fast-loading codes and images consistently. All its JavaScript and CSS code files are already minified, and it features a unique Lazy Load option for optimizing page loading speed. If you want to get better Shopify speeds, add and activate the PageFly app in your store now.
That’s all, folks!
If you’re new to optimizing your website speed, take time to learn and practice. While you may have to hire a website developer or a designer to help speed up your site, you’ll probably earn that money back real fast.
Most of these tips can be applied whether you use Wix, Magento, WordPress, eBay, Joomla or WooCommerce to run your website. But of course, as Shopify conversion rate specialists, we prefer this platform.
Instead of paying for a developer to optimize your page speed, do it yourself with our fast loading, pre-optimized Shopify page templates at PageFly.io.
Godspeed!
Previous chapter
