Page Speed Lean in 2017

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.

Image sizing 

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. 

Image Optimisation 

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.

File Compression

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.

GZip Compression 

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.

Reduce number of JavaScript Plugins 

Try to use the least amount of JavaScript plugins as possible, since this adds to browser rendering time.  In some cases, it may be possible to create similar effects with CSS.

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.

Siilarly, take time to layout your assets correctly. By this we mean putting your CSS file at the top of the page, and any employed JavaScript at the bottom. This is because browsers render the page by reading from the top of the document down. Why is this important? CSS files are used to style the page. If they are located anywhere other than the top of the page you risk a FOUC (flash of un-styled content) which can momentarily make the page look broken.  Equally, JavaScript is rarely needed until the page has loaded, so by keeping it at the bottom, it does not delay the rest of the page from loading.

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 

When utilising JavaScript and you have a long page, consider “lazy load images”. This uses a little bit of JavaScript to determine which images are in or near the viewpoint and load only those.  The other images will load as you scroll down the page.

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 

Merge local CSS and JS files where possible.  Generally speaking you will have a number of CSS and JavaScript files included in your site’s assets.  If you were to serve these files as individual files, your browser has to make separate HTTP requests for each item.  This can prove quite time consuming as each request needs to be set up, sent to the web server, processed, sent back to the browser and then torn down ready for the next request. 

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.