It is definitely nothing new, noting how important it is to have a fast website. In addition to the user experience hampered by slow loading, the loading speed has been a ranking factor since 2018 for two Google products: the search engine and Google Ads.
There are thousands of articles on the internet suggesting dozens of actions to improve a website's speed. As with any complex issue, it is not always possible to execute those actions simply, depending on how your site was designed and built.
Here, we will discuss the three principles that you should analyze when working on your website optimization. These are concepts that are independent of your site's platform or language so that you can follow them in different ways, depending on the technology involved.
So let's check the top 3 things to consider if you want to speed up your site:
1. Reduce the amount of data transferred to as minimum as possible.
Every time a user accesses your website, he needs to download all the elements, whether from the website itself or external resources (widgets or social networks, for example). So if the total sum of data uploaded to your site is, for example, 10 megabytes and you get a reduction to 5 megabytes, the download time for your site components will be cut in half.
You can check the amount of data transferred using your browser's developer tool.
This principle is even more critical if we analyze the situation from the perspective of mobile users with over 3G connections.
Some of the various ways to apply this principle:
- GZIP Compression;
- Compress Images;
- Asynchronous Loading;
- Avoid images bigger than the display area;
- Keep the payload of your requests smaller than possible.
2. Reduce the number of Input/Output to as minimum as possible.
This principle is valid for all aspects of a web application: frontend, backend, API, databases. In short, every part of your system.
I/O operations are generally slower operations due to the overhead involved in their nature. Whenever such operation is carried out, it is necessary to send data (information or command), process and obtain the result and transfer the result to the source.
The time to obtain or process the result is only a part of this operation, as soon as we avoid I/O operations. So the less I/O operations, the less time we have wasted taking and bringing data.
Some examples of situations that your system does I/O operations:
- Save a new customer to the database (for example an insert in MYSQL);
- Get a list of products from the database or API (for example a select with subquery in MYSQL);
- Submit form data to an API (POST HTTP request);
- Get a list of your friends who liked a particular social network (GET HTTP request).
For analysis on your website, you can divide this check into two parts: frontend and backend.
One backend with few I/O operations (for example, MYSQL transactions) will provide a better time response. This is the hardest part of the optimization because it involves the engineering of your application. There are tools like Blackfire and NewRelic to help the developer profile the performance of applications.
Looking from a frontend perspective, one frontend with few HTTP requests will load faster than one frontend with tons of HTTP requests. You can also check the HTTP request using the developer tool of your browser and see all existing requests.
Some examples of actions that you can work on to reduce HTTP requests:
- Evaluating and Reducing External Scripts (especially tags from third-party systems);
3. Have a good caching
Caching is the act of keeping data in storage to allow retrieval without having to request the data from the original source if that data will not change frequently.
It means that with caching we are avoiding transfer of data or making requests/transactions, ours first and the second principle.
Several platforms already have cache features built-in. But the level of caching is not the same. It depends on how the cache is implemented. To boost your speed, look for Full Page Cache for your website. Full Page Cache will cache the entire or a good part of the HTML result of your website, saving a good portion of the I/O operations.
Also, a good CDN (Content Delivery Network) tool can improve the velocity and reduce the amount of data transferred. But that’s a separate blog post.
Getting your page to load faster is not a simple undertaking. We understand it can take more than tips in this blog post to get your page load times to get them where you want them to be.
We urge you to spend some time looking through your site's speed test results and look for the issues that have the most significant impact on your load times. From there, you can decide what to implement first.