0115 786 0420
0115 786 0420
Is your website suffering from slow page load speed? Fear not, within this article we’ll discuss several optimisation techniques you can implement to help speed up your website. If you’re unfamiliar with the term ‘page load speed’ check out our previous article which examines what page load speed is and how it can affect your website and SEO. Before you start implementing any of the following optimisation techniques, it’s always a good idea to take a look at your current web hosting package first. You’ll be surprised how much of an impact a correctly optimised server can have on the speed of your website.
Enabling gzip compression is a quick and easy way to help decrease your page load time and can reduce your website’s file size by up to 70%. To start with you’ll want to ask your hosting provider whether they already use gzip, or alternatively you can see if your website is already gzipped by running this simple test. Enabling gzip is a pretty straight forward task, the easiest method is to simply ask your hosting provider or web design agency to enable it for you. If you don’t have a web design agency or if your web hosting provider is unable to help, you can simply copy and paste the following code into your .htaccess file.
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_include mime ^text/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_include handler ^cgi-script$
Note: If you only want to compress certain file types make sure you remove or include the correct file types in the code above.
Another quick and easy way to give your website an extra speed boost is to use browser caching. When enabled, browser caching will essentially store certain files and resources in the user’s web browser. This means the first time a user visits a website they will have to download all of the website files and resources as normal, however if they revisit the website or navigate to a different page they will have certain files already stored so they won’t have to download them again. A simple way to enable browser caching is to copy and paste the code below into your .htaccess file.
# One year for image files
<filesMatch ".(jpg|jpeg|png|gif|ico)$">
Header set Cache-Control "max-age=31536000, public"
# One month for css and js
<filesMatch ".(css|js)$">
Header set Cache-Control "max-age=2628000, public"
Note: The code above caches image files for one year and css & javascript files for one month. To change the cache length please change the specified max-age (in seconds) in each code block.
301 redirects are great if you want to change the structure of your website or if you have old pages which are no longer available, but having too many of them tied together can slow down your website's response time.
Using a CDN or content delivery network can help improve your website’s speed, particularly if your website is popular and serves an international audience. A CDN is a network of servers which essentially stores copies of your website at different geographical locations. A CDN will deliver your website based on the user's physical location. Generally speaking the closer a user is to your server the faster they’ll receive your website.
Typically, when a user visits a web page their browser will attempt to load every asset all at once. This can have a big impact on how fast your page loads, especially if your page is feature rich and has a lot of images. A nifty way to combat this is to implement lazy loading. Lazy loading is a programming technique which loads content when it’s needed rather than all at once. You may have seen this when additional content is downloaded from the server as the user scrolls, or when an image is initially loaded as low resolution but fades to a high resolution version.
Perhaps one of the most obvious and most overlooked speed optimisation techniques is image optimisation. Ensuring your images are no larger than they need to be and that they are compressed for the web will not only help to improve the speed of your website but it is also considered best practise. An easy way to compress images if you don’t have a graphics program such as Photoshop is to use an online tool such as compressor.io.
Another common mistake made by many web designers and developers is to resize images using CSS. The motivation behind this is often to ensure the images remain sharp on high pixel density devices such as smartphones. However, doing this means your device and computer have to download the images at full size even though they may only be displayed at half the size. A better way is to use the srcset attribute. In the example below we’ve used srcset with display density descriptors to serve up images based on the device's resolution. For example the ‘example-small-img.jpg’ image will be used for standard resolution devices and the ‘example-lrg-img.jpg’ image will be used for high resolution devices such as retina displays. For more information regarding srcset please click here.
<img src="/images/example-small-img.jpg" srcset="/images/example-small-img.jpg 1x, /images/example-lrg-img.jpg 2x" alt="example image description..." />
Minifying your website’s html, css and javascript files is another quick and easy way to help reduce your page load speed. Minifying essentially means removing any spaces, commas and unnecessary formatting from your code. This can dramatically decrease the size of your website files and the good news is there’s countless online tools which can do this for you, for example jscompress.
Note: Depending on your project and workflow it is possible to automate the process of bundling and minifying assets by using tools such as Gulp.js
Although there are other optimisation techniques to help speed up your website, the seven we’ve described above are perhaps the easiest to implement and are a great place to get started. If you would like any further advice regarding website speed optimisation or SEO performance, please don’t hesitate to get in touch.
