A Primer on Optimizing Your WordPress Site’s Page Speed Insights Score

In today’s fast-paced digital landscape, website speed can make or break user experience, affecting everything from bounce rates to search engine rankings. This holds particularly true for WordPress sites, often loaded with plugins that can inadvertently slow down performance. In this guide, we’ll delve into key strategies to enhance your WordPress site’s Page Speed Insights score. From tackling Total Blocking Time to optimizing images and leveraging CDNs, we’ll cover it all. So, let’s roll up our sleeves and dive into the crucial elements that can transform your site’s speed, SEO and user satisfaction.

#1: Total Blocking Time (TBT)

Use Lighthouse / PageSpeed Insights to identify the scripts that are blocking the main thread. On most websites, the largest performance hit comes from loading a lot of scripts that block the main thread. This is especially true for WordPress sites, which tend to have a lot of plugins. The main thread is the thread that renders the page. If it’s blocked, the page can’t render until the script is loaded and executed. This is bad for performance, and it’s bad for Core Web Vitals.

Here’s the first diagnostic you’re interested in:

Our goal is to have as little code blocking the main thread as possible. To accomplish this we need to try using the async and defer attributes with every script. These attributes can sometimes interfere with the operation of the script, so they need to be tested carefully. async will ensure that the script runs outside of the main thread. Defer will wait until the document is parsed before running the script. Usually it’s best to try defer first, and fall back to async if that causes problems.

How do we apply these attributes?

  • If it’s in our own code, as of WordPress 6.3 we can pass array( 'strategy'  => 'defer' ) (or array( 'strategy'  => 'async' )) as the final parameter of wp_enqueue_script. (If you’re not using wp_enqueue_script to include all of your scripts you should be!) See https://make.wordpress.org/core/2023/07/14/registering-scripts-with-async-and-defer-attributes-in-wordpress-6-3/
  • If it’s in code from a third party plugin, we can still do this – you just need to run wp_dequeue_script first, and then re-enqueue the script with your desired loading strategy.
  • Many websites rely on Google Tag Manager to load scripts for them. If you’re using GTM, scripts which have been set up correctly are loaded async by default, but it may be possible to improve performance further by adjusting them to run on the trigger “After Page Load.” More importantly, sometimes custom scripts will be added in GTM without async or defer – in which case you should fix that.

Are there exceptions? When should we not use async/defer?

Yes. Don’t defer a script that is required to render content above the fold! These need to load earlier, rather than later, or else your LCP (Largest Contentful Paint) will suffer.

#2: Optimize images

Images are a vital component of any website, but they can be a significant contributor to slow loading times if not optimized properly.

For a theme developer, the core techniques for optimizing your images are pretty simple:

  1. Size images properly. Don’t serve images with large dimensions unless you really have to. Sending all that extra data over the net makes a big difference, especially on mobile. CSS media queries can be used to send cropped/optimized versions of images for small viewports.
  2. Compress images. Convert them to PNG, JPEG or WebP and apply the compression settings available in your image editing tool.
  3. Use lazy loading if the image loads below the fold: <img src="image.jpg" alt="My Image" loading="lazy">
  4. Avoid loading the actual image when you don’t need to, and load a smaller thumbnail instead. The main function you’re interested in here is get_the_post_thumbnail (https://developer.wordpress.org/reference/functions/get_the_post_thumbnail/) along with add_image_size.
  5. Declare height and width explicitly when you can, this will impart a small speed boost to page parsing.

#3: Use a CDN

If Command Media is hosting your website we’ve already sorted this one out for you.

If we’re not, we recommend WP Engine’s hosting for a variety of reasons, but a big one is that they use CloudFlare’s premium tier of service as their CDN. This includes support for CloudFlare Polish, which will automatically compress your images and serve them as WebP, which is usually the fastest image format (and Google’s favorite).

You can also set up CloudFlare yourself, it’s pretty easy. The free version is okay, the paid version (with CloudFlare Polish) is $25/mo and better.

#4 Other Techniques

These are less common causes of a slowdown on a WordPress site but they can still be important.

  • Server-Side Optimization: Server configuration and optimization can significantly impact PageSpeed. The main diagnostic you want to use for this is TTFB (Time To First Byte) – if it’s more than 1 second, you should try to improve it. You should look at factors like choosing a reputable hosting provider, employing server-side caching mechanisms, testing the speed impact of individual plugins by disabling them, and ensuring your PHP code is written to best practices.
  • Minify CSS and JavaScript: Minification involves removing unnecessary characters, spaces, and line breaks from CSS and JavaScript files. This reduces file sizes and improves loading times.
  • Leverage Browser Caching: By setting appropriate caching headers, developers can instruct browsers to store static resources locally. This reduces the need to fetch resources on subsequent visits, resulting in faster page loads.
  • Prioritize Critical CSS: Critical CSS refers to the styles required to render above-the-fold content. By identifying and including only these essential styles inline, developers can ensure that the initial rendering of the page is fast.

In the ever-evolving realm of web development, optimizing page speed is a continuous journey. By implementing the techniques outlined in this guide, you’re taking a significant step towards delivering a lightning-fast user experience and improving your all-important PageSpeed Insights score. Happy optimizing!