コラム

Web applications are becoming more widely used. Many applications that were previously used locally are now being converted to the web. One of the main concerns in this regard is the issue of execution speed.

Web applications are often considered to be slower because they require various assets to be retrieved over the network and execute JavaScript, a scripting language that is believed to be slow. In this article, we will discuss techniques and methods that can be used to solve speed-related problems.

Caching

First and foremost, caching is important. It is not only important to cache the results of computational processing, but it is also crucial to cache data obtained over the network. Browsers have their own implemented cache, and you can also use the Cache API of ServiceWorker to speed up your app.

In addition, some GraphQL clients cache the response for you. Since it takes time to retrieve data each time, caching should be actively used. However, it is important to note when to update the cache. Without implementing an update process, it will continue to return outdated data.

CDN

Assets such as JavaScript, CSS, images, and videos should be distributed through a CDN. Simply distributing them through a CDN greatly contributes to faster loading times.

Although there are various CDN services available, the type of fee varies, so be careful when choosing. The service to be selected varies depending on whether there are many accesses or if delivery speed is the only concern. In addition, caching can also be a problem for CDN. Be mindful of the cache deletion method and the time it takes to reflect when choosing a CDN.

Asynchronous processing

JavaScript is executed on only one thread within the browser. Therefore, if the processing is carried out sequentially, everything will be processed in a series, and it will take time to complete.

What you want to use here is threads. By using Web Worker, processing can be parallelized. In addition, network processing can also be parallelized, so it may be a good idea to have the server handle time-consuming processing. Web Worker has differences such as being unable to manipulate the DOM (there is a solution called WorkerDOM), but it can be used for calculation processing.

Improvement of Web Vitals

Web Vitals are indicators used to improve web experiences. It is also related to SEO, but it should be emphasized for improving the user experience.

Indicators such as how long it takes until the first input or whether there is any display jitter can be measured by tools like PageSpeed Insights and Lighthouse.

Image optimization

Recently, the resolution of images has increased, and the size of images has also become bloated. It is not uncommon for them to exceed several MBs, and if there are a lot of such images, it will naturally take time to display.

Different image formats should be selected depending on the type of image, but webp is a good choice. Originally, it was only supported by Chrome, but now all modern browsers support it. It’s a good replacement for JPEG.

In addition, there are proxy services that adjust the size or compress images, so actively use such services.

HTTP/2

Currently, most of the HTTP protocols are HTTP/2. However, there are cases where old HTTP servers are still using HTTP 1.1.

HTTP/2 can send and receive multiple data on one connection using the concept of streams. This speeds up communication between browsers and servers. Furthermore, the introduction of HTTP3 is currently underway. Some CDNs are already using it. You can check the protocol in the network section of Chrome Developer Tools.

Optimization of Web Fonts

There is a growing number of websites that use Web Fonts, particularly Japanese ones that require caution. When there are many characters, the font size also becomes bloated.

For English fonts, it is good to use what is distributed by Google’s CDN. For Japanese fonts, consider using services like FontPlus or TypeSquare. They only distribute the characters used on the web page, making it lightweight.

Conclusion

In reality, there are not many programming-level techniques to speed up the front end (of course, it doesn’t mean that slow code is okay). By strengthening the network aspects, the user experience can be greatly improved. In addition to speed, there are also techniques to reduce user stress by displaying indicators or visualizing processing steps. As web applications become more popular, let’s use these techniques and methods more and more.