- by Mike
Nothing has a greater impact on website conversion rates than page speed. It's estimated that a one-second delay in page response can lead to a 7% reduction in conversions, and as page speed is also a ranking factor in Google's algorithm a slow website can impact your rankings too. It therefore stands to reason that if you want to get more traffic to your site and convert more of those visitors into customers, you need to get your pages loading as quickly as possible.
Thankfully there are numerous ways to improve the speed of your site, some of which are detailed below.
Make sure your images are the correct size for the space they are designed for. Media plays such a large part of modern websites, so it is key that they are the correct size for the area they take up on the page. For example, photos taken on a standard 10MB Camera will have a pixel size of around 3500x2300. To get some perspective, this is around three times the size of most screen resolutions. It is therefore key to ensure that each image is reduced in size for the area it will occupy on the page. We have covered how to do this in both Adobe Photoshop and Pixlr.
Once you are happy the images are the correct size, it is equally important to ensure they are fully optimised. This can be accomplished by a number of online services including TinyPNG, and Optimizilla. These tools further shrink the file size of images whilst maintaining the quality of the original. As a general rule, an optimised image is often around 50% smaller in terms of file size than it’s original. Depending on how image heavy the site is, this may have a major effect on overall page weight, and therefore on page speed.
Make sure CSS and JS files are compressed. Compressing these files essentially strips all whitespace from the file. This produces a far smaller file size that will load quicker. The browser is able to read the compressed file without any additional overhead, so it really is a must.
Ensure content is sent from the server utilizing GZip compression. GZip compresses files served up by the web server, the result is smaller files that can be downloaded quicker, resulting in a faster loading site. GZipped files are around 50 - 70% smaller than the original file. You should be beginning to see a common thread here, size is important! Trying to keep your file sizes as small as possible is an important part of your server configuration that should not be ignored.
Serve images directly from server
Ensure static files such as images and CSS files are served directly from the server (with an expiry delay) and not a framework. This will ensure that the visitor’s browsers cache them, which will in turn cause fewer requests to the server.
Use of Sprite images
Use sprite images when appropriate. Sprite images are multiple images combined in one file, where you use your CSS to designate what part of the image file is to be displayed. Once again, this is helpful in reducing the number of server requests that are necessary to load the given page.
Avoid CSS frameworks
Instead, for simple websites, create bespoke styles. Frameworks are incredibly useful, but they can contain a lot of potentially unnecessary code, which in smaller sites will just bloat the codebase and cause the site to load slower than it could.
Prioritise the order of assets on the page
Prioritise loading images that are above the fold first (area of the screen immediately visible without the need to scroll). This means that only the images that the browser will immediately display, will be loaded first. This trick ensures that although the rest of the page will still be loading, the area the visitor can see will have loaded first, giving the impression of a faster page load.
Avoid bad requests
Check your requests for 400/500 errors. If there are requests that are no longer required, then remove them and free up some space for requests that are.
Lazy load Images
Use of CDNs
Use a content delivery network (or content distribution network) for common libraries; this prevents those files consuming one of the limited HTTP browser connections to the site server. As mentioned above, limiting HTTP requests is an important factor in improving page load speed. By offloading assets to 3rd party CDN’s we save HTTP requests from being used on the web server.
PHP and performance
If using PHP be aware that using PHP 7 has a large performance increase over PHP 5.
Merge CSS and JS Files
Since browsers have a limit on simultaneous HTTP connections, when the limit is reached it will have to queue until the previous requests complete until it can fire off the next connection. By merging JS files & CSS files, you can reduce the number of HTTP requests and therefore improve the load speed of the page.
Reduce font variations
Avoid using more than 2 font families (though this is determined by the design, plus the fewer family variants loaded, the better e.g. bold, extra bold, thin, italic, bold italic, extra bold italic, black, etc.).
Colour png images
Avoid using single colour png images as icons; instead use custom fonts. If a website has more than one icon (as png) used it can result in multiple unnecessary http requests.
Follow these pointers and you will in turn increase your website’s load speed and will be well and truly on your way to becoming page speed lean.
If you need any assistance with a branding project or other marketing related activity in 2017, you may be interested in our free 90 day strategy plan.