Recently, we published a guide which explained why today web performance is of paramount importance to all website owners. In this article we focus on practical tips which you can apply to make sure that your content loads blazingly fast for all users. Site optimization is for everyone!
There are a number of web performance related tasks that all websites should implement, irrespective of the approach taken when building the site. These should, where possible, be integrated with your development and deployment workflows as appropriate. There are plenty of free tools available to help with each task. The items listed below all revolve around reducing file size, or reducing the number of requests required, since both of these can lower performance.
1. Image optimization
- All images should be compressed as much as possible to reduce file size. You can use free tools such as ImageOptim, PNG Gauntlet, JPEG Optimizer and TinyPNG. With many tools, the compression level can be set manually, resulting in huge file size reductions with little or no user-perceivable downsides.
New compression algorithms are coming out all the time, so it pays to keep an eye on the landscape. For example, in March 2017 Google announced a new JPEG compression algorithm. The new algorithm, called Guetzli reduces JPEG file size by up to 35% with no perceivable quality reduction! Because it conforms to the JPEG standard, it works automatically with existing browsers.
- Images should be sized correctly. That is, if you are displaying a 200×200 image, then don’t display a 400×400 at 200×200 size. There is no point in sending a bigger image if it is not going to be displayed, or if it’s not going to fit on a device’s screen.
- Use the correct type of image:
- WebP: This newer image format is on average 25%-34% smaller than equivalent JPEG images. Therefore it should be used where possible. The drawback is that WebP is not yet supported in Firefox, Safari or IE/Edge.
- JPEG: Use this if the image is a photographic or complex scene. Make sure that your JPEG encoder is up-to-date with Google’s latest JPEG Guetzli encoding algorithm to keep files as small as possible.
- GIF: Use this if you need animation and or transparency. Good for logos, and other simple images that need to be small.
- PNG: Good for images with straight lines. Bad for photos. Also supports transparency.
- SVG: A vector image format, that is resolution independent. Good for logos, icons and geometric images, that will remain sharp across different screen sizes, and Retina screens
- BMP: don’t use it on the web, ever!
- Check if you need to optimize your images using these free tools: mobiReady, and PageSpeed Insights.
2. Text minification
Note that many of these tasks can be performed automatically for you if you use a build tool such as Gulp or Grunt. If you make frequent changes to your site you should investigate these tools to save you time and effort.
4. Text compression
You should absolutely enable compression on your server whenever possible. It’s likely that this is already active on your server, but it’s really worth checking to be sure. You can test if your server is performing text compression with the mobiReady tool (look out for the Gzip Encoding test result).
How to activate compression depends on your hosting server (e.g. Apache, NGINX, or something else), but generally involves setting a configuration option. Some popular servers are covered here.
The central idea behind caching on the Web is why download something again if it hasn’t changed?
Caching can be used to reduce the number of requests made to a server. It works by downloading pages and resources only on the first request, and won’t download anything a second time unless it has changed, or until a certain amount of time has passed. By setting cache headers, you can specify how long a specific resource should remain cached. The next time the browser needs it, it can look in the cache to see if it has it already. Because the browser has less to download, pages render much more quickly when caching is used.
You can specify different cache expiration times for different resources. For example, you should set a long time to expiration for static resources that never change, such as images. On the other hand, if you update a page every day, then it should have a short cache time. Use the Expires or Cache-Control, and Last-Modifed or ETag cache headers.
Jake Archibald’s Caching best practices and max-age gotchas guide will help you cache efficiently and avoid pitfalls.
6. Make the first 14KB count
If there is CSS or JS that is required for the initial content, then, if it is small, it can be inlined. If it is not small, then try to make it small by extracting only the necessary parts and inlining those. The rest can be deferred.
9. CDN hosting for popular libraries
Next level performance improvements
While the previous performance above are relatively low cost to implement, with a little more investment in time, the following suggestions can boost your web performance even further.
10. CDNs for your static resources
Apart from using CDNs to host popular libraries as mentioned above, you can also use a CDN to host any static part of your site, from images and CSS to full HTML pages. The level of control, and method of configuration differs from CDN to CDN. Some CDNs can be set up simply by changing DNS records to point your domain at the CDN, and the CDN will handle the rest, deciding if something is static or dynamic.
With others you can pick and choose which resources to serve via CDN, and you might manually upload all your static assets to the CDN provider, and update your webpages to reference the CDN URLs for these assets, rather than local URLs. In all cases, the CDN attempts to route a request for an asset to the closest geographic location to the user.
With the maturing of HTML5, so many great features have come to the browser in the past year, and HTML5 now opens up new possibilities for web apps. In particular HTML5 brings service workers to the table, which among other things, can be used to build offline and caching features to web apps.
To implement these features can require some technological expertise, but the benefits can be worth it. If you add offline capabilities to your web app, then it will be able to function, at least to some degree, without a network connection. On top of this, by using service workers to cache requests and responses to your website, page load times can be almost instantaneous.
12. Content Adaptation by device
Another way to improve performance is to optimize content based on the most common or likely use cases per device. While it’s not possible to know, or presume, that every user on each type of device will want or intend to use your web app in the same way, you can research the most likely use-cases, and prioritize those first. That is not to say other use cases should be ignored.
You can see this idea in action on Google’s search results pages (illustrated). Mobile users get a different experience to desktop users. There is a different emphasis on the information that is surfaced, with mobile leaning toward local results. Content is also prioritized differently. On mobile, image search is demoted, although, importantly, it’s still available, reflecting a prioritization based on likely use-cases that still accommodates the less likely ones.
Updated: 23/03/2017 Updated to note Google’s Guetzli JPEG algorithm