I already clear the cache and reload the whole page.
What technology do they use that can load so quickly?
It only took a few minutes to open the web to find out, but I got an answer that was both interesting, surprising, and extremely interesting.
Note: Because I don’t know what the back-end of Amazon/eBay or some eCommerce sites( which could load their sites under 1s) are, I can only predict the following 2 things about the back-end:*
- HTML is cached in RAM of webserver or web application to minimize back-end load time (If the user is not logged in).
- CDN system is located in many places to speed up the loading of resources (image, CSS, js)
Therefore, this article is only intended to analyze the front-end of their sites.
Note: Most of the experiments I’m going to check out on Amazon. You can check on eBay to see whether that is correct.
A 14 years old modern technology
You can see in the gif below, Amazon or eBay only takes about 1 second to load (used Ctrl + F5 to clear the cache and reload the entire page).
A Vietnamese eCommerce site with 1.5 daily traffics, Thegioididong.com, also could load their site under 1s.
You will be surprised to learn that these sites do not use any of the famous modern frameworks (VueJS, ReactJS, AngularJS) and only use the very basics:
- HTML is rendered entirely from the server-side render.
- Pure JS + a little bit of jQuery
However, these “normal and old” technologies (not the cool ones like React, Webpack) have helped them achieve dizzying page loading speeds.
The front-end is optimized so perfectly!
The reason Amazon or eBay has such a dizzying page load speed is that the front-end has been optimized very well! Let’s try to analyze it:
1. The size of the page is extremely small
When you open Amazon and eBay’s Chrome Dev Tools, you will see the browser's requests to the server.
With an eCommerce site, too many images, the total load from HTML, CSS, and JS to the image is only 692KB, which is just the image's size. How crazy is that?
Taking a closer look at the image size, you will see that Amazon’s photo is very small, only about 5–10kb. This shows that the images have been optimized very well. They also don’t use libraries like bootstrap to… reduce the page size.
The page also applies lazy load, so when you scroll down to load the images below. Therefore, the browser only needs to download the banner and the 4 or 5 images above, which greatly reduces the download traffic!
2. Handle CSS and JS properly
A closer look, we see that Amazon didn’t load any CSS files but put all the CSS files in the head. By doing this, when the HTML is loaded, the browser doesn’t need to load the CSS but can render it right away.
This is a pretty good acceleration trick that few people know. Those who want to learn more can read this article: Put CSS in the head — render time reduced from 378ms to 225ms).
Since the web only has static HTML, no JS is needed to render, so the JavaScript file is left at the bottom, adding the defer tag. This tag makes it easier for the browser to render HTML first before running JavaScript.
3. Cache everything
Upon closer inspection, you will see that the resources such as images, CSS, and JS all have head cache-control = max-age, which means the browser will cache these resources for 20 years.
Therefore, when reloading the page, the browser does not need to reload this image, CSS, and JS. Both heavy server support while increasing download speed. What a double job?
Is it difficult to make a website like Amazon/eBay?
Regarding the backend, I don’t dare to talk about the difficulty!
To back-end a system with billions of users like Amazon or eBay, we need to design a high-scale architecture, not from the webserver to the coding, and the SQL query must be optimized little by little.
However, the front-end part is quite easy to implement; just follow the guidelines in the article to finish:
- Optimize page load size (from images to CSS, JS)
- Limit the use of libraries to reduce the amount of traffic to load
- Add CSS to the head; unnecessary JS leaves the page footer.
- Cache everything
These are not my self-test or cut out, but are shared by Google in the Web Performance section!
Conclusion
It turns out that making a website at the speed of light is not that difficult either!
