When you are looking at houses, it is usually easy to see which ones have structural damage. The porch roof is leaning unnaturally, or the keystone above the window is missing. We have trained our eyes to see structural damage in houses, but it is harder for us to see structural definiencies in our web sites. What web diagnostics tools do we have to avoid the equivalent of sagging porches and leaky roofs?
A simple method availabe in most modern browsers is the analysis of network activity that a page load on your site generates. It can show us two important metrics: the total page weight and the number of HTTP requests.
The screenshot below shows the network analysis performed in Firefox 25.0 for Mac. I emptied the browser cache before loading the page so that all the resources would load from the server. I then turned on the network analysis pane (Tools > Web Developer > Network) and loaded the page. The browser gives me a list of files that were loaded and calculates the total page weight:
Let's look at three common culprits leading to page weight bloat and HTTP request balooning and suggest techniques for improving the situation.
Any image that is greater than 200-300 Kb in size is likely too big or isn't properly compressed. It is generally a very bad idea to load a big image (that may have come straight from your high-resolution camera) if you only need to display a small thumbnail. I recently came across a site that loaded a 2 megapixel photo that weighed 1.2Mb only to resize in code and display it at a size of 300 by 200 pixels. Loading a properly sized small image instead would have shaved over a megabyte off the page weight.
Lean pages load faster, reduce the need for powerful servers, and are simpler and therefore easier to maintain. Watching the weight of your pages is a worthy exercise. If you would like to get more ideas about making your web site lean or if you would like OIT to help you with your analysis, you can always ask for a free web consultation.