After the improvements, I thought it was time to move on but PageSpeed Insights advised there was more work to do.
Here are the WebPageTest results from my last article:
Eyes Above the Fold
PageSpeed Insights has helpful tips on optimizing your CSS delivery. Their rules suggest inlining critical Above-the-Fold (ATF) CSS rather than keeping all the CSS as an external resource. In addition, any Below-the-Fold (BTF) CSS can be deferred until after the ATF content has loaded.
One thing to note is that organizing the CSS this way may give the user a flash of unstyled content (FOUC). On high speed connections, this is hardly noticeable but on mobile, this is more obvious. When handling FOUC, you must decide how much unstyled content is tolerable.
Also, I found some BTF images loading before ATF images. This was an easy fix by lazy-loading those BTF images.
Lastly, I deferred any BTF background images and an external resource that loaded into an <iframe>. I also sliced up an ATF image to speed up its load time. These small changes made little impact but made some improvement to the user’s perception of speed.
From when we started in Part 1 to our endpoint in Part 2. We’ve made some excellent progress.
When I first read about optimizing CSS delivery, I didn’t like the idea of splitting up the page styles and didn’t believe it would make much of a performance difference. However, from this experiment, inlining your critical CSS along with any other small improvements collectively makes a great performance impact. PageSpeed Insights guided me to carefully analyze how the Velocity assets were handled. This further demonstrates that every little bit you can do without and prioritizing what you need can improve web performance and keep your users from walking away for a cup of coffee.
Note: All WPT tests were ran with test location: Dulles, VA using Chrome as the browser and a Cable connection.