Speed matters. We are in an age where broadband connections and new mobile generations such as 4G and 5G are rolled out at relentless rhythms. However, these leaps forward are not an excuse to keep loading our websites as packhorses loaded for the mountains and not taking care at improving page speeds.
A website that loads fast is essential for users to access quickly but also because speed is a criterion used by search engines for their ranking.
Statistics report that 47% of people abandon a website that takes more than two seconds to load, and a one-second delay in page response can result in a 7% reduction in conversions.
If you are still not convinced, consider that search engines like Google consider page speed as a ranking factor: your load times can also influence how easily users can find you in the first place.
There are plenty of things you can do to improve things, some of them are simple gimmicks and can yield to great results.
Run a performance test
Perhaps you might be thinking that your website is already fast enough, but unless you are aware of the exact size in bytes and load time in milliseconds you actually better get a performance check run. You might be in for a surprise.
- Use the developer toolbar in Firefox or Google
- Run a test on https://www.webpagetest.org
- Run a test on https://gtmetrix.com/analyze.html
Ideally, a website should load in around 1 second and should have only a few HTTP requests. Results of performance tests can help to identify which elements are excessively heavy and help to make decisions on whether to remove the asset all together or find ways to improve things.
Check your hosting provider
If you are on a shared server or a cheap hosting provider, it’s time to ditch it. A good quality hosting can really make a difference. Not only a good server is able to process back-end code more quickly, but it will also be able to transfer the data faster to your users.
I personally like using cloud-based solutions such as Linode, Digital Ocean and Amazon AWS. These services allow for building and optimising a server precisely as required for the project.
Optimise your images
Images are one of the main buzzkills when it comes to loading time on a website. Very often I see blogs with large images that have not been resized to the actual display size, wasting precious bandwidth. Images should always be resized and optimised before being uploaded.
It’s also important to keep the number of images to the minimum required and use techniques such as lazy loading to delay the download until the moment they are actually requested to be displayed.
Put your application on a diet
Poor back-end applications performance can also affect page load time. For example, a WordPress blog with several plugins or poorly written plugins might require additional time to be processed by the server. While this might only add 10 to 500 milliseconds, in a bigger context, it’s something that you would want to have looked.
Other custom made applications might be optimised for performance, for example reducing the execution time of database queries and data algorithms.
Code caching (for example Opcache for PHP applications) can also help yield good improvements as it stores precompiled script bytecode in shared memory.
Minimise HTTP requests
HTTP requests are exchanges of data that the browser requests when a page loads, for example, each image, CSS file, JS script file gets requested from the browser and eventually delivered to it while the page loads.
There are only a number of concurred requests that a browser can handle; therefore it is essential to keep the number of HTTP requests to a minimum.
To deliver a low amount of requests a solution is to combine assets together in fewer files. Webpack is a tool that can help to bundle front-end assets like HTML, CSS, Javascript into single entry points.
Declutter and Compress CSS and Javascript
CSS and Javascript can take up quite a lot of bandwidth. In modern web development, we use libraries that help to speed up development, but these often result in bloated code which is far from being 100% utilised.
Luckily, these libraries often come with separate components.
Bootstrap – a popular CSS front-end framework – is a good example, as it allows to cherrypick the modules needed and then build the final CSS using the SASS loader. Again, Webpack comes to the rescue as it helps to build CSS and Javascript assets minifying and combining the code and managing versioning.
Custom web fonts can also add weight to your website. However, a good design practice to not use more than two different fonts can also help for performance.
Use Vanilla JS
Do you really need jQuery or that newfangled javascript library? If you are really only using a heavy Javascript framework just for a few pieces of functionality, you should ask yourself if you cannot write your code in plain pure Javascript. It might be less straightforward to start with, but it really doesn’t take much to write a few lines of plain Javascript and the result is is that you could spare from 50 to 200 kilobytes.
Compress and Cache
You should enable gzip compression and cache static components. Gzip is a straightforward way to reduce page weight as it reduces the size of HTTP responses. It can easily be enabled through your web server at a global level or directly in your application if you don’t have root permissions to the system.
Gzip is the most popular and effective compression method currently available and generally reduces the response size by about 70%. Approximately 90% of today’s Internet traffic travels through browsers that claim to support gzip
Caching is another expedient that can help speed up the page load. Just as Gzip, this is a setting in your web server or at your application level and tells the browser that certain assets can be cached so that further visits will be loaded faster.
Share the load with Content Delivery Networks
A CDN is a network of servers that can be used to store and deliver the static assets for your website based on your user’s geographical location, making for faster response and downloading times of the content.
Cloudflare is a popular CDN, but other Incapsula and MaxCDN are just a few the other available solutions.