At this point, nobody will disagree that page speed matters; it’s a key component of optimizing a user’s experience on your site. There are lots of tools available to analyze page speed and offer best practices in both performance and SEO. But they fall short when it comes to prioritizing those results.
Sometimes they overload recommendations or lack clarity on next steps. Over the years, I have analyzed hundreds of sites and have come up with a two-tiered ranking system for optimizations:
Tier I: Deal-Breakers
The deal-breaker tier. If a site doesn’t have these, performance will continue to suffer no matter what else you do.
Browser Caching / Expires Headers / Cache Static Content
Site-wide assets that have to be re-downloaded on every page load kills performance. It’s basically loading a site for the first time… every time. If you’re lucky to get return visitors and browser caching is not in place for images, they are all downloaded and processed again. If you’re getting poor scores from assets out of your control, analyze the 3rd party scripts being included on your site and eliminate any unnecessary.
Image Compression and Optimization / Page Size
The larger the size of the download, the longer it takes. A no-brainer. Optimize and compress your images.
Time to First Byte (TTFB) / Page Caching
The vast majority of websites have some kind of server-side processing. The time it takes for your server to handle the request and display something meaningful is very important to users. Several factors can contribute to this best practice (load balancing, CDNs, etc.), but ultimately, server-side page caching will improve this dramatically. Instead of having to process the request, compile the code, and build the HTML output, page caching allows for servers to just process the request and return cached HTML. That’s much faster for your users. It also reduces the load on your server(s), which saves energy. And trees. ???
Here’s a more in-depth guide to improving server response time.
Tier II: Upgrades
Tier II topics help take site performance to the next level — pretty much the highest level. When combined with Tier I and other Tier II items, the sites built from the ground-up with render-blocking resource handling position themselves to maximize performance scores.
Render-blocking Resources / Critical CSS / Async CSS & JS
This is a borderline Tier I best practice. The reason I push it down into Tier II is that it is a relatively “newer” best practice and because we’ve achieved sub-one-second page load times before this was ever implemented. If you follow all Tier I and most Tier II best practices, you may get great performance without this upgrade. Eliminating render-blocking resources with a critical CSS and asynchronous CSS & JS loading setup takes it to the next level. Ninetieth percentile.
Unused CSS & JS (Code Coverage)
Make your assets smaller, so download times are faster. It’s as simple as that.
This is such an easy win; there is little to no reason why any site should not be utilizing a global content delivery network (CDN). Downloadable assets routed through servers geographically closer to each user is logical.
Newer technology that has improved upon an old standard is readily available. Use it and appreciate it. And don’t forget to optimize for it.
While you may see significant gains from implementing one or two of the critical recommendations, others left unimplemented may continue to bog down your site. For example, great improvements can be made by optimizing and compressing images, but a site will still suffer in performance if it’s not caching static content and/or implementing some kind of page caching.
It is very important to understand that outstanding site performance is attained from a large combination of best practices. For a more in-depth look at page speed, check out our Ultimate Guide to Page Speed. If you haven’t learned about what Core Web Vitals are, we recommend reading our article as site speed optimization is very closely relevant to what CWV measures.
Nice post Andy!