Last week I delve into web sustainability which led to running several tests using Google’s PageSpeed Insights tool. As I knocked out one suggestion then the next I was surprised how simple delivery enhancements can speed up even the leanest website.
Websites are heavy, even a simple blog post can easily pass 2 megabites just displaying text. As I drilled down the path to a score of 100 the suggested fixes turned into a game. By removing Open Sans as a web font I saved 300ms. It’s a secondary font on this theme and I didn’t even perceive the swap for my browsers default of DejaVu Sans. Here are some of my favorite enhancements.
- Setting font-display to swap can save a few seconds. Fonts can be render blocking until the whole page has downloaded. Yikes.
- Fewer calls to third party servers really do make a noticeable difference. Even Jetpack which leverages caching and a content delivery network adds unnecessary weight to a page.
- After purging every unnecessary bit from this theme some of the pages load in less than a second.
Caching is easy
A few years ago I shrugged off caching, I always tried to keep my projects lean so adding a plugin to scrape off 500 milliseconds didn’t seem important. However, when you add up those extra kilobytes and half seconds over the total viewership of a website the improvements can be easily perceived.
- CSS and HTML can be cached allowing for the DOM to fly by
- I also gained a new respect for lazy loading images
Enough ranting, here’s some screenshots.
For kicks check out my PageSpeed Insight results for this page.