Want to see how long your web page loads? Want to see what areas are causing the most slowdown? Want to have a tool that is free to do this? Well then you are in luck because Google Chrome has this network monitor feature that gives you a waterfall view of the load time and an audit view to give you a report of the problems. In this blog post, I am going to show how to find this area within Chrome, how to run a simple test, how to run a hard refresh, what all the columns mean, how to read the waterfall report, and then how to take your findings and bake that into your SEO strategy. Let’s begin.
Open up Your Site with Inspect Element
I’m going to use the homepage for my site, but you can use any page you want. With your mouse, you want to right-click and look for the section that says inspect.
As a note, you need to click somewhere on the page to open this up. From there, you want to click on the inspect button, so you are then looking at the code of your site. From there, click on the network tab which is where we are going to run our test.
If you want to change the view, you can click on the three dots that are in our inset element panel. I like moving my look either to the left or right of the view so I can get a better view of what is going on with my webpage. Those three little dots are to the right of the audits tab at the picture above. I clicked on the network tab to view this report. If you don’t see anything, you need to click on the refresh wheel.
Hard Refresh
The picture above was from a typical refresh. That means that I hit the refresh button while on the network tab to see the waterfall view of my site. The problem with just doing this is that I might have to cache on my site that means it’s not an accurate waterfall view. To get the full view, you need to do a hard refresh. The command to do this in Windows is to hit CTRL + SHIFT + R to do this action.
How to Read the Waterfall View Report?
With the hard refresh performed, we now want to check the data. The first things that I look at are how long it took for my page to load. This is where the red number is at the bottom. For my site, it says that it loaded in less than one second with a reading of 727 milliseconds. As a note, I rerun this at another time, and it was 1 second, so it’s more of a guideline. There are many factors why the load times will be different, but this is supposed to be directional for viewing purposes. The load time is always going to be different every time.
Name
This is the name of the file that was loaded into the browser when it opened. It starts with the main webpage and then the rest of it will cascade after that.
Status
This represents if the asset was loaded correctly or incorrectly. 200 means it is excellent and a 304 is a cached version. This only happens when you don’t do a hard reset, so you should not see a 304.
Type
This tells us the type of the file that was loaded into the browser. You are going to see things like text HTML, CSS, javascript, and more.
Initiator
This talks about how something was loaded. Other is simply because we put in that URL, but the rest of it says parser. This means that every line of code that had something would be loaded in.
Size
This tells how large that individual file was when the browser had to open it.
Time
Explains how long it took to load this personal file.
Waterfall
This shows us in a visual how all of our elements were loaded on the page. The bigger the stretch, the longer it took for it to load. You can actually hover over each element within the waterfall to see more information on why something took (X) amount of time to load. This is a pretty good area to look at places to drilldown and focus on.
How to use this Data for SEO
Now that we know how to run the report and view the data, we want to see how this can help our site for SEO. The first thing that I would look at is the size of any images that are in waterfall view. Compressing images is one of the easiest ways to speed up your site for your users which will help your SEO. If you notice some of the bars of the waterfall are very big for the image, you can hover over the image and see why it’s so large. Chances have you uploaded the image as the original file size but shrunk it down in the CMS. That means that the original size has to still be loaded.
Once you make any changes to the pictures, you can push those updates to your server and create a hard refresh. You can then see if changing any of those image types improved the load time for the page.
If you are good with coding, you can even try combining CSS files which means less code for the browsers to have to read through which will improve the load time for your site and your users.
Audit Section
If you want a clearer view on what you need to work on, you can click on the audits tab to see everything that you need to work on. Here is the picture presented below. You need to rerun this section to see where the errors lie on your page.
Once I click on the reload page, I have presented my findings below. Again, I can then pair this with my waterfall audit in the network tab to figure out where the issues are and fix everything to make my page load faster. The things that I can see are things in red and stuff in yellow. Red means that they are more significant problems on my site while yellow means that they are less important to get fixed for my website.
Conclusion
The best part about this is that this gives a quick view into the performance of your site when you need. Unlike third-party tools, you can use this to test the load time of a page that is in staging. This works great if you are testing a new feature like a 360 view of your images on your page and you want to see what they will do to your load time on your page. You can also sort whatever you wish by clicking on the columns. You can sort by the waterfall, the size of the file, and more. As a note, I don’t believe there is a way to go back to the original view, so you will have to create hard refresh.
If you are looking for specific steps to take, I wrote how to minify your JavaScript here.