In talks discussing performance, speakers will often talk about what the “weight” of a website is. What does that actually mean? And how do you find it?
How big is the page load?
When we talk about “How much does this website weigh?” we tend to mean “How big is the page load”? This will differ across network connections, the device’s ability (speedy computer or slooooow computer or phone), cached assets, or even the screen-size, if you’re lazy-loading assets and only loading things in the viewport right away.
How to measure a website’s weight
You can measure a website’s weight in your browser right now, without any special tooling. Using Chrome DevTools, in particular the Network tab, you get a nice summary of how “big” the website is. Here’s what the network tab on Twitter looks like:
Note: You’ll need to open devtools before you go to the website and have the network tab open. Otherwise, you’ll need to refresh to get new data, and at that point, you’ll (hopefully) have some cached assets. You can also clear your cache, of course, to see how the size/speed changes.
At the bottom of the tab, you’ll see a summary of how many requests and how much data was transferred. When people talk about “Weight” they often mean that “transferred” number, because if, for example, you’re on a slow connection, your ability to download that data has a significant impact on your experience of the site.
That summary has other great data, including the “Finish” and “Load” times, which are, you know, time, so will differ with connection speed. That Finish may get longer on sites like Twitter, where content is being loaded in while you have the page open (“5 new tweets!”). Additionally, you can read the DevTools docs to see how to look more into individual assets, so you can improve your site’s performance.
This is one way to measure the “weight” of a website. You can also use tools like WebPagetest to have them run a performance test on a site (if it’s public).