Easily measure the load time of a web page — Web console
A long load time to display your web page may unfortunately frustrate the user who will leave the website (the maximum waiting time tolerated is estimated to 4 seconds approximately). Even before landing on your page, the user has to find your website and Google Bots will tend to reference it better if the loading time is below 2 seconds.
It means the loading time of a web page is a critical feature.
There are various ways to measure the load time of a web page. For example:
- the console in the browser
- on-line websites
- browser plugins
- specific tools measuring loading time
We will use framasoft website as an example. Framasoft promotes Free software in France.
This first article will introduce “the console in the browser”, other ways will be detailed later on.
This very powerful (but also very complex) tool allows a very precise measure of the loading time by detailing each request/response within the page (Including Javascript ones).
We will see developer consoles in browsers Chrome, Firefox and Edge.
Moreover, I am using an optical fiber network so results will be faster than with a Smartphone with EDGE network for example.
- Chrome
To access the console open Chrome and click on F12. The following console should appear at the bottom
Then, click on Network, select the check-box “disable cache” and process the search of the page tested, all data will be displayed.
You should see a result as the one in the screenshot below.
The total loading time is available at the bottom of the screen, “Load: 1.96” in red in this case.
Easy no?
- Firefox
Just like with Chrome, we access the console [by pressing ‘F12’]
Then, click on Network notice that it is not possible to “disable cache” just like we did before with Chrome. When we measure the loading time of a web page, it is important to empty the cache in order to not have any previous data remaining. This would distort the loading time (especially if your page contains images). One solution is to use private browser.
After going in private navigation mode, reopen the console, then click on the Network tab and execute the search of the tested page; all the image data is now loading.
You should have a similar view to this picture:
The total load time of the page is at the top of the screen, which is “1.40s “ in this case. We can see that the Firefox browser has loaded the web page 25% faster.
To show the importance of the cache, here is the reloaded page (which includes data in the cache)
0.9s with the cache compared to 1.4s without the cache, this is 35% faster but results are distorted.
- Edge
Same thing than other browsers. We click on F12 and this screen will be displayed
Simply click on Network do not forget to clear the cache by clicking on the button
, then load the page, and all data should load in the same way as shown below
The total load time is at the bottom of the screen, which is “Load : 1.63 s” in this case.
- Conclusion
The use of the console for measuring loading time of web pages is one of the most accurate methods. It allows to distinguish the different elements which compose a Web page, including JS data that is more and more part of today’s websites with the democratization of material design.
- More information
