5 Most Effective Ways To Speed Up Website Loading
The speed at which your app or site opens is reflected in the first impression users get. This article lists working ways to minimize page load time.
INITIAL DOWNLOAD TIME
The time that passes from the moment a user or client enters your site’s domain name to the moment they see the content is the most important few seconds you have to make a good first impression.
According to Amazon, every 100 milliseconds of delay costs 1% of sales.
And yet, many web developers treat download speed as something of secondary concern. They add more and more libraries and features and gradually start to notice a drop in conversions. Worst of all, these losses are hard to detect—users leave slow-loading pages before the site has time to store any metrics.
Some of the methods below can be implemented on the front end and some on the back end. Either way, web applications should load quickly.
1. USE THE RIGHT METRICS
The first thing you need to do is add metrics. The boot process has many steps, and you won’t know where the bottleneck is until you start monitoring the right parameters.
Below are the most important steps in the download process.
In other words, you must track the metrics for each segment of this chart.
Let’s look at how this can be done.
Time from browser request to response
Track this indicator on your server. You need to determine the time from the moment your API receives a request to the time it issues a response. Depending on whether external calls are made to, for example, databases, there may be a minor or a significant bottleneck here.
Time from sending to receiving a response
This is harder to measure, but one possible way is to add a timestamp when your response leaves your server and compare it to the time on the user’s side at the first possible moment (script tag in the header of the HTML page).
Getting a response to the first rendering of content
First Contentful Paint is the time from the moment you navigate to the site until the browser renders the first bit of content from the DOM. It could be something as simple as text, a background, or a loading indicator. You can measure the parameter using Lighthouse in the Chrome Developer Tools.
Time from the first rendering of content to the rendering of the largest element
The largest Contentful Paint is the rendering time of the largest element visible in the user’s viewport. Usually signals the end of the page rendering process when the user sees a full screen. This time can also be found by running Lighthouse.
Drawing the largest element and time to interactivity
Finally, the time to interactivity is the point at which the user can perform actions such as scrolling, clicking, and typing. A high score on this metric is especially troublesome. The user sees a rendered screen in front of him, but cannot do anything contrary to his expectations! This metric can also be measured using Lighthouse.
2. SHORTEN THE CODE
Having received all the necessary metrics, you can start optimizing – you have to look for compromises. With the help of measurements, you will understand which ones are worth going for.
A lot of code can be added to an app before anyone notices the difference in loading speed between it and a blank page. Sometimes it is so small that changes are not noticeable from build to build until one day the site starts to seem slow. You understand that your application is bloated, and this is the moment to go for code reduction.
When shortening the code, you get two speedups at once:
- your application is transferred over the network faster;
- the user’s browser finishes parsing the code faster.
The first acceleration is insignificant. Since requests are compressed over the network, reducing 1 MB of source code in the output can result in a savings of only 10 KB. At the same time, the benefit of faster parsing is much more noticeable. Your users are likely to run your application on a wide variety of browsers and computers, many of which don’t have the processing power to analyze the code quickly enough.
They may also use mobile devices with even less processing power. The difference after optimization can reach several seconds.
Thus, the less code you have, the faster the browser can finish parsing and start running the application. If you want to show the loading screen using Javascript, then it will also need to be processed, which will also take time.
Let’s say you don’t want to cut features or remove them altogether. Luckily, there are some good ways to shorten the code:
- Run it through minifiers . Minifiers make long names short (signUpDarkModeButton becomes ss), remove whitespace, and perform other optimizations to make your code as compact and lossless as possible.
- Import individual functions. Libraries are often chock-full of what you don’t need but packaged in a common package. Let’s say you only need a certain function. Instead of importing the entire library, you can import just the code you need.
- Remove dead code. Sometimes there is code left on the site for debugging or deprecated features that are no longer used. JavaScript offers tools like Webpack that can detect dead code or unused dependencies and automatically remove them from the production build.
3. DIVIDE THE CODE INTO FRAGMENTS
Once you’ve optimized your application, you can move on to shortening the code required for the initial download.
Let’s say 20% of your code is used to work with some application features that users can only get to after a few clicks. Before showing the loading screen, the browser will spend time parsing. Dividing the code into fragments will significantly reduce the time to interactivity.
Skip the confusing import dependency graph for all your Javascript files. Instead, identify areas that are easy to cut. For example, some component loads several heavy libraries. You can isolate it into a separate file and then only import it when the user is ready to interact with it.
Choose a library for lazy loading depending on the framework you are using. No need to go overboard and separate each component – in this case, the user will receive a fast initial load but will have to wait for each subsequent interaction. Find the largest parts of the code that can be segmented and optimize them.
4. USE SERVER-SIDE RENDERING
Since browsers must do heavy code parsing and compilation, and users work on Chromebooks and mobile devices, one common method to reduce load times is to partially outsource this task to servers. In other words, instead of providing a blank page and filling it with data through Javascript, as is the case with most modern single-page applications, you can host an engine of your own (for example, Node.js) and process as much content as possible through it.
Your servers are much faster and more predictable than users’ browsers. Some of the code will still need to be processed on their devices in order for the app to be interactive. However, server-side rendering can fill up a lot of the data. The user will get a page that already displays a loading screen, or at least a progress bar.
And if the data is needed for the initial view, the client does not need to make a separate request to get it, it will already be available for use in the application.
5. COMPRESS ASSETS
It is the assets that bring the page to life. Only after they are rendered will the site appear to be fully loaded. This includes backgrounds, user interface icons, profile pictures, and other files. Oftentimes, assets will shift the layout, causing the page to jump during loading if the user tries to interact with its elements. Sometimes the time of drawing the largest element (LCP) depends on them.
At the same time, assets are one of the heaviest parts of the application. Images can be several megabytes in size, and downloading a large number of icons can easily exceed the browser’s maximum concurrent network request limit, resulting in stuttering.
In most cases, you should not download an image from the Internet and use it in an application without processing. Pictures should be reduced to the smallest possible sizes, depending on how they will be displayed. If the user’s avatar is inserted into a tiny 50px by 50px element without modification, your app will take time to fully load the large image and then scale it down.
In addition, pictures can be compressed depending on their format. At the moment, the web is the preferred option, but compression technology is constantly improving and better alternatives are on the horizon. Given the huge number of different formats, some browsers do not work with the newest ones. Fortunately, they usually allow you to download the files that are supported.
Considering the above, choose the most up-to-date and efficient compression formats, but leave old versions of files as fallbacks, using fallback elements for videos and images.
CONCLUSION
These are the five most effective methods that will allow your customers to load your site at lightning speed. With them, you will improve user experience and conversion rates, as well as increase your ranking in search results, as low load times are good for SEO.
