Page speed is often relegated to an afterthought in marketing strategies.
When there are so many other pressing concerns – conversion optimization, content creation, information architecture, lead generation, etc. – why would anyone spend precious hours trying to trim seconds or milliseconds off their average page load time?
The answer to that rhetorical question is simple: according to research, a 1 second delay could affect conversion rate by as much as 7%.
If you have 10,000 visits per month, an average order value of $100 and a conversion rate of 1%, you’ll make $10,000 revenue per month.
If we stick a 1 second delay into the equation, your revenue could drop to $9,300 per month; and that’s assuming a 1 second delay, never mind the impact of delays of 2 or 3 seconds.
In fact, when Google performed a test on a sample size of 900,000 websites, it found the average mobile page takes 22 seconds to load.
Page speed shouldn’t be an afterthought; it should be a number one priority.
Then there’s the page speed ranking debate and mobile-first indexing. Google has recently stated (January 2018) that page speed will become a mobile ranking factor for prohibitively slow websites.
It has also been working on rolling out a mobile-first index, which means it will increasingly come to rely on the mobile version rather than the desktop version of a page when assigning rankings in search.
Google’s AMP and Facebook’s Instant Articles have also come to the fore in the last few years as potential solutions, however both have faced criticism from publishers eager to own the media they publish, maximize monetization and avoid diluting marketing and technical resource between multiple web properties.
AMP in particular is a viable, and increasingly popular, solution to improving page load time, however it’s not a panacea.
If publishers want better conversion rates and more engagement, they need to look to how they manage content and the technologies they utilize.
How to test page load speed
There are a number of ways to test page load speed.
Windows users using Chrome can simply hit ctrl + shift + I on their keyboard to bring up developer tools (other browsers also offer developer tools).
Click through to the ‘network’ tab then do a hard refresh (ctrl + f5) of the page to load all of the page’s assets (you can view the request and response headers by clicking on a URL and navigating to the headers tab).
Look at the bottom corner of the network tab for your page load speed (make sure you check the size column to ensure files aren’t being served from the browser’s cache).
It’s important to remember proximity can play a significant part in page load speed. The closer a user is to your server, the faster data will transfer (this is where a content delivery network comes in).
If you want to test page load speed across multiple locations then try Pingdom.
How you can improve page load speed
Image optimization is often the best way to improve page load speed.
In January 2018, according to HTTP Archive, images make up 51% of total page size. That’s a lot. The average total size of all images required to render a page is 1,808Kb (the average total size of a page and all linked-to assets is, according to HTTP Archive, 3,545Kb).
Reducing the size of an image is a balance between preserving quality and optimizing performance, however before you get started it’s important to know what you’re optimizing.
Raster images are made of pixels, while vector images are made up of paths. Vector images scale with the size of the viewport, raster images will typically pixelate when scaled upwards in size. Raster images have more of a ‘real feel’ and continuous tone.
JPEG, PNG and GIF images are raster images – JPEG is, on average, the most popular file format for serving photographs, while PNG is typically preferred for serving logos (it accepts transparency) or images that will be frequently edited.
When it comes to image compression, JPEG uses ‘lossy’ compression, which relies on permanently deleting data in the image to reduce its size (this means JPEGs can lose quality each time they’re saved). GIF and PNG on the other hand use lossless compression, which preserves the quality of the image even after its compressed.
The problem with GIFs is they’re limited to 256 colours (JPEGs and PNGs can store millions of colours). An advantage of GIF is that it accepts animation.
There are a number of approaches to optimizing image size, however a popular option is to use image editing software (Photoshop is a popular premium option, Gimp.org is a popular open source option).
When saving a JPEG, Photoshop will allow you to determine its output quality on a scale of 1 to 12 (alternatively you can use the “save for web” feature which allows a scale of 0 to 100); modifying the output quality can reduce an image size by hundreds of kBs.
Alternatively, WordPress users can install a plugin called imagify which will automatically optimize up to 25MB of images per month (it will also optimize all preexisting images).
A further advantage to WordPress is it utilizes srcset automatically (it will vary the image served dependent on the width of the viewport).
Enable HTTP/2 and free SSL
HTTP/2 is the first update to the HTTP protocol in nearly twenty years. One of the biggest advantages to HTTP/2 over HTTP/1.1 is that it introduces something called multiplexing.
If you want to see if your website is HTTP/2 enabled, as above simply go to the network tab in developer tools, perform a hard refresh and look for ‘h2’.
HTTP/1.1 is synchronous, which means, under HTTP/1.1, that files are delivered in the order they’re requested (we don’t have space to tell the whole story, however a way around this under HTTP/1.1 was for the browser to open numerous connections to a server).
With HTTP/2 a browser can make multiple requests over the same connection and the server can respond asynchronously, thus averting a common problem with HTTP/1.1 called head of line blocking (where subsequent requests can’t be made because of the size of the initial request).
For more information on HTTP/2 read this article from Google.
Some web hosts support HTTP/2, some don’t (it can require web server configuration), and fewer still refer to it on their websites (when they don’t).
While HTTPS isn’t an official requirement within the HTTP/2 specification, all major browsers require an HTTPS connection before they’ll transfer data across HTTP/2 (thus it’s a de facto requirement).
Some web hosts also offer free SSL, while others don’t. It’s worth contacting your web host to find out, or using a web hosting comparison tool if you want to compare providers.
Enable Gzip compression
When a browser requests a page it will send a header stipulating whether it will accept Gzip compression. If it does, the server will search for a file which has been compressed and, if it finds one, will serve it to the browser. The browser will then unzip the file.
Gzip can reduce filesizes by upwards of 70%. Dependent on your web host you may be able to implement Gzip in a single click via cPanel. Alternatively, contact your web host or search their help pages for information on amending your .htaccess file.
Minification involves removing redundant text from a file (eg. white space, comments or characters) which aren’t necessary for the file to function. After you minify a file a developer won’t be able to read it (it will still contain the same code but without indentation) – minification is only for production environments.
Minification will typically reduce a file size by about 10%. There are a number of tools you can use to minify files, eg JS Compress, however if you have WordPress you can also install W3 Total Cache (always make sure you preview any changes before deploying).
A slight problem with W3 Total Cache is that it’s quite complicated if you’ve never used it before. Minification can also potentially cause problems if poor coding practices have been applied.
The problem with page speed is it’s a never-ending topic and I feel we’ve barely scratched the surface. While looking at everything above, you’ve got a lot to be getting on with, once you’re done I highly recommend learning how to configure browser caching with HTTP headers as well as looking at content delivery networks.
On the latter point, one of the more popular options is CloudFlare – it’s a free ‘CDN’ which distributes a cached version of your page to hundreds of local servers. Your content will no longer be served from your web host’s IP address, but CloudFlare’s.
CloudFlare also offers ‘security scanning’ services to mitigate the threats posed from malicious traffic (eg before routing a request to one of their servers they’ll check to see whether a client’s IP address has been identified as malicious).
If you have any questions just drop them into the comments below, otherwise onwards and upwards to a speedier web!
Note: The opinions expressed in this article are the views of the author, and not necessarily the views of Caphyon, its staff, or its partners.