Optimizing web performance is always a question that every programmer cares about. It can be said that Web technology is getting more and more developed and until today, we have millions of websites in the world and many users are waiting to load websites.
There is nothing more annoying when you have to wait for these pages to load longer than expected time just because of slow internet connection or for some reason. According to research, the duration of interest of users only lasts about 5 seconds.
Imagine if you had to wait about 3 minutes for that website to load, it just meant that its performance was “lagging”, and the number of users would definitely decrease and that wasn’t what we wanted.
Web Performance is the speed at which websites are downloaded and displayed on a user’s web browser.
Why is web performance important?
Web Performance is an interesting topic if you ask me, I think it is one of the things and developers should pay attention, because after all, we only build the web so that users can use regardless of obstacles or challenges.
Today, many users use the Internet with 2G, 3G, 4G networks and LTE connectivity, and we must try to bring the web to them at the same speed. Performance is essential and important to our users for the following reasons:
- Users are our top priority and they are the reason we build it all from scratch. If there is no user on the webpage, I am sure there is no reason for web programming. Because we are making a web for users, users must be a problem for us to consider in every development step and the top goal is that they can use our website in the most convenient way.
- Improve conversion rates. When the website is optimized for speed and usage, we will see a huge amount of maintained traffic, users will continue to visit the web because they have a good experience when they first visit. But on the contrary, try to think if your web has not yet optimized Performance, what will happen?
So how do you make sure your users will be happy on your website and will be happy to come back because you like it and its performance is great? I will guide you a few tips and steps so we can build web faster offline.
Website acceleration tips and tricks
Remove HTTP Requests
There are a few cases where the majority of web load time comes from external HTTP requests. The speed of downloading external resources may vary depending on the infrastructure or server location of the hosting provider.
Code Splitting and Tree Shaking
Code Splitting and Tree Shaking are two other techniques used to improve performance. How do we separate the code or the tree shake properly? You can use tools like Webpack, Rollup.
Code Splitting is a feature that allows you to split your code into different groups or components, then load on demand or load in parallel, while Tree Shaking is to eliminate unnecessary or dead code.
Lazy Loading is a Web Performance template that slows down the loading of images on the browser until the user needs to see the image and it is also a great way to optimize Performance. It makes sure your website is not too bulky, and your users can quickly download the images they want to view.
Optimizing images on the web is important. According to the HTTP Archive, 61% of the page’s page size comes from images. Now we don’t want all our photos taking up space, right.
We can significantly optimize page load time on our website using the Content Delivery Network. A CDN can be used to store resources such as images and videos that we regularly load directly into the webpage.
When you use a CDN, you link static content on your website to an expanding global network of servers. CDNs allow your site visitors to load data from their nearest server.
If you use a CDN, the files on your site will automatically compress to run globally globally.
Caching is a technique used to temporarily store web pages to reduce bandwidth and improve performance. When a user visits your website and that page was cached.
A similarly archived page will be displayed to the user when he or she returns again unless it has been changed since the last archive. This saves users time waiting for the page to load and making everything faster.
Prefetch Resources (prefetching resources)
Prefetching can improve a user’s web experience and significantly improve performance by fetching the necessary resources and related data before needing them. There are 3 main ways to prefetch:
- Link Prefetching: If you are sure the user will click on the private link to navigate to several pages, you can apply this prefetch method. This method is useful for users who have a stable interaction, such as going to the shopping cart page after choosing one or several items.
<link rel=”prefetch” href=”/img/cat.png”>
- DNS Prefetching: This method allows the browser to pre-resolve domain names to IP addresses. This reduces the delay when users click on the link with prefetch DNS, they do not need to wait for the DNS lookup process as usual.
<link rel = "dns-prefetch" href = "https://www.keycdn.com">
- Prerendering: This method is to display the entire page or some of its elements first.
<link rel = "prerender" href = "/ second-page.html">
Tools for measuring Web speed
Knowing how to measure website speed is just as important as improving speed if we are not satisfied with the current page speed. Can use the specialized tools available to check the speed. A few ones I would like to list below:
Optimizing Web Performance can greatly improve your web user experience and be even more important for your web development as applications become bigger and more complex.