If your website isn’t highly performant people will get annoyed and move on. Page performance is part of the total package of a quality website.
Below is a simple strategy with some accompanying tactics to improve your website performance over time. There are a multitude of posts listing individual tips on how to speed up your site, but improving performance is a multi-step process affecting many pages on your site. If you’re lucky enough to have thought of performance when building your site, you’ll be in a stronger starting position than others. The technique below will work whether your site is currently slow or fast.
Without further ado, here are the steps to improve your site performance:
- Learn: Determine the gap between your site and an ideal site
- Strategize: Pick the pages and metrics to focus on
- Implement: Close the gap between your site and an ideal site by improving your chosen pages
- Grow: Track your progress over time
Learn
Below is a list you can use to see how close your website is to the Solid Digital ideal. The below is, of course, an opinionated list. The opinions are based on our extensive experience and observations.
The more of the questions below you can answer in the affirmative, the better you’re doing:
- Caching
- Is page caching implemented?
- Is a DB object cache implemented?
- File assets
- Are JS and CSS assets minified?
- Are JS and CSS files kept separate to allow browser caching optimizations via HTTP/2?
- Is a CDN used?
- Are emojis, dashicons, and comment embeds disabled?
- Are important assets preloaded?
- Is DNS prefetched?
- JS
- Is JS delayed on most pages for most scripts?
- Is JS deferred on most pages for most scripts?
- Which JS files are excluded from delay/defer?
- Is jQuery migrate disabled?
- Is Google Maps disabled everywhere above the fold?
- Are there any scripts and plugins only running the pages necessary?
- Which sliders are used ATF?
- CSS
- Is unused CSS removed from ATF?
- Images
- Are images served as AVIF or WebP (next-gen formats)?
- Are image file sizes small/optimized?
- Do all images have width and height attributes?
- Are images served responsively?
- Fonts
- Is the total size of all font files loaded less than 100kb?
- Are font files stored directly on the server?
- Lazy loading
- Are below-the-fold images lazy loaded?
- Are below-the-fold background images lazy loaded?
- Is lazy loading enabled for iFrames/videos?
- Plugins
- Is a caching plugin activated?
- Is a performance plugin activated?
- Are the total number of activated JetEngine plugins smaller than 4?
- DB
- Is the total number of revisions in the DB below 100?
- Is the total number of drafts in the DB below 100?
- Is the total number of trashed posts in the DB below 100?
- Are there any orphaned meta in the DB?
- Are there any spam or trashed comments in the DB?
- Are there only 3 or fewer revisions allowed?
- Is the total number of redirects stored in the DB small?
- WordPress
- Is rel shortlink disabled?
- Are pingbacks disabled?
- Are WordPress global styles disabled?
Strategize
The next step is to review your site and pick the pages that are both in need of optimization and valuable to you. Google Search Console (GSC), Google Analytics, and your knowledge of your site are the tools recommended for picking the pages to focus on.
The reason Google Search Console is such a powerful tool is that GSC is that GSC track the real experiences of site visitors across the pages of your site. GSC then summarizes these experiences.
I generally start by viewing the “Page Experience” sections in GSC. Explore the “Core Web Vitals” and “Mobile Usability” sections. Review the URLs that are failing or need improvement. Ask yourself which of these URLs is the most valuable to you? You should use Google Analytics traffic data in combination with your knowledge of how the site works. In general, the more important a page is to conversion or the more traffic it gets, the more you should consider focusing on it.
Don’t stress about finding the exact correct starting URL. With WordPress, you will generally find that improving one page often helps the entire site. Many of the components used in a single page are used across the whole site.
Implement
We are going to use mostly two tools for making our fixes. First, we’ll leverage PageSpeed Insights for some real-time feedback on how we’re doing. Second, for WordPress sites, we generally rely on Perfmatters, a page speed performance plugin.
With a URL to focus on in hand, run a PageSpeed Insights report on the URL. PageSpeed Insights has a wealth of useful information. The least helpful datum is the actual score. In general, the most helpful items are listed under the “Opportunities” section. Look at the “Metrics” section to see which items are failing. Focus on the failing item reported in the “Why URLs aren’t considered good” section in GSC. For example, if GSC is reporting Largest Contentful Paint (LCP) issues, then filter the “Opportunities” in the PageSpeed Insights to LCP.
Review each suggested item and try to improve it. You’ll notice that there are certain items that are easier to improve than others. For example “Eliminate render-blocking resources” is a common suggestion. Using Perfmatters, you can delay a lot of JavaScript until user interaction, but you’ll have a hard time delaying jQuery without making your site appear broken.
In general, focus on the failed items in PageSpeed Insights that correspond to the failed items in GSC.
One of the most powerful ways to improve user experience is to delay JavaScript. Using Perfmatters, there are two approaches to delaying scripts. You can exclude all scripts from being delayed, or you can delay only specific scripts. You’ll find that if you’re just getting started on a site, it’s more efficient to select “Delay All Scripts.” You can then manually add any scripts you don’t want to delay. If, however, you are working with an established website, then you’ll probably dramatically break the site if you select “Delay All Scripts” and you’ll want to select “Only Delay Specified Scripts” instead. Perfmatters has great documentation, and they have a page listing how to target specific common scripts for delay.
In general, we recommend using Google Tag Manager (GTM) on your website. GTM is a powerful way for marketing teams to control the scripts and pixels included on their websites without having to rely on an IT department to deploy code updates every time a new script or pixel is added. The downside of GTM is that it can often drastically slow down your site unless you delay GTM from loading. If you are including Google Analytics via GTM, then delaying GTM might impact your GA numbers. In general, I’d say that, while seeing your numbers dip can be scary, delaying GTM will make your GA number more realistic. If you see a drop in traffic when GTM, and thus GA, is only included upon first user interaction, then much of your traffic is not real. What sort of actual website user doesn’t interact with a page at all?
Grow
You should track how your page performance improves over time. GSC will track the number of good, needing improvement, and failing pages over the last three months. Since, hopefully, your site is going to last longer than 3 months, you should track your page performance data yourself. The simplest way is probably to note the percentage of good URLs once a month or once a week and keep these numbers as a list in a spreadsheet. There are paid tools, such as Debug Bear, you can use to track your data over time, but most of these paid tools are usually overkill. Simply getting into the habit of checking on your GSC stats once a week, digging into the causes of failing URLs, and attempting to fix those URLs will keep your website humming and your users’ experiences as good as possible.
Follow The Plan
You need a good plan to ensure the time you spend on trying to improve your website get you the results you want. We suggest a four-part approach:
- Learn: Determine the gap between your site and an ideal site
- Strategize: Pick the pages and metrics to focus on
- Implement: Close the gap between your site and an ideal site by improving your chosen pages
- Grow: Track your progress over time
Initially, the process of improving site performance may seem daunting or very complex, but if you stick with our clean plan, you’ll be heading in the right direction soon.
