Our mandate: dramatically improve site performance on Gawker Media sites (Gawker, Jezebel, Deadspin...). Try to deliver readable pages to most users within 1 second.
A great way to begin any web performance effort is by analyzing waterfall charts. (Webpagetest.org is one fantastic free tool for viewing these)
Let's take a look at one!
144 in total!
Total load time: 23.5s
Scripts • Images • Fonts/Styles
Ad-related requests, mostly. 114 of our 144 requests...
Like most media companies, a large chunk of our revenue comes from ads.
Revenue is used to pay software developers as well as some others involved in the business.
So we need some other way of making money.
So, we can't eliminate these 114 requests right away. Let's focus on our first-party content...
Now we're looking at 30 requests, much more manageable.
(loaded in 18.8s)
23 requests (loaded in 10.4s)
Our script loader, require.js, followed by a 0.94s gap before the scripts it loads start to come in. 1.67s total delay.
3 requests (loaded in 8.4s)
<script src="dependency1.js"></script>
<script src="dependency2.js"></script>
<script src="combined-scripts.js"></script>
<script src="require.js" data-main="combined-scripts.js"></script>
We used the power of waterfall charts to identify some key performance issues to investigate further:
Tools used for this presentation: