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
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.
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)
In our websites, we use Google Hosted Libraries wherever possible for our CDN.
Setting expiry dates or a maximum age for HTTP requests will reduce the need for a website to request an unchanged asset.
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
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
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.
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: