Our phones and tablets are available wherever we are... a car park in the city centre, a field in the middle of the countryside, or a cafe with slow and painful WIFI.
If you are a front end (or web) developer, here are a few tips for speeding up your website to give it the best chance at being fast and accessible wherever the user is using your website!
Reduce the number of HTTP requests
HTTP requests are assets requested by web page: images, CSS, JavaScript and even the HTML web page itself.
Every request has to go to the server and return the asset. This can take a long time and give the appearance of a slow website.
Fewer requests means a snappier website. Simply reduce the number of images, CSS and JavaScript requested by the website.
Minify CSS/JavaScript
Removing whitespace, line breaks and comments from CSS/Javascript can make your file size much smaller, up to 20% smaller according to some minification tools!
Aggregate CSS/JavaScript
Front end development has become a very modular and reusable process. It is often the case that we can have 10s (or more) CSS/JavaScript files for a single website.
Combine your CSS files into a single file and also combine your JavaScript files into a single file using aggregation.
Reducing multiple CSS/JavaScript file requests to two file requests will be far better for speed and performance.
Optimise images
Even if you save out an image from your favourite graphics package, probably Adobe Photoshop or similar, there will be some hidden detail or meta data that is not visibly detectable to the user. This adds excess file size to the image, resulting in larger images.
Try using additional compression or optimisation, especially for 24bit PNGs with full alpha transparency.
We like to use TinyPNG. We also recommend that our clients use this for images that they use in our content managed websites.
Use fewer images or use CSS sprites
A larger, single image request is often better than 20-30 small image requests in terms of visual speed performance. So combining multiple images into a single CSS image sprite is ideal.
However, be aware of the sprite image size; if its gets too big (24 bit PNGs, for example) try optimising the image first or consider using multiple images if it is still too big - maybe you could create one image for JPGs and one image for PNGs.
Use a content delivery network (CDN)
A content delivery network (CDN) is a method of storing images, CSS or JavaScript on an external domain so that it can be accessed concurrently with other assets on your own domain.
This is ideal for jQuery or similar JavaScript files, as the same file is often used on multiple websites and can be cached for next use, even if it is another website created by another company.
In our websites, we use Google Hosted Libraries wherever possible for our CDN.
Browser caching
Setting expiry dates or a maximum age for HTTP requests will reduce the need for a website to request an unchanged asset.
This is mostly applicable to CSS, web fonts, images and JavaScript.
Utilising the caching available by the browser could really improve the performance of your website, especially if the asset doesn't change that often.
Check for missing assets
If a server has to check for a missing images, CSS or JavaScript, it is going to take longer than providing the asset it was originally intending to get back.
Make sure all assets are accessible and do not return a 404 error. If it does, fix it or remove it.
You may also want to setup notifications for when a 404 error is returned for missing assets (not pages) so you can catch the issue before it affects users' perception of speed.
Improve the server response time
Everything on the internet starts with the server.
Choose the best hosting server and environment for your website to accommodate the traffic you anticipate.
Monitor and measure the server response times often, and at different times of the day (usually guided by analytics).
Setting up alerts for when the website is struggling is also a good idea to catch performance issues before they escalate to a much bigger problem.
GZIP HTTP assets
Text-based HTTP requests and assets (such as HTML, CSS and JavaScript) are all capable of being compressed and served out as a GZIP request by most web servers.
The compression is usually far superior to other methods, and will definitely reduce the download size and improve the visual speed and performance.
Make it mobile-friendly
Ensuring the meta data for the web page identifies how the website is best viewed can reduce browser reflow (the process of rendering the page to the viewport).
Ensure that you provide a meta tag to identify the viewport requirements. This will mean mobile-friendly websites will render at the correct size to start with, rather than adjusting and causing a browser reflow.
A typical meta tag to identify mobile-friendly web pages:
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1" />
Test, test, test!
Buy as many devices as you can to test if the website performs as you expect.
Don't just use your office WIFI either! Test using 3G and 4G devices to make sure that it is as fast and as speedy as you really hoped it would be!
The Google Chrome browser developer tools also simulates network throttling for slow 3G, fast 4g etc., which can give you a good indication of how your website is performing on different connection speeds.
Useful tools
To help you check that your website is optimised for the best speed and performance possible, there are some excellent tools that you can use to test you have covered the basics:
