Much has been written about website speed lately. Yet we feel there are still many aspects that need to be cleared up and demystified. Simply said, speed can be improved by making files smaller in size or by simplifying the transport.
The goal of this article is to provide verified steps to explain how it can be achieved. This article may also serve as a simple guide to keep record about recent progress in internet technology.
1. Optimize Images
Images often occupy most of the space on a web page. Its optimization can hence save a large amount of bytes and even though there’s no clear-cut solution, there are a few tips.
First of all, think of images that are expandable and delete these. If your site doesn’t contain any, think again. Ask yourself whether each specific image is required to achieve the desired effect. You should be then left only with truly indispensable images.
Choose the right format. Using vector formats instead of raster images is the next step. Most images such as icons or logos are suitable for SVG vector format. Not only SVG looks much sharper at every resolution, it’s also smaller in size and on top of that it can be easily compressed unlike bitmaps.
Choose the right resolution. You can improve performance by choosing a resolution that corresponds to the actual display size. For example, cut an image that is displayed 200×200 even though its original resolution is 240×240. Such image takes unnecessary 17 600 pixels. You may even deliver different variants using the image attribute srcset.
Finding the optimal solution is time-consuming, but the result is definitely worth it.
2. Use Compression Algorithms
Lossless compression reduces the original size of data by transferring only the number of bits of the actual information.
There are multiple compression algorithms such as Deflate, Gzip, Zopfli etc. However, the most recent solution is called Brotli and it was introduced by Google in autumn 2015.
Brotli allows a far better compression especially for HTML, CSS and JavaScript files, where it achieves over 20% better ratios over Zopfli according to Google’s report. With HTML files, the result may even be up to 40%. Comparison with other algorithms can be found here.
In terms of browser support, so far only Chrome and Firefox support Brotli, others to follow soon. For the server side, no server offers Brotli by default, though Nginx, Apache and Node.js get on with an additional packet to run Brotli.
Bear in mind that Brotli is still in beta, the installation and debugging will thus take some time.
3. Implement Content Delivery Network
CDN is a network of servers deployed in data centres around the globe. These servers store your site’s content including images, videos or software so that when a visitor accesses your site, the content loads from a geographically closer point. The overall loading is hence faster from every place.
The speed enhancement is more than 50% on average, normally even more, thanks to CDN.
Besides performance, CDN also improves reliability and saves your origin web hosting server a significant portion of traffic. Consequently, your site is protected from origin crash and DDoS attack.
Implementing CDN doesn’t require any particular skills. For most sites it’s an easy affair even with content management systems like WordPress, Magento, Drupal or Joomla.
There are many CDN providers out there, in order to find the right provider there are independent comparison sites such as CDN Calculator or CDNPrices.
4. Leverage HTTP/2
HTTP/2 is a new version of the network protocol, which was introduced recently in the middle of 2015.
The main improvement over the former HTTP/1.1 is so-called multiplexing of requests. It is the ability to cover multiple requests in one connection. This is game-changing as it dramatically simplifies the loading. Where HTTP/1 had to open several connections to properly load everything, HTTP/2 can only open one.
With HTTP/2, server compresses headers and thus transfer time decreases. Furthermore, the new version is binary in contrast to the previous textual.
All this reduces latency and minimises loading time. Check out the online demo here.
Moving to HTTP/2 is feasible if you manage your own server. Otherwise, it depends on your web hosting company or CDN provider.
Although the protocol doesn’t require a secured connection, browsers only support it over TLS. Obtaining a certificate is a step forward in implementing HTTP/2
As of now, HTTP/2 is supported by most browsers including Chrome, Firefox, Safari, Opera or Edge.
+1 Get a free SSL certificate
We have one last tip for you. Having a security certificate is becoming compulsory and you can get one for free with the new Let’s Encrypt authority that left public beta mid-April 2016.
With Let’s Encrypt you can obtain a free unshared certificate in a fully automated process. Learn more about this here.
In conclusion, we recommend trying CDN77.com, content delivery network provider and their free trial. With CDN77.com, you can test the impact of HTTP/2 and Brotli on your site.
