Website Performance Optimization Strategies: How Loading Speed Affects Your Business
- Development, Frontend
- 18 Jun, 2024
Butterfly effect with 1 second loading speed
The patience of not only Koreans, a “fast, quick” people, but also internet users around the world, is getting shorter and shorter. An Amazon study found that for every 100ms (0.1 second) of delay in website loading time, sales decrease by 1%. Google also announced that when page loading time increases from 1 second to 3 seconds, user bounce rate increases by 32%.
Modern web applications are becoming increasingly heavy-handed to provide fancy UI and complex functionality. No matter how great a feature a developer implements, it is of no use if the user presses the back button before viewing the screen. Web performance optimization goes beyond simple technical satisfaction and is one of the most important business indicators directly related to a company's sales.
In this post, we will look at key strategies to optimize website performance in the front-end area.
1. Image Optimization
Images take up the largest portion of a web page's capacity. Just processing images properly can dramatically improve perceived performance.
Use next-generation image formats
Use WebP or AVIF formats instead of traditional JPEG or PNG. You can dramatically reduce file size by 30% to as much as 50% while minimizing loss of image quality. HTML's <picture> tag allows you to branch out the format depending on browser support.
Lazy Loading
There is no need to download all images that are not visible on the user's current screen (viewport) at the time of page loading. Lazy loading is a technique that loads images by the time you scroll down and the image appears on the screen. In HTML5, this can be simply implemented by adding the loading="lazy" attribute to the <img> tag.
Proper image resizing
Retrieving a 3000x3000 pixel original image from the server for a thumbnail that will be displayed at 300x300 pixels on a mobile screen is a huge waste of bandwidth. You must provide an appropriately sized image for the device size.
2. Reduce resource capacity (Minify & Compress)
This is to reduce the size of text files (HTML, CSS, JavaScript) that the browser must download.
Compression
Reduce the file size by removing unnecessary spaces, line breaks, comments, etc. contained within the code, and by obfuscating variable names briefly. You can automate the build process through bundlers such as Webpack or Vite or plugins such as Terser.
Gzip/Brotli compressed transfer
When transferring a file through Nginx or Apache settings on the server side, it must be compressed using the Gzip or Brotli algorithm and sent to the client, and the browser must decompress it and enable it. Especially for text files, the compression efficiency is very good.
3. Remove rendering blocking resources
The browser draws the screen by parsing HTML from top to bottom, but when it encounters heavy JavaScript or CSS in the middle, it stops rendering until it is downloaded and executed. This is called ‘Rendering-Blocking’.
CSS goes to the bottom of <head>, JS goes to the bottom of <body>
To avoid flashing unstyled content (FOUC), CSS is declared inside <head> to ensure fast loading. On the other hand, JavaScript files that are not essential for initial rendering should be placed at the very bottom of the <body> tag, or should be downloaded asynchronously in the background by giving the defer or async attribute to the <script> tag.
4. Code Splitting
A chronic disadvantage of SPA (Single Page Application) is that all JavaScript code of the app must be downloaded upon initial loading (increasing the bundle size).
Code splitting is a technique that splits this huge bundle file into several smaller chunk files. You can significantly improve the initial loading speed (TTI, Time to Interactive) by loading only the code required for the route (page) that the user first enters, and dynamically loading (Dynamic Import) the code of other pages when the user moves to that page.
5. Utilizing caching strategy (Caching)
The fastest network request is to make no request at all.
Browser caching settings
Set Cache-Control appropriately in the server response header to ensure that static resources (images, fonts, CSS, JS bundles) that do not change are cached inside the browser for a long time. However, a cache invalidation strategy that adds a hash value to the file name must be used in parallel so that the browser can recognize the new file when the file contents change.
Introduction of CDN (Content Delivery Network)
Static files should be cached on an edge server physically close to the user to minimize transmission latency. The more global the service, the more essential the introduction of CDN is.
Conclusion: If you can't measure it, you can't improve it
The first step to performance optimization is accurately measuring the current state. Take advantage of great free tools like Lighthouse and PageSpeed Insights provided by Google. While monitoring the Core Web Vitals indicators (LCP, FID, CLS) presented by these tools, try applying the techniques introduced above to your project one by one.
