Chapter 9 Page Speed Optimization Best Practices For Your Website

How to Speed Up Website and Optimize Page Load Time To Win Sales In 2020

Slow sites are responsible for high bounce rates. Here’s how to speed up website load time, increase your conversion rate and get more sales.

conversion-talks-9-improve-pagespeed

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.

II. Why is page speed performance so important 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 pageviews. 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.

III. How to speed up website and reduce load times

01. Optimize image loading times

In case you are unfamiliar with “image optimization”, it’s a process of delivering the high-quality images in the right format, dimension, size and resolution while keeping the smallest possible size. Optimized images load faster and consume less cellular data. We recommend these two image optimizers with specific combination of settings.

For MacOS, you can download and use ImageOptim. Here’s how to set up the tool.

  • General tab
    pagespeed-optimization-1
  • Quality tab
    pagespeed-optimization-2

On Window OS, PNGGaunlet comes in handy. 

  • General tab
    pagespeed-optimization-3
  • PNGOUT tab
    pagespeed-optimization-4
  • OptiPNG tab
    pagespeed-optimization-5
  • DeflOPT tab
    pagespeed-optimization-6

If you don’t want to download the application, online tools such as Shopify Online Image Resizer, tinypng.com or imagecompressor.com work fairly awesome.

02. Optimize front-end code

2.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.

pagespeed-optimization-7

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
  • Line drawings
  • Line art
  • Text-heavy images
  • Image with few colors
  • Iconic graphics at small file size
  • Compressed photographs
  • Photographs
  • Realistic images
  • 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 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. 

2.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.

pagespeed-optimization-8

JavaScript Minifier provides simple but efficient tool to reduce your file size with no coding needed.

2.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:

pagespeed-optimization-9

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:

pagespeed-optimization

For NGINX servers, you can check this code.

2.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:

  • 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.
  • 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 attribute in a file, no matter which one comes first.

pagespeed-optimization-11

    • 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

pagespeed-optimization-12

You can check out this tutorial on defer loading JavaScript if you’re up for it right now.

2.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.

pagespeed-optimization-13

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.

pagespeed-optimization-14

Third, open all other files belong to type “.js.liquid” (in our example, they are “theme.js.liquid” and “vendors.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. In our case, “theme.js.liquid” appear above “vendors.js.liquid” so we copy and paste its code into the file first. 

pagespeed-optimization-15

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).

pagespeed-optimization-16

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.

pagespeed-optimization-17

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.

pagespeed-optimization-18

2.6. Defer unused CSS 

To defer unused CSS, you can remove unused rules from stylesheets to reduce unnecessary bytes consumed by network activity.

Prioritize above-the-fold content (lazy loading)

Sometimes, you can improve user experience by having your above the fold (top of the page) load faster — even if the rest of the page takes a few seconds to load. This is called lazy loading and particularly helpful for pages with lots of content below the fold.

 With this way, visitor doesn’t have to wait to access the page, and the images will load as they come into view, meaning significantly reduced load times on posts with tons of images.

Below are some suggestions that you can consider.

Lazy Load is a simple plugin that uses jQuery.sonar to only load images when they are visible in a user’s browser. All you need to do is download and activate it. Then, the plugin will automatically detect when an image is visible for a user, and load it.

pagespeed-optimization-19

Another one is BJ Lazy Load. Feel free to check them out carefully before running it on your store. 

2.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.

03. Optimize back-end codes

3.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.

pagespeed-optimization-20

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.

3.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.

pagespeed-optimization-21

04. Reduce redirects

If you are using URL redirects of Shopify, you might want to consider a different approach like sending your visitor directly to a desired URL instead. Each time a page redirects to another page, your visitor faces additional time waiting for the HTTP request-response cycle to complete. 

For example, if your mobile redirect pattern looks like this: “example.com -> www.example.com -> m.example.com -> m.example.com/home,” each of those two additional redirects makes your page load slower.

05. 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 (SERP’s).

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!

Try out all PageFly features with Free plan

.myshopify.com
Don’t have Shopify store yet? Create store
×