A Web Dev’s Checklist for Maintaining Page Speed

A Web Dev’s Checklist for Maintaining Page Speed

Updated on December 1, 2020 to include details on running a page speed audit and new page speed tips, including Core Web Vitals and eliminating render-blocking resources.

It’s obvious to say that all websites need upkeep, but oftentimes they are designed and then left as “good enough.” Collecting dust, attracting hackers, slipping in the rankings. We’ve already gone into painstaking detail about why page speed matters and various levels of guidance for site speed optimization overhaul from novice to advanced. This article assumes you’ve implemented most of those major improvements, at least somewhat recently. If you haven’t, then definitely do start here.

In this post, we’ll look at how to run a quick and dirty page speed audit and target the most critical culprits affecting page speed, as well as basic fixes to help keep the base layer of the marketing stack (infrastructure, page/site speed) healthy.

Infrastructure drives digital marketing. It’s the base of the Marketing Stack.

Running a Page Speed Audit

There are two main tools that I recommend using for page speed audits: Google PageSpeed Insights and WebPageTest.org. You can quickly get an overview of a site’s performance by running and analyzing the results from these programs.

PageSpeed Insights

Google’s algorithms have always been at the center of site performance. They continue to push the bar higher, and with the advent of Google’s Core Web Vitals, the results of their tools will be center stage with clients. We must appease the Google gods, which we have been doing for well over a decade at this point. PageSpeed Insights (PSI) utilizes the Google web tool, Lighthouse, to collect and analyze performance data. PageSpeed Insights puts it all together and provides recommendations for improvements. PSI focuses on the web application alone and does not specifically analyze other environment performance issues.

""

WebPageTest.org

WebPageTest is a solid tool that gives a little more of a top-level view of a site’s performance. It focuses on seven categories: security (new), time to first byte (TTFB), keep-alive, compress transfer, image optimization, static content caching, and use of content delivery network(s) (CDN). It does not dissect a website nearly as much as Lighthouse, but its focus on what I consider Tier I best practices helps establish a great starting point for improvement.

""

Tips for Addressing the Page Speed Audit Results

The topics and subsequent tips below are not an exhaustive list of the page speed audit results, but they are the ones we feel need to be addressed on an ongoing basis to have the most impact on your site. For an in-depth look, check out our Ultimate Guide to Page Speed.

Core Web Vitals

Addressing poor Core Web Vitals (CWV) scores should be a focal point of ongoing maintenance for improving site speed. I’m not going to go into detail about what Core Web Vitals are in this article because we’ve already written about it here. But CWV will become a ranking factor on Google, so it has SEO implications aside from the more obvious user experience implications.

Maintenance Tip: Test, analyze, and address Core Web Vitals scores on a quarterly basis.

Render-Blocking Resources

This page speed checklist audit item is the unicorn. It’s probably the most critical and challenging performance item for a web app. It’s critical because render-blocking resources drastically delay the loading of a web page until said resource is downloaded and processed—it directly impacts a fast user experience. It’s challenging because, for most web applications, it requires a fairly complex system to be implemented.

That complex system involves critical CSS to be generated for every page and all subsequent styles loaded asynchronously. Additionally, it is ideal that all JavaScript is either loaded asynchronously, deferred, or at the bottom of the page’s source code. While that may seem like a straightforward solution, there is a lot packed into those two sentences.

A majority of web applications are built on content management systems (CMS), which come with a whole library of scripts. Plugins or modules are often used to extend functionality, and those also come with their own scripts. All of these have to be considered when implementing a solution, which is why it is much easier to execute on new site builds that properly plan for said solution as a feature.

I recommend researching, planning, and working on implementing a system that eliminates as many render-blocking resources as possible for your web application. It will not be a quick or easy project, but it is necessary for improving site speed scores, including directly affecting Core Web Vital scores. Generally speaking, expect a solution to take anywhere from 20-50+ hours to implement, depending on the complexity of your web app.

Once a solution is in place, keep an eye on the application as additional functionality is added.

Maintenance Tip: Inspect for any new render-blocking resources regularly and try to eliminate as many as possible.
Maintenance Tip: Re-generate critical CSS when changes have been made to above-the-fold styles.

Image Compression

Over time, lots of content gets added, edited, and generally messed with on your site. Content producers upload images, page templates get a facelift, and so on. In the hustle to keep our content fresh, compelling, and published on-time, marketers can easily forget to follow the image compression procedures that we carefully laid out the last time we did a site speed push.

Whatever the reason for the average image size creeping up, if images are not optimized before they go live, or auto-optimized on upload, it won’t take long for your newest content to under-perform.

Maintenance Tip: Test a handful of your main pages quarterly like the homepage, blog hub, services page, products hub, etc., on webpagetest.org. Analyze the results and make sure you address image compression issues.

Identify where and how over-sized images are popping up most frequently, and proactively address them with the folks who can improve their process. Teach your content team how they can optimize imagery for your site. Better still, if you’re on WordPress, implement a plugin that will auto-optimize your imagery on upload. Two of our favorites are EWWW Image Optimizer and Smush.

HTACCESS Rules Overwritten

This may sound like a strange culprit, but it definitely happens. A CMS and/or plugin modifies the local Apache config file (.htaccess), and in the process, wipes out a bunch of browser caching or compression directives.

Maintenance Tip: Be sure that you’re still defining max-age (or far off) expiration times for your static files like images, CSS, JavaScript, fonts, etc.

JavaScript and CSS Bloat

Have you added any plugins to extend functionality lately? More often than not, plugins inject their own javascript and CSS on every page, even if they’re only truly being utilized on a few.

Maintenance Tip: Customize your theme (or app) to remove these unnecessary resources where they are not needed. This can be tedious, but taking the time to limit all plugins to only the uses and pages where they’re needed will add up to improve your performance metrics and enhance your customers’ experience on your site.

3rd Party Scripts

Marketers love their tools. They provide great insights into all kinds of metrics to help make informed decisions, from page views and click-throughs to heat maps and scroll tracking. But sometimes they love their tools too much—and subsequently, have their dev team install a bunch of 3rd party scripts into the code.

With the advent of Google Tag Manager, marketers can even insert some of these scripts themselves, which opens its own can of worms that we won’t get into. We’re big fans of GTM in general for the agility and visibility it brings to marketing teams, but as a developer that knows the value of site speed, you still need to understand all the code that’s going into your site.

Maintenance Tip: Coordinate with your analytics and/or marketing teams who utilize these tools and analyze them carefully. Be picky about what you are running on your site. Purge scripts that are no longer needed (or no longer work).

Updates to Your CMS, Plugins, Extensions, and Modules

Regardless of your CMS, you should be keeping up with core updates for security patching and enhanced functionality. Sometimes, the updates are improvements to code efficiency. Plus, you don’t want to fall so far behind that when you finally address updates, they are of the large, complicated, headache variety. Iterative updates for the win!

The same goes for any plugins or extensions.

Maintenance Tip: Be vigilant about CMS updates. Keep ’em small and painless. If a faster site wasn’t enough incentive, you don’t want to be unknowingly advertising for hackers, right?

To Recap

This should be a fairly simple, manageable list to get your site’s performance back on the right track — and, most importantly, convert more leads. I would suggest reviewing once a month, and if you haven’t made any investment in site speed before this, definitely check out Portent’s Massive Guide To Page Speed as a starting place.

Pssst: Portent does page speed optimization. Give us a call.

The post A Web Dev’s Checklist for Maintaining Page Speed appeared first on Portent.