The Page Speed Optimization Hierarchy

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:

Graphic illustration of a pyramid showing Tier 1 page speed recommendations on the bottom and Tier 2 recommendations on the top

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.

Andy Schaff

Development Architect
Development Architect

With more than a decade of experience, Andy is a highly-motivated developer who will take on any technology thrown at him. A proponent of well-formed and documented code, page speed techniques, and high attention to detail, Andy is the full-stack implementation specialist and development architect at Portent.

Start call to action

See how Portent can help you own your piece of the web.

End call to action
0

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Close search overlay