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.
JavaScript Execution Time / 3rd Party Scripts
As JavaScript continues to get more popular, managing it has become that much more important. Create an environment where the assets served are only what is needed or as close as possible. Additionally, create check-ins with your analytics team and remove any 3rd party scripts no longer in use or needed. While Google Tag Manager is a very useful tool, it is easy to set and forget various tracking/analytics scripts that place a burden on site performance.
Unused CSS & JS (Code Coverage)
This goes along with page size in Tier I, but often overlooked as a consequence of the entire web application. Generally speaking, global CSS and JavaScript files are created for an entire site or theme, including all styles and functionality for every template. These files are then referenced on every page of the site. This methodology inherently creates bloat. There’s no reason to include style and validation logic for a form on pages where the form does not exist.
Minification
Make your assets smaller, so download times are faster. It’s as simple as that.
CDN
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.
HTTP2
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.
Caveats
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!
Thank you!