News teams often compete to break the story first. We think they should also compete on being the first to load their website. Let’s apply our web performance skills to a real world example: which news website has the best performance?
Let’s solve this question by loading the homepages of some large news sites. A sampling of Alexa’s Top Sites gives four test candidates: Google News, CNN, The New York Times (NYT), and Fox News. Take a look, which feels fastest to you?
We need to decide WHAT and HOW to test before we can answer this question. These are just a few of the possible timing metrics we could measure:
- DOM Ready: The HTML document has been parsed, but all assets have not been loaded yet.
- Page Loaded: All assets referenced by the HTML have been loaded.
- Layout Shifts Stopped: Scripts often change the page as delayed content is loaded. This is measured as Cumulative Layout Shift.
We will pick our winner based on when the page’s layout stops shifting. This measurement is important because users perceive layout instability as a page that is still loading. Also, news sites are known for their egregious, ad-driven layout shifts. We collect the measurements using Chrome on fast(300Mbps) residential internet which is an almost best case scenario.
The winner is clear. There has been some contention between Google and news outlets over Google’s heavy aggregation of news content. Just to rub it in, Google News takes the speed crown with CNN bringing up the rear:
How did Google News so handily beat the others? Performance is a multifaceted problem, but Google relied heavily on one important optimization mantra: Doing less is always faster than doing more.
The total number of resource requests shows how few assets Google News is loading into the browser. Do less, get more speed:
Total transferred bytes shows that Google News is not just putting assets into larger bundles. It is simply demanding less work out of the browser:
The correlation between page performance, request count and payload size is not perfect. For example, the New York Times loads fewer, but larger assets vs the others. This shows that there are many more avenues for optimization than the simple one we look at here.
Google News performance easily beats other large news outlets by just doing less. Before you delve into the complexities of web page performance optimization, always ask, “Should I do this at all?” because the fastest code is the code not written.