What's causing this?
Several factors conspire to produce bottlenecks, block page loading, hamper content delivery and prevent a user from interacting with the DOM.
Take a look at HBO's content breakdown:
- ...a 339KB CSS file
- ...a 394KB JS file
- ...and 739KB of images
Comedy Central has a completely different content breakdown:
- ...a 176KB CSS file
- ...a 646KB JS file
- ...and 219KB of images
Comedy Central has a "base.css" stylesheet that loads basic page elements quickly. Later, a larger stylesheet fills in the rest of the page styles.
Meanwhile, HBO has one, quite large, CSS file that appears to be targeting almost every device screen size one can think of.
What's the takeaway?
As designers, we want to make things that are pleasant to look at. However, we are shoving these things across data servers and cloud containers to myriad devices in myriad locations.
I'm not advocating the sacrifice of aesthetics over performance! I am, however, advocating using this type of tool to pinpoint exactly where your performance hits exist.
When was the last time you waited over 3 seconds for something to load and didn't think something was wrong?