In my last article, I demonstrated how improved performance and a lower PageSpeed Insights score were accomplished by removing unnecessary external JavaScript and CSS requests. YepNope was also used to manage the asynchronous loading of external requests.
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.
To follow this advice, I separated the ATF CSS from the BTF CSS. The sorting took several trials as the critical content should load first. For the Velocity site, it’s essential that the O’Reilly logo, Velocity logo, navigation, location, date, and descriptive introductory content loaded first so the user recognizes the destination and immediately receives a feel for the conference’s goals. Once these styles were inlined in the <head>, I put all the BTF styles in an external resource on our CDN and asynchronously loaded it with YepNope before the JavaScript.
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.
Final touches
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.
Final Results
From when we started in Part 1 to our endpoint in Part 2. We’ve made some excellent progress.
Takeaways
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.
Cover the Basics & Get the Tools
The O’Reilly Media web group monitors the daily and weekly performance of the various O’Reilly web properties with tools like Keynote, WebPageTest (WPT), and PageSpeed Insights. As a site is produced, the web team picks the low-hanging fruit (see how we started): image compression, spriting where possible, CDN usage, lazy-loading images, and moving any Javascript to the end of the body. Also, Yepnope.js was used for managing asynchronous loads.
Note: All WPT tests were ran with test location: Dulles, VA using Chrome as the browser and a Cable connection.