A developer’s top tips for page speed optimisation
A lot can be said about page speed in the world of web, but there’s no denying its importance – our new website was built with speed at its core. Google uses page speed as a signal when ranking pages and from July 2018 it will be a ranking factor for mobile searches.
Improving page speed and optimisation scores can often be overlooked in the world of web. As a developer, there are a number of ways to improve page speed and some are simpler than you might think! Below are some quick tasks you should undertake to improve your page speed.
This one may not be quick but it’s probably the most beneficial in the long run!
It is always important to be aware of what you are using, such as libraries, external scripts, etc and how you are developing, especially at the beginning of a project! Ensure you are writing DRY (Don’t Repeat Yourself) code as much as possible. It will have an incredible impact and it will help you improve as a developer on larger projects.
Side note: With the introduction of HTTP2 this may not be an issue in the neear future. This is because HTTP/2 can send multiple requests for data in parallel over a single connection.
The smaller the better.
It may seem obvious but smaller you can make your files the better. Software like Gzip can help by compressing files before sending them from the server. Around 90% of websites today support Gzip so this program is a no-brainer and often overlooked by developers!
Whatever you do, don’t ask users to download the same thing twice!
Enabling caching is also going to be a huge benefit, especially for returning users. Assets for the website will already be stored on their hard drive, allowing them to only request the new assets required.
You can enable this in WordPress with somthing like W3 Total Cache, or, you can add this bit of code straight into your htaccess file to tell browsers how long to cache certain assets:
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf|svg)$"> Header set Cache-Control "max-age=2592000, public" </filesMatch>
Images are a huge controller of your site speed. There are many things you can do to help optimise images, such as reducing file size and using the right formats.
Ideally, you should use JPG format for photos – JPEG compression was made for photographic images, so take advantage!
For icons, where possible, use SVGs as they are much smaller than using PNG or JPEG. They will also be much sharper and scaleable without pixelation.
A very good tool for reducing file size is TinyPNG.com, it’s also free!
Another technique you can use is to simply resize the images using Photoshop or even Preview on Apple Macs. Sometimes professional imagery sizes can be anywhere from 3000-6000px, using TinyPNG will get you halfway there but at these sizes the only option is to resize the images.
For websites that feature rich photography, you can only optimise to a point but there is a solution that can help keep your score up.
What do you do when you can’t make images any smaller?
To keep your page speed up and not have users waiting for lots of images to load, you can use lazy loading! This only loads images when they are needed in view as the user scrolls down the page: the above the fold images become the priority.
To put this into perspective, for our new website we lazy loaded a grid of 10 images from Instagram’s API and gained 31 points on Google’s PageSpeed insights.
Google is constantly working on this tool and recently has split the score into ‘Optimisation Score’ and ‘Page Speed Score’.
Using these tools and techniques will help get your optimisation speed score up.
However, depending on the content and nature of your website, despite having a score of 100 for optimisation, your actual speed may not be as high.
These changes will definitely help your websites performance and your users will notice.
Final Tip: If your site has sufficient traffic, after making these changes your ‘Optimisation’ score will increase but your page speed may not initially, it will take time for the changes to take effect as visitors come back to your website.