Explore

Speed Optimization

Have a slow WordPress site?

This tutorial has been a work in progress for years.

It covers core web vitals and fixing specific items in the new

PageSpeed Insights⁠

(PSI) using things like defer/async, delaying JS, and font optimization.

It also covers new optimizations found in Elementor, Divi, Cloudflare, LiteSpeed, SiteGround Optimizer, FlyingPress, WP Hive, and other tools.

You name it, it’s here. If it’s not, drop me a comment with your suggestion.

Testing Tools

Tools to learn what’s slowing down your website.

Google Page Speed Test

⁠

Google PageSpeed Insights⁠

– Since Google PageSpeed Insights have more accurate metrics that measure load times, this is the primary tool you should use. If your scores are lower on mobile than on desktop, it’s partly because PSI uses 3G.

Mobile Page Speed Test

Think With Google uses a 4G connection to test mobile load times and is an excellent way to test load times. (PSI uses 3G).

Google Search Console Core Web Vitals

Although the core web vitals report shows core vitals for your entire site. It does not give specific recommendations.

⁠

Web Vitals | Articles | web.dev Essential metrics for a healthy site web.dev⁠

⁠

GTmetrix

The GTmetrix Waterfall chart can be used to identify specific elements that need to be optimized like CSS, JS, fonts, images. Similar suggestions from Page Speed Insights.

⁠

GTmetrix | Website Performance Testing and Monitoring GTmetrix is a free tool to test and monitor your page's performance. Using Lighthouse, GTmetrix generates scores for your pages and offers actionable recommendations on how to optimize them. gtmetrix.com⁠

⁠

KeyCDN Performance Test

The KeyCDN Performance Test can be used to measure the time it takes to access the internet in many global testing locations. If your hosting is slow, this is a good indicator.

⁠

Query Monitor

Slow plugins, queries, and other things that slow down your site can be identified with the Query Monitor plugin.

⁠

Query Monitor – The developer tools panel for WordPress Query Monitor is the developer tools panel for WordPress. wordpress.org⁠

⁠

Page Speed Test Localhost

Open up Chrome > Right Click > Inspect > Lighthouse

Chrome Dev Tools

Find your largest CSS/JS files under Sources → Coverage, third-party domains (Sources → Page), and other performance issues like when fonts are preloaded but aren’t being used (learn how to open Chrome Dev Tools).

CLS Debugger

View a GIF of your site’s layout shifts (CLS) on mobile/desktop.

Wordfence Live Traffic Report

View bots hitting your website in real-time (great for checking whether bad bots are hitting your website and consuming CPU). Uninstall Wordfence when you’re done since the plugin increases CPU.

⁠

Real-Time Live Traffic - Wordfence⁠

⁠

WP-Optimize

Clean your database of unused tables left behind by old plugins you uninstalled. Some plugins/modules add bloat especially when they have to process data (

Rank Math’s Analytics module⁠

) which you’ll see in

WP-Optimize⁠

WP Hive

Deep dive into WordPress plugins, discover the best plugins. Convenient, insightful analytics on your WordPress plugins.

⁠

WP Hive - A Better WordPress Repository Find better plugin insights for all WordPress plugins, discover new plugins or compare WordPress plugins side by side. Experience a reimagined WordPress repository. wphive.com⁠

⁠

Reviewing plugins is a very time-consuming task. It is essential to have a guideline to follow to ensure all plugins are tested in the same way.

WP Hive has developed a framework to review plugins, ensuring all plugins are evaluated in the same way.

This will allow you to compare plugins against each other, moreover will enable you to compare which Plugins are suitable for your website.

WP Hive is a must-have tool for every WordPress user.

WP Hive shows a plugin’s impact on memory usage + PageSpeed Insights:

Download the chrome extension here

⁠

WP Hive | A Better WordPress Plugin Repo - Chrome Web Store Show plugin report in WordPress.ORG chrome.google.com⁠

Core Web Vitals

There are 3 main parts to core web vitals: LCP, TBT, and CLS.

Largest Contentful Paint

Find your largest contentful paint element in PageSpeed Insights and optimize it. This is usually a background image showing across your website. Just like you would optimize any image, you would make sure it’s compressed, has proper dimensions, uses WebP, served from a CDN, preloaded, and excluded from lazy load since it loads above the fold.

⁠

Largest contentful paint wordpress element - background image

⁠

Total Blocking Time

View files causing blocking time in your “avoid long main-thread tasks” and “reduce impact of third-party code” report. This is often caused by JavaScript either on your website or from third-party code. Hosting third-party code locally (fonts, analytics, etc) and deferring + delaying JavaScript should help. You can also try reducing JavaScript with minification, asset unloading plugins like Perfmatters, and avoiding JavaScript-heavy plugins.

⁠

⁠

Cumulative Layout Shift

Use

Google’s layout shift debugger tool⁠

to view a GIF of shifting elements on your website. It’s usually caused by fonts, animations, CSS, images and iframes without specified dimensions, or not reserving space for dynamic content (i.e. advertisements).

CSS – most cache plugins have a setting for asynchronous CSS (optimize CSS delivery in WP Rocket or load CSS asynchronously in LiteSpeed Cache). Try disabling it completely, making sure

it’s working⁠

, or set a fallback critical CSS using a

critical CSS generator tool⁠

Fonts – if PSI recommends “ensure text remains visible during webfont load” in your report, it’s probably from FOIT (flash of invisible text). To fix this, host fonts locally, edit your font’s stylesheet, then add the

font-display:swap property⁠

. Many plugins and page builders have a font-display: swap setting (Elementor, WP Rocket, LiteSpeed Cache, etc).

Images/iframes – specify dimensions (WP Rocket + LiteSpeed have a setting to add missing image dimensions) or manually view your image’s HTML and add a width/height.

Animations – if using animations, use the CSS transform + translate properties to use animations without causing layout shifts, but I don’t recommend them in the first place.

Ads + dynamic content – reserve space for ads and other dynamic content by specifying dimensions using

div wrappers⁠

. Otherwise, they can cause other content to move around.

Hosting

Hosting is the

#1 speed factor⁠

, but everyone’s an affiliate (including me) and there are shady things happening in Facebook Groups.

Many Groups like WordPress Hosting and WordPress Speed Up are moderated by several SiteGround employees and affiliates who remove negative posts about SiteGround and ban those people.

Other Groups like WP Beginner are only interested in affiliate commissions and recommend crap hosts.

WP Speed Matters⁠

is one of the only Facebook Groups not controlled by the same group of people and is the one I recommend joining to get truly unbiased feedback.

SiteGround

Slow TTFB reported by

Backlinko⁠

and treats customers unfairly by banning accounts, limiting the number of websites on each plan (they reversed this), increasing prices twice, reducing/hiding support, enforcing CPU limits that force you to upgrade, and replacing cPanel with Site Tools weeks after cPanel increased prices. They’ve sacrificed quality for profits (

Googlebot crawl issues⁠

as well). The community manager (Hristo) is an admin for the WordPress Speed Up Facebook Group and their

affiliate TOS⁠

(sec. #9) forbids you from using SiteGround’s trademark in bad reviews. Unethical, not fast, and many documented issues which are supposedly not their fault.

Hostinger

They only include 2 CPU cores on their WordPress hosting plans with

terrible uptimes⁠

. They also write fake reviews which was admitted to by Hostinger’s CEO, Arnas Stuopelis. Their employees were banned from the WordPress Hosting Facebook Group after voting for themselves in multiple Facebook polls. Up until about 2018, Hostinger employees would monitor Facebook Groups, Twitter, and other social networks, then trick people into buying Hostinger by posing as customers whenever people asked for hosting recommendations (without disclosing they’re an employee).

A2 Hosting

Other than

bad uptimes + frequent maintenance⁠

, A2 is alright. The reason I don’t recommend them is because they only use LiteSpeed on higher plans and include less CPU cores/RAM than NameHero. So unless you need a data center in Asia (A2 has one but NameHero doesn’t), there’s no reason to use A2 over NameHero.

Newfold Digital Brands

Bluehost, HostGator, and

80+ hosting companies⁠

are controlled by the same parent company. It was EIG but now they’ve transitioned into Newfold Digital who also has ties to WP Engine, GoDaddy, Yoast, and StudioPress. EIG and Newfold Digital’s acquisitions have a long history of running brands into the ground. It’s widely known they offer low quality hosting with overcrowded servers.

Shared Hosting

Any shared hosting will result in a slower TTFB/website because it lacks

server resources⁠

since you’re sharing servers with hundreds of other websites. Cheap hosting typically uses cheap hardware which will also result in a slower TTFB.

Vultr High Frequency

One of the most popular cloud hosts in Facebook groups and who I use. Vultr HF has fast CPU clock speeds +

NVMe storage⁠

compared to shared hosting with slower SSDs. You can get Vultr HF through Cloudways or buy it

directly through their website⁠

and connect it to a control panel like RunCloud or CyberPanel. If using Cloudways, I recommend FlyingPress / WP Rocket over their Breeze plugin and Cloudflare / BunnyCDN over CloudwaysCDN. They also use Object Cache Pro/Redis, monthly pricing (no high renewals), scale as you wish, and a

30% off 3 months coupon⁠

LiteSpeed

Fast/efficient server which uses the LiteSpeed Cache plugin + QUIC.

NameHero⁠

includes more CPU cores/RAM for cheaper compared to

Hostinger⁠

A2⁠

. They use NVMe on higher plans (unlike Hostinger) and LiteSpeed on all plans (unlike A2). They have better uptimes/support if you look at their

uptime status page⁠

and TrustPilot reviews as well as standard cPanel. I’m not sure why people use Hostinger over NameHero when NameHero gives you more server resources, better uptimes + support, and you don’t have to sign up for a 4 year price trap like you do on Hostinger. Maybe because they only have data centers in the US + Netherlands. If you have the budget,

WPX⁠

and JohnnyVPS (by WP Johnny) also use LiteSpeed and are solid picks.

Google Cloud C2

Kinsta and WP Engine are the only mainstream hosts that use

Google Cloud C2⁠

which are faster than SiteGround’s Google Cloud N2 machines. Of course, Kinsta is the better choice, but you need to be careful with PHP worker limits.

DNS

GoDaddy and NameCheap have a slow DNS (check

dnsperf.com⁠

If you bought your domain through them, your DNS will also be hosted there. Both offer a premium DNS (because they know their free DNS is slow and causes latency).

Instead, just use Cloudflare for your DNS which is free and much faster with lower latency.

Even if you don’t use Cloudflare for your CDN, their DNS is faster than the slow DNS from GoDaddy + NameCheap.

To switch your DNS to Cloudflare, sign up for a free account, add your website, and Cloudflare will scan DNS records then provide you

2 nameservers⁠

which you’ll change in GoDaddy or NameCheap.

That’s it! Cloudflare has other performance features covered in the

CDN section⁠

⁠

⁠

Change nameservers to Cloudflare, scan DNS, and use “Proxied” to activate the CDN

Removing Bloat

Suppose you haven’t heard of it yet. In that case, bloat is the act of loading your WordPress site with unnecessary features and functionality. This can lead to your site taking too long to load, storing unnecessary data, and in extreme cases, crashing your site.

WordPress bloat is becoming more and more of an issue:

Plugin developers try to cram more and more features into a single plugin and often at times you can end up with multiple plugins that do the same thing. I believe plugin developers should stick to one core feature and build it really well instead of trying to value add more features. Make them lightweight and keep them simple, without trying to add all the pretty UX/UI designs and trying to re-style the admin area also.

Is WordPress Core bloated?

Generally, speaking the WordPress Core itself isn’t bloated, the code is well written, and the developers are doing a great job keeping it up to date. Bloat often comes down to the plugin and themes you install, mismanaged content and settings.

How do I reduce WordPress bloat?

Removing bloat can free up server resources and CPU usage.

It’s best to go through your settings and disable all functionality not being used in your :

Theme settings

Plugin settings

Hosting settings

Also, any background processes that consume high CPU.

You can also do this by using and adding manual code snippets or installing plugins like Perfmatters and Asset CleanUp to assist.

Example settings and suggestions:

Disable heartbeat

Avoid bloating (themes & page builders) and replace them with lightweight ones like GeneratePress.

Delete unused media files.

Delete unused themes and plugins. (Including the default themes)

Disable tracking in plugins.

Disable any modules you’re not using within plugins, themes and page builders.

Replace the WP cron with real cron jobs.

Limit post revisions to 3-10max.

Regularly clean your database and perform deep cleans with plugins such as WP-Optimize.

Disable or restrict comments and protect your blog/forms from comment spam.

Remove jQuery Migrate if your plugins don’t depend on it.

Disable other unused items. (CSS, JS, HTML, Tracking, Chat widgets) Perfmatters or Asset CleanUp do a great job at this.

Disable unused features in your hosting account. (E-mail, DNS, FTP, etc)

[You can download our complete checklist here]

Bloat is anything on your website you don’t need.

This can be admin notifications, old post revisions, unnecessary tasks running in the background, database bloat, or heartbeat, autosaves, and cron jobs running too frequently.

Removing bloat is good because it usually reduces CPU usage and frees up server resources.

Most “bloat” can be disabled using Perfmatters, Asset CleanUp, or dedicated bloat removal plugins like Disable WooCommerce Bloat, Widget Disable, and Unbloater.

Controlling the Heartbeat API and limiting post revisions can be done with a simple line of code.

You should also go through your theme/plugin/hosting settings and disable all functionality you don’t need.

Avoid bloated themes.

Delete unused media files.

Delete unused themes/plugins.

Disable usage tracking in plugins.

Disable unused features in plugins.

Replace WP cron with real cron jobs.

Limit post revisions (5-10 is sufficient).

Deep clean your database with WP-Optimize.

Protect your blog/forms from comment spam.

Remove jQuery Migrate if your plugins don’t use it.

Heartbeat control (120s frontend, 0s backend, 60s editor is fine).

Disable unused features in your hosting account: email, DNS, FTP, etc.

⁠

⁠

Content Delivery Network (CDN)

A Content Delivery Network helps speed up your website by storing your assets and code on multiple edge servers in different parts of the globe. The cache (Your website) on the edge server is delivered closest to the user visiting your website.

We have always seen a significant increase in website speeds using CDN.

There are a couple of different approaches we recommend:

Automatic Platform Optimisation (APO)

This is a service provided by companies like Cloudflare and is definitely worth spending an additional $5/month for their

APO service⁠

. This approach is used to cache images, web content meaning you have a full-page cache delivered from their edge server.

Traditional CDN

Cloudflare

Is fine for most sites but... if you are serious about improving speed paying a little extra for a traditional CDN such as KeyCDN or Bunny CDN is a better option.

Typically you will also be able to set a custom subdomain like

cdn.yourdomain.com⁠

assets.yourdomain.com⁠

this will also help with SEO and give you more control.

Bunny CDN

This is a turn-key, ultra-fast content delivery network that puts you in control of your site performance.

They handle the heavy lifting so you can focus on making visitors happy and moving products.

⁠

bunny.net - The Content Delivery platform that truly Hops! Hop on bunny.net and speed up your web presence with the next-generation Content Delivery Service (CDN), Edge Storage, and Optimization Services at any scale. bunny.net⁠

⁠

KeyCDN

This is the fastest and straightforward way to deliver content to your users.

There are no long term contracts, no setup fees, or any other hidden costs. It only takes a few minutes to get up and running with KeyCDN!

⁠

KeyCDN - Content delivery made easy KeyCDN is a high performance content delivery network (CDN). Our global network will deliver any digital content, such as a website, software, or game, at a blazing fast speed. keycdn.com⁠

Cloudflare for most sites,

BunnyCDN⁠

or Cloudfront for a more consistently performant CDN, or QUIC.cloud CDN on LiteSpeed.

Google Cloud CDN is good but only available if you’re using Google Cloud hosting (i.e. Closte).

I don’t recommend StackPath (it’s used by RocketCDN, CloudwaysCDN, and quite a few others) because it’s usually not as fast as other CDNs.

If you check

cdnperf.com⁠

, most CDNs are close in speed, but StackPath has had some awful months.

CDN

Price

PoPs

Rating

Freemium

⁠

⁠

$.01/GB - $.06/GB

Free on LiteSpeed

Varies where purchased

N/A

Free 50GB/yr

$.01/GB - $.11/GB

⁠

⁠

Varies where purchased

75+

2.3

Hosting CDN

N/A

Statically

Free

Multi-CDN

$9.99/mo

Free

Unknown

3.0

There are no rows in this table

⁠

⁠

Source: WP Speed Matters Facebook Group

⁠

⁠

Source: WP Speed Matters Facebook Group

Cloudflare – Cloudflare offers a free DNS, CDN, and other free/paid optimizations in their dashboard. Some hosts have an option to activate Cloudflare in the cPanel/dashboard, but you should login to your actual Cloudflare dashboard and take advantage of the features in there.

DNS – change nameservers and use instead of GoDaddy/NameCheap’s DNS (step 3).

CDN – fine for most sites but try other CDNs and test results against Cloudflare. Enable Cloudflare CDN by changing domain name from DNS only to Proxied in the DNS settings.

Minify – minifying with your CDN is faster than cache plugins (it’s closer to end users).

HTTP/3 – enables HTTP/3 if your host supports it (test this using an

HTTP/3 test⁠

Bot fight mode – block bad bots from hitting your site which can help reduce CPU.

Brotli – faster than GZIP and provides lossless text compression when it’s supported.

APO – dynamic full page caching without having to rely on page rules which can sometimes be buggy. WP Rocket and most speed plugins aren’t compatible with APO yet.

Page rules – popular pages rules are a cache everything rule, then optimizing the wp-admin by disabling cache/performance features while setting the security level to high.

Hotlink Protection – saves bandwidth by stopping people from copying images on your website and pasting it on theirs (most hosts/cPanel have an option to disable hotlinking).

Firewall – great for blocking specific bots, countries, and Amazon network IPs if you’re running AdSense and have experienced ad limit issues, since Amazon bots can click ads.

Argo – use Cloudflare’s real-time network intelligence to route your traffic across the fastest, most reliable paths from the origin to Cloudflare’s data centers (see

instructions⁠

Workers – write code and deploy it on Cloudflare’s edge servers (you can try workers using their

playground⁠

). Workers are serverless with automatic scaling + load balancing.

Image resizing + polish – most image optimization plugins already take care of image resizing, compression, and WebP, but will you have better control of it with Cloudflare.

Crawler Hints – allows crawlers to time crawling and avoid wasteful crawls.

Early Hints – caches link headers using preload/preconnect and uses 103 early hints.

Railgun – speeds up dynamic content for visitors far away from your origin server.

Rocket Loader – loads JavaScript (including third-party JavaScript) asynchronously to make them non-render blocking, but it can also break your website, so test it carefully.

BunnyCDN – paid CDN (same one I and WPCrafter use) and highly recommended in Facebook Groups. Fast, affordable, and consistently performant. You only pay for the zones you use. It’s a push only CDN so visitors won’t experience slow pulls. Their

setup instructions⁠

are easy: sign up, create a pull zone, select your zones, and you’ll be provided with a CDN URL. Add the CDN URL to both the

BunnyCDN plugin⁠

and your cache plugin (i.e. WP Rocket → CDN → CNAME field) which is recommended by BunnyCDN’s support team to serve more assets from the CDN.

QUIC.cloud – CDN built specifically to work with LiteSpeed. In the LiteSpeed Cache plugin, request a domain key, activate QUIC.cloud, and use this

video tutorial⁠

by NameHero to set it up.

Summary

If visitors are local only, you don’t need a CDN.

Choose a fast CDN (Bunny, QUIC, Cloudfront).

CDNs offload resources to data centers and reduce CPU.

To activate Cloudflare’s CDN, change DNS only to Proxied.

Take advantage of other speed features when using Cloudflare.

Be careful with Cloudflare Rocket Loader (it can break your site).

If using Cloudflare + WP Rocket, configure the Cloudflare tab for compatibility.

If using a CDN URL, view your source code to make sure assets are served from it.

It’s faster to minify HTML/CSS/JS in your CDN, then disable these in cache plugins.

Check cdnperf.com to see performance, uptimes, and other reports of popular CDNs.

Some image optimization plugins (i.e. Flying Images) serve images from a CDN for free.

Fonts

Web-Fonts: We explain why you should go easy on them and Don’t Use Too Many.

According to the HTTP Archive

⁠

, about 80% of mobile and desktop sites use web fonts, showing their popularity.

Yet, their performance aspects are often overlooked.

Why Should You Care About Font Performance?

Webfonts can be a great way to add style to your site without loading an additional font file. But if you’re not careful with which ones you choose, it could slow down page loading times or even cause problems for users who don’t have access to those particular fonts.

Optimising fonts isn’t as simple as clicking on an option in your cache plugin.

How Web Fonts Impact Page Performance.

On mobile, web fonts make up a sixth of the page’s weight. They affect how long you have to wait for your page to load, and many websites use more than they need.

You can see how long it takes to load, the number of requests, and whether or not they’re being served from an external source using GTmetrix.

⁠

Page with Web Font Loading…

Quick tips on fixing font performance

Avoid .ttf and use WOFF/2 instead, which is supported by 99% of all browsers and faster.

Don’t Use Too Many Web Fonts – Pick a few weight variations, normal, bold, etc.

Avoid plugins that add extra fonts

Host web fonts on your server or

CDN⁠

⁠

Preload your fonts (

Perfmatters⁠

)

Check

GTmetrix⁠

Waterfall > Fonts to see font files/sources/load times.

⁠

Page with System Font Loading…

What are the default fonts?

Web-Safe Fonts (aka System Fonts) are already installed on most devices and load faster than Web fonts due to the widespread availability on all devices.

However, you do make a sacrifice on visual appearance with

Web-safe fonts⁠

and are limited in variety compared to Web Fonts.

Sans-serif

Serif

Monospaced

Fantasy

Script

What is a Web Font?

Web fonts are fonts that are typically served from a 3rd party server and not a users local machine. You may also know them as “custom fonts”.

Common Web fonts hosted by a third-party service are:

–

Google Fonts⁠

–

Awesome Fonts⁠

Which font is best for WordPress?

For a Blog, we would recommend using “

system fonts⁠

” and utilise the fonts on your computer. Instead of fetching a web font.

System fonts have become more visually appealing over the years and are the easiest for most people to ready.

System fonts are used by big names like:

Medium

GitHub

Ghost

The WordPress Admin.

When it comes to finding the best font for a WordPress website, you may want to add a little more class. So in this case, it would be recommended you either self-host Google Font or serve it from a CDN.

Your GTmetrix Waterfall chart shows your font load times, number of requests, and whether they’re being served locally or from an external source. Start by hosting fonts locally to prevent third-party requests from fonts.gstatic.com (self-hosted fonts are faster and easier to optimize).

Host fonts locally (use

OMGF⁠

other tools⁠

Elementor also has an option to host fonts locally.

Divi has a few font optimizations in the performance settings.

.woff is faster than .ttf. (.woff2 isn’t supported by all browsers).

Be minimal with the number of font families, weights, and icons.

If fonts are served from third-party domains, preconnect the domain.

System fonts are the fastest font types if it’s supported by your theme.

Serve fonts from your CDN (you can also try using

Cloudflare workers⁠

Check your Chrome Dev Tools report for any errors with preloaded fonts.

PageSpeed Insights tells you which fonts to preload in “preload key requests.”

Use font-display: swap to fix “ensure text remains visible during webfont load.”

Avoid plugins that add extra fonts (serve them from your theme, not with plugins).

⁠

⁠

Videos

Embedded videos are usually the heaviest element on a page. Just by lazy loading them and replacing iframes with preview images, you can easily shave a couple seconds off it’s load time.

Lazy load videos – done through cache plugins, Perfmatters, or WP YouTube Lyte.

Replace YouTube iframes with preview images – the iframe (which is the heaviest element of the video) is only loaded once your visitors actually click the play button.

Preconnect – you could theoretically preconnect to youtube.com, i.ytimg.com (thumbnail), and Roboto which is currently used as the font in the YouTube player. But test your results and make sure the preconnect doesn’t have a negative impact on speed.

Offload media files to third-party services – if you’re using self-hosted videos, use a third-party service to offload them to something like Amazon S3 or DigitalOcean Spaces.

Images

There are many ways to optimize images.

Images have a major impact on page load speed which is apparent in GTmetrix and PSI such as (properly size images, defer offscreen images, efficiently encode images, and WebP).

Keep in mind – there is a difference between caching plugins and image optimization.

Properly size images – Try resize and upload to correct image size to begin with. Resize large images to suit the width of your blog main container size. There are plugins to correct oversized images and resize them automatically but it’s best to stick to doing this before uploading.

Lazy load images – WordPress 5.5 has lazy load built-in and there are many other speed plugins that also offer this. 3rd party plugins should deactivate the WordPress native lazy loading feature. For best results you should exclude above the fold images from lazy load. These images are critical and will actually seem slower to visitors when lazy loaded. This is called “defer offscreen images” in Page Speed Insights.

WebP – use a WebP plugin (or your image optimization plugin if supported) to convert images to WebP which is suppose to be faster and better quality then JPEG/PNG. Enable WebP Cache if you use WP Rocket. This is called “serve images in next-gen format” in PSI.

Losslessly compress images – ShortPixel, Smush, TinyPNG, and Photoshop are popular methods. The compression level really depends on what you’re willing to tradeoff in terms of quality vs. speed (Lighthouse uses 85%). This is called “efficiently encode images” in PSI.

Combine Images Using CSS Sprites – a CSS sprite combines multiple small images into 1 single image so it creates 1 request instead of multiple (using a CSS sprite generator). This is good when showing multiple logos (“clients logos” or “featured on”). Only do this with small, decorate images since it can impact SEO if you do it with regular images.

Serve images through your CDN URL – CDN URLs can be used to serve images. Cloudflare doesn’t use a CDN URL. If you’re using a CDN URL but images aren’t being served, enable the CDN Rewrite option if using Perfmatters.

Serve images with correct dimensions – add a width/height attribute to the image’s HTML. WP Rocket has an option to add missing image dimensions which should fix this.

Adaptive Images – Shortpixel adaptive images plugin to serve smaller images to mobiles.

Disable Hotlinking – stops people from embedding your images on their website consuming your bandwidth and costs you money. Prevent this with Cloudflare’s hotlink protection, WP Rocket’s disable embed setting, or some hosts have a disable hotlink option. Adding your watermark logo to images can also discourage people from hotlinking.

Remove EXIF data from images – removes unnecessary data such as date, time, location and camera settings when taking pictures.

Downgrade Quality For Slower Connections

Plugins

Some plugins negatively impact PageSpeed by adding CSS/JavaScript/fonts to the frontend, while other plugins increase memory usage by running resource-intensive background tasks. Even certain plugin features can add database bloat which can be measured in WP-Optimize. View this list of 75+ slow plugins and use tools like

Query Monitor⁠

WP Hive⁠

, and

WP-Optimize⁠

Find slow plugins in Query Monitor.

Avoid jQuery-heavy plugins when possible.

Use WP-Optimize to remove unused tables from old plugins.

Use plugins with modular design and disable unused features.

Use WP Hive to see whether a plugin is slow before installing it.

Avoid plugins that run heavy background processes or add third-party code.

Do things manually without plugins (creating headers, adding JavaScript, etc).

⁠

⁠

Lightweight Alternatives

Backups – UpdraftPlus.

Social Sharing – Grow Social.

SEO – Rank Math or SEOPress.

Sliders – Soliloquy or MetaSlider.

Comments – native comments in CSS.

Gallery – Gutenberg Gallery or Meow Gallery.

Translate – MultilingualPress, Polylang (not WPML).

Analytics – Google Analytics and Search Console (no plugins if possible).

Security – no security plugin (Cloudflare, your hosting firewall, limit login attempts, strong password, latest PHP version, disable XML-RPC, rename your wp-login page).

Query Monitor – most popular way to find your slowest plugins. Install it, view any page on your website, then go to Queries → Queries By Component to view all your slowest plugins.

WP Hive – Chrome Extension that lets you browse the WordPress plugin repository and see whether plugins will impact memory usage and PageSpeed scores. However, the extension doesn’t always take into account when plugins are loaded on the frontend. So even if it says Elementor doesn’t impact PageSpeed, when you actually build pages using Elementor, it does.

⁠

WP-Optimize – find specific plugins and plugin features/modules that cause database bloat. Very common with plugins that have to collect data and run intensive background processes.

Caching

What cache plugins you use and how you set their configuration options are highly influential factors.

WP Rocket and LiteSpeed are currently the most popular caching plugins (or SG Optimizer if using SiteGround).

WP Rocket has such high ratings because it comes with features like Speed Optimizations, making them faster than most other caching plugins.

Suppose you don’t know whether your cache plugin comes with any specific optimizations. In that case, you’ll probably need one or more alternatives to get the same performance as WP Rocket and LightSpeed.

Here are some recommended plugins for WordPress:

Which cache plugin you use and how you configure the settings are high impact.

Premium cache plugins are usually maintained better and have been updated for core web vitals, while free plugins (W3TC WPFC, WPSC) can lack features.

If you’re using a free cache plugin, you will need to learn which features your cache plugin doesn’t come with, then install extra plugins.

For example, you may need to install Flying Scripts to delay JavaScript, CAOS Analytics to host GA locally, WP YouTube Lyte to optimize videos, and WP-Optimize to clean your database.

These features are already built-in to most premium cache plugins which means more optimizations to your site (and usually better results), yet less plugins you need to install.

WP Rocket is the gold standard unless you’re using a LiteSpeed server (then use LiteSpeed Cache) or SiteGround (then use SG Optimizer). FlyingPress by Gijo Varghese is solid but is in the early phases.

NitroPack is

blackhat⁠

because it moves elements off the main-thread, giving you better PageSpeed scores, but not improving load times as much as the scores say they do.

Cache Plugins

Cache Plugins

Cache Plugin

Rating

Active Installs

Server Caching

CWV

Difficulty

Price

LIteSpeed Cache

4.8/5

✓

Average

Free on LiteSpeed

WP Rocket

4.9/5

1.9M

✓

Easy

$49/year

FlyingPress

N/A

✓

Easy

$60/year

SG Optimizer

4.4/5

✓

Easy

Free on SiteGround

W3 Total Cache

4.4/5

Hard

Free

WP Fasest Cache

4.9/5

Easy

Freemium

WP Super Cache

4.3/5

Easy

Free

Breeze

3.8/5

100K

✓

Easy

Free on Cloudways

Swift Performance

3.8/5

20K

Average

Freemium

NitroPack

4.2/5

90K

Easy

$17.50/mo

There are no rows in this table

⁠

⁠

Source: WordPress Speed Up Facebook Group

⁠

⁠

Source: Oxygen User Group

Use Multiple Caching Layers

There are many

caching layers⁠

. Cache plugins support browser cache, then you have object cache (Redis/memcached), and some plugins (like LiteSpeed Cache and SG Optimizer) use server-level caching which is faster than the file-based caching done by most cache plugins. Your host/CDN likely has other layers as well (Varnish)… cache plugins are just one part of it.

Opcode cache – usually done by your host.

Browser cache – usually done by your cache plugin.

HTTP accelerators – done by your host (Varnish/FastCGI).

Object cache – memcached for small websites, Redis for large/WooCommerce sites. See your host’s instructions for using Redis (you may need the Redis Object Cache plugin). In cPanel, you would activate memcached or Redis under Select PHP Version → Extensions, then many cache plugins like LiteSpeed + W3TC have an option to use memcached/Redis.

Cloudflare full page cache – caches full pages instead of only static files. Can be used with a cache everything page rule, WP Cloudflare Super Page Cache plugin, or in SG Optimizer.

⁠

⁠

Summary

Use WP Rocket, LiteSpeed Cache, FlyingPress, or SG Optimizer.

LiteSpeed Cache + SiteGround Optimizer use server-level caching.

Use my tutorials on WP Rocket, LiteSpeed Cache, SiteGround Optimizer.

Memcached is usually for smaller sites, Redis is better for larger websites.

Some hosts/CDN have a setting to set the cache expiration which you can try setting to 180 days to “serve static assets with an efficient cache policy” to fix this PageSpeed item.

Slow Plugins

Speed Plugins

A list of recommended

speed plugins⁠

. You don’t need all these since many cache/optimization plugins already include some of these features. Otherwise, you might consider a few of these.

Table 3

Table 3

Asset CleanUp

CSS/JS

4.9/5

Freemium

Price

CSS/JS

Free

CSS/JS

Free

Blackhole For Bad Bots

Block Bots

Free

CDN

Paid

Cache

Paid

Security

Free

Disable WooCommerce Bloat

Bloat Removal

Free

Resource Hints

Free

CSS/JS

Free

Cache

N/A

Paid

Bloat Removal

Free

Block Bots

Free

Cache

Free

Fonts

Free

Images

Free

CSS/JS

N/A

Paid

Pre* Party Resource Hints

Resource Hints

Free

Tools

Free

Cache

Free

Cache

Free

Images

Freemium

ShortPixel Adaptive Images

Images

4.9/5

Freemium

Swap Google Fonts Display

Fonts

4.3/5

Free

WebP Converter for Media

Images

4.9/5

Free

Widget Disable

Bloat Removal

5/5

Free

WP Cloudflare Super Page Cache

Cache

Free

Cron Job

Free

Database

Free

Cache

Paid

Video

Free

Block Bots

Free

Bloat Removal

Free

There are no rows in this table

⁠

Optimization Plugins

ShortPixel is a one-stop image optimizer that decreases image sizes and dramatically enhances page load speed. Converting your existing images will automatically generate WebP images from them, and your site will be faster, more lightweight.

ShortPixel Free & Paid image optimisation service not only make your images load faster and save bandwidth. It uses its super-fast CDN to serve your images from a location closest to your site visitor, and it compresses your images using the latest techniques.

Ideal Plugin Settings

Note: These are just our recommended settings, which should suit most general use cases, but everyone has different sites, hosting and plugins installed. Remember always backup, test and check before making significant changes to your site. Ideally using a staging site where possible.

Plugin Downloads

Before downloading and installing the plugins from the WordPress repository, you first need to signup for a free account.

⁠

Create free account⁠

⁠

ShortPixel Image Optimizer

ShortPixel Adaptive Images

ShortPixel adaptive help you serve smaller images to mobile devices which can improve mobile scores and load times. Images can be served from ShortPixel’s CDN in next-gen WebP format if a browser supports it.

Perfmatters

Perfmatters plugin and script manager is used to optimise your WordPress site for better site performance, load times and Google PageSpeed scores.

What is the Perfmatters plugin?

The Perfmatters plugin for WordPress is a lightweight yet powerful tool that supercharges your website. It improves the site speed on any WordPress site. It allows you to select which scripts, styles, and plugins will be loaded on your site and pages and considerably improve your page load times.

In short, Perfmatters has options to toggle ON and OFF the top know issues that increase WordPress load time on the front and backend.

Then the most powerful feature is their Script Manager, which allows you to control what plugins and scripts load.

For Example: If you had Gravity Forms installed and only had this on a handful of pages like your home page and the contact us page.

Does it make sense to have this load on every single page?

The answer is NO. Every page that the script needs to load on slows down your site.

How to install Perfmatters?

Perfmatters doesn’t have a free plugin on the WordPress repository, so it does need to be downloaded and installed from their website.

It is a very reasonable price and worth every penny.

Once you’ve purchased a copy, just like any other premium plugin download and uploaded it to your WordPress site, enter in the license key found in your Perfmatters user dashboard.

How To Use Perfmatters With The Ideal Settings?

Can I use Perfmatters with WP Rocket?

Yes, this is something we do regularly. However, some Perfmatters settings can overlap with WP Rocket settings. If WP Rocket or any other plugins already have those options enabled, choose one or the other and not both. WP Rocket generally already takes care of lazy loading, database cleanup, preloading links/fonts, DNS prefetch, hosting Google Analytics locally, and deferring JavaScript).

Database

Cache plugins with database cleanup settings don’t fully clean your database.

Instead, use a plugin like

WP Optimize⁠

which lets you view your actual database tables.

Next, remove tables with the label “not installed” which means you deleted a plugin and it left behind crap in your database.

Also be on the lookout for tables with large overhead which are usually caused by plugins or specific plugin features/modules.

So yes, use your cache plugin for ongoing database cleanups, but if you install and delete plugins a lot, do a deep cleaning every so often.

Use WP-Optimize to thoroughly clean your database.

Remove tables left behind by old plugins you uninstalled.

Schedule ongoing database cleanups (i.e. 1 week in your cache plugin).

Certain plugin features create tables with large overhead especially if it has to collect/process data. Consider disabling plugin features/modules that cause bloat. Many SEO and security plugin features (Rank Math, Yoast, Wordfence, etc) add database bloat.

⁠

⁠

WooCommerce

WooCommerce sites have extra scripts, styles, cart fragments, and plugins.

Never cheap out on hosting if you’re running a WooCommerce website. But besides the obvious (everything else in this guide), here are a few WooCommerce-specific optimizations.

Clear WooCommerce transients + customer sessions.

Disabling cart fragments is usually not an option, but will improve speed.

Try the

Disable WooCommerce Bloat plugin⁠

which removes a ton of bloat added by WooCommerce and disables WooCommerce scripts/styles on non-eCommerce content.

Page Builders

Easy to use

Designers can create their themes

You don’t have to know HTML

Can create pages with different layouts very easily.

Great for beginners

However, they have a massive impact on website performance. Page builders were smashed by the latest version of Google’s web performance tool and others like GTmetrix.

They may also insert additional stylesheets, scripts, and DOM elements into your page. These will impact every page on your site cause poor PSI scores.

Slow Page Builders to avoid are:

Divi

Elementor

Brizy

Lightweight alternatives:

Oxygen

GeneratePress

Kadence

Other Alternatives:

Gutenberg

Genesis

Elementor’s Hello theme

If you add additional page builder plugins, they’ll slow down WordPress even further.

How to still use your favourite Page Builders but improve page speed?

Use Asset CleanUp or Perfmatters to unload unused assets created by page builders.

Divi’S Rocket plugin isn’t great, and you’re better off using either WP Rocket or LiteSpeed instead.

Elements have experimental settings for optimising performance, such as Optimising DOM output and Improving asset loading. You may want to experiment with these options before using them.

Divi has built-in options for minimising and combining CSS and JavaScript files. They’re not quite as compatible as cache plugins, but they may be faster for some sites. Try them out and see if they help!

⁠

Elementor, Divi, and other page builders add extra CSS, JS, and DOM elements to your site.

Since multiple PageSpeed items are related to CSS/JS, many people are leaving them for lightweight alternatives.

But if you don’t want to remove your page builder completely, there are ways to optimize it like hard coding your header/footer in CSS (so it doesn’t use heavy page builder code).

Both Elementor and Divi have also released built-in settings which can remove some of the page builder bloat (

Elementor Experiments⁠

Divi performance settings⁠

If you’re using a page builder, check your source code to see how many times your page builder appears.

Divi, Elementor, and most page builders slow down your site.

Most page builder addons (plugins) slow down WordPress more.

Oxygen,

GeneratePress⁠

, and

Kadence⁠

are lightweight alternatives.

Gutenberg, Genesis, and Elementor Hello theme are other alternatives.

Use Perfmatters or Asset CleanUp to remove unused page builder assets.

If using Astra Starter Sites, use a template built in Gutenberg (not Elementor).

WP Johnny offers page builder removal services (I already hired him to do this).

Elementor’s theme customizer has settings to host fonts locally and preload them.

Divi’s Rocket plugin is mediocre and you’re better off using WP Rocket or LiteSpeed.

Divi has built-in minify and combine CSS/JavaScript files settings. These can do a better job (as far as compatibility goes) than cache plugins, but test their impact in speed tools.

⁠

⁠

Source: gutenberghub.com

⁠

⁠

Source: WordPress Speed Up Facebook Group

⁠

⁠

Source: WordPress Speed Up Facebook Group

⁠

⁠

Source: Bloggers Passion Facebook Group

⁠

⁠

Source: Oxygen User Facebook Group

CSS & JavaScript

Quite a few PSI recommendations are related to CSS/JavaScript: render-blocking resources, reduce unused CSS/JavaScript, third-party code, minimize main-thread work, minify, and more.

The first step is to find your largest CSS + JS files and learn which plugins (or other sources) they’re coming from. Chrome Dev Tools and your GTmetrix Waterfall chart can help find them.

⁠

⁠

Find heavy JavaScript in Chrome Dev Tools → Coverage

Large CSS/JS files are usually related to slow plugins, page builders, and third-party code (review those sections if that’s the case). On top of that, here are a few ways to optimize them.

Minify CSS/JS with your CDN.

In Elementor Experiments, activate improved asset/CSS loading.

In Divi’s performance settings, activate all CSS/JS optimizations settings.

Inline critical CSS (usually above the fold CSS) and defer non-critical CSS.

Delay third-party JavaScript using WP Rocket, Perfmatters, or Flying Scripts.

Don’t always combine CSS/JS. View how large your CSS/JS files are in your GTmetrix Waterfall chart and only combine if they’re 10KB or smaller (suggested by

WP Johnny⁠

Try Autoptimize and Async JavaScript plugin for better control of CSS/JS optimizations.

Hard code your header/footer/sidebar in CSS so it doesn’t use heavy page builder code.

Remove unused CSS using tools like WP Rocket, LiteSpeed UCSS, PurifyCSS, RapidLoad.

Use asset unloading plugins to remove CSS/JS where they don’t need to load (next step).

Third Party Code

Third-party code is anything on your website that creates requests from third-party domains. You can view your third-party domains in PSI or using Chrome Dev Tools → Sources → Page.

Some files can be hosted locally (Google Analytics + fonts). Others can be optimized by delaying it’s JavaScript and using prefetch/preconnect to establish early connections. Other third-party code can be optimized too (for example, Divi’s performance settings defers third-party scripts).

Google Analytics – host locally in WP Rocket, Flying Analytics, or Perfmatters. Perfmatters also lets you use a smaller tracking code (minimal, minimal inline, or analytics.js) and

disable display features⁠

to prevent a 2nd request to Doubleclick.

Google Fonts – host locally to avoid requests from Google Fonts + Font Awesome.

Google Tag Manager – delay JavaScript, clean up tags, avoid coding tags in the header.

Google Maps – lazy load iframes and only embed Google Maps on contact + local SEO pages (not in the footer). Or take a screenshot of the map and link it to driving directions.

Google AdSense – delay JavaScript and reserve space for ads to prevent layout shifts. AdSense can absolutely destroy your PageSpeed scores and is awful for user experience.

YouTube – lazy load videos, replace YouTube iframes with preview images, and delay JavaScript. WPCrafter posted a

video⁠

on speeding up videos if you’re using Elementor.

Social Media – use a fast social sharing plugin (

Grow Social⁠

) and avoid embedding too many social media widgets (Facebook Like boxes, Twitter embeds, and Instagram feeds).

Gravatars – use a

local avatar plugin⁠

(WP User Avatar isn’t good anymore), cache Gravatars if your cache plugin supports it (LiteSpeed Cache does), and delay Gravatars.

ReCaptcha – use an asset unloading plugin to only load ReCaptcha where it’s being used.

Facebook Pixel – delay JavaScript (included in WP Rocket’s delay JavaScript default list).

⁠

Reduce impact of third-party code wordpress

⁠

Asset Unloading

Some plugins, CSS, and JS load across your entire website when they only need to load in certain areas.

Asset unloading plugins let you remove assets where they’re not being used.

This can significantly reduce unused CSS/JavaScript which are PageSpeed Insight recommendations.

Perfmatters and

Asset CleanUp⁠

are popular asset unloading plugins which both have bloat removal settings as well.

I like Perfmatters since the UI/UX is better, lets you unload assets on mobile, and includes

Regex⁠

to remove CSS/JS/plugins based on URL patterns.

Asset Cleanup has a pro version which can unload custom CSS and use RegEx. Choose the plugin best for you.

⁠

⁠

Source: WP Speed Matters Facebook Group

⁠

⁠

Source: Oxygen User Facebook Group

Once you install a plugin, use the script manager to see which assets are loading on the page.

Then it’s a matter of figuring out which content you can disable them on (current URL, pages, posts, RegEx, or “everywhere but” options).

Asset CleanUp has a test mode, otherwise test carefully since disabling assets can break your site. Consider setting up a staging site for testing.

Examples:

Disable slider plugins on content without sliders.

Disable schema plugins on content without schema.

Disable contact form plugins on content without forms.

Disable

WooCommerce scripts and styles⁠

on non-eCommerce content.

Disable email plugins (i.e. MailChimp) on content without email signups.

Disable social sharing plugin on all pages (since it’s usually for blog posts).

Disable unused functionality in your page builder (see this post for Elementor).

Disable page builder plugins (i.e. Ultimate Addons) where they’re not being used.

⁠

⁠

Prefetch, Preload, Preconnect

Tells browsers to download resources ahead of time.

Prefetch/preconnect establish early connections to third-party domains while preload is for self-hosted files (usually fonts but it can also be scripts, styles, images, media, or documents). These can be done manually with a simple line of code or many other plugins support browser resource hints (most cache plugins, Perfmatters, Asset CleanUp, Pre* Party Resources Hints).

Prefetch – helps browsers anticipate third-party domains by performing a DNS lookup in the background. Find these domains in your PageSpeed Insights or Chrome Dev Tools report, copy all their domains (or see this list of common domains), then prefetch them.

Preload – often used for fonts or links. Preloading fonts help browsers discover fonts in CSS files. PSI should tell you which fonts to preload under “preload key requests.” Preloading links downloads a page when users hover over a link so by the time they click it, the page loads instantly This is done in WP Rocket, LiteSpeed Cache, and Perfmatters.

Preconnect – establishes early connections to important third-party origins. Common with CDNs and third-party fonts like fonts.gstatic.com. Most cache plugins automatically add preconnect when enabling certain font/CDN settings, but check their documentation.

⁠

⁠

Reduce CPU

Reducing CPU frees up server resources and can improve TTFB. It also helps avoid CPU overages (a common hosting issue) which can prevent forced upgrades and save you money.

Some methods I already covered in this guide: heartbeat, post revisions, autosave interval, Cloudflare bot fight mode to block bad bots, offloading resources to CDNs, avoiding bloated themes/plugins, disabling unused plugin features, and definitely not using cheap shared hosting.

Here are a few extra tips:

Increase memory limit – increase memory limit to at least 256B (if not more).

Disable plugin usage sharing – it’s very small, but I never share my plugin data.

Tweak server settings – WP Johnny has instructions in his

speed guide⁠

(section #8).

Control cron jobs – control cron jobs and replace WordPress cron with a real cron job.

Disable trackbacks/pingbacks – can be done manually or using plugins like Perfmatters.

Use AWstats – most hosts have AWstats which pinpoints where CPU is being consumed.

Protect login page – login pages are common targets for bots. Limit login attempts, add a Cloudflare page rule to set security level to high, and move your login page to block them.

Comments

If your blog has lots of comments, they usually take a long time to load especially if you’re showing Gravatars or using a comments plugin like Disqus or wpDiscuz (which I don’t suggest).

Use native comments.

Use a

local avatar plugin⁠

If using Gravatars, cache and delay them.

If using Disqus, use the

conditional load plugin⁠

Break comments in your WordPress discussion settings.

Try the

Lazy Load for Comments⁠

Lazy Social Comments plugin⁠

If using a plugin like wpDiscuz, consider adding it to delayed JavaScript.

wpDiscuz also options for lazy load and initiating AJAX loading after page.

Use a “load more comments” button on mobile for posts with lots of comments.

Mobile

Poor mobile scores in PageSpeed Insights is a common issue. Most desktop optimizations transfer to mobile so always start with broad optimizations first. Otherwise, here are a few tips:

Make sure themes/plugins are responsive.

Perfmatters lets you unload assets specifically on mobile.

Use Google’s layout shift debugger to find mobile CLS issues.

Replace sliders with images on mobile (or just don’t use sliders).

Don’t use AMP (Kinsta’s conversions dropped 59% when using AMP).

Use an adaptive images plugin to serve smaller images to mobile devices.

Enable mobile caching if your cache plugin supports it (or get one that does).

Downgrade image quality for slower connections (you can do this in Optimole).

Use mobile editors (like

Elementor’s⁠

) to remove heavy elements on mobile. Even removing a few images, widgets, or replacing the slider with a static image can help.

Update Software

Keep your software updated.

WooCommerce and some page builders (Elementor and Divi) have a system status section showing your software details.

Also, stay informed when your host releases an update (PHP version, Redis, etc). You’ll likely need to make these updates manually.

PHP version

MySQL + MariaDB Version

WordPress core, themes, plugins, frameworks

Fix Items In PageSpeed Insights

Common solutions to PageSpeed Insight recommendations.

Avoid an excessive DOM size – avoid slow page builders, use less columns/widgets, lazy load, paginate comments. If using Elementor, enable “Optimized DOM Output” and hard code header/footer if using page builders.

Avoid chaining critical requests – defer/async JavaScript below the fold, combine CSS and JS into single files, take advantage of preload + preconnect.

Avoid document.write() – most often associated with a dynamic year in the footer area. Instead, manually add the current year without making it dynamic.

Avoid enormous network payloads – reduce page size and number of requests. It’s a generic recommendation involving anything related to reducing page size.

Avoid large JavaScript libraries with smaller alternatives – most plugins rely on jQuery instead of large

JavaScript libraries⁠

, but you should still try to eliminate jQuery from your site by using jQuery-free plugins and disabling jQuery migrate.

Avoid large shift layouts – test your site in Google’s Layout Shift Debugger and fix shifts caused by fonts, buttons, images, CSS, and cookie notices that “fly in.” Try disabling “optimize CSS delivery” in WP Rocket or “load CSS asynchronously” in LiteSpeed Cache. Use font-display: swap, CSS transform + translate properties in animations, and add dimensions to images/iframes, ads, and dynamic content.

Avoid multiple page redirects – use the correct HTTPS and WWW or non-WWW version throughout your site. Plugins can also cause redirect errors.

Avoid non-composited animations – fix animations that shift or appear janky.

Avoid serving legacy JavaScript to modern browsers – don’t use outdated JavaScript (ES5 standard). Using reliable themes/plugins should prevent this.

Defer offscreen images – lazy load images (built-in to WordPress or use a plugin (Optimole) which lazy loads without jQuery and serves images from Cloudfront.

Efficiently encode images – generic recommendation to optimize your images.

Eliminate render-blocking resources – generate critical CSS and defer JavaScript. Autoptimize and the Async JavaScript plugin can usually fix these.

Enable text compression – use GZIP/Brotli for text compression (ideally Brotli).

Ensure text remains visible during Webfont load – add font-display: swap to font CSS, with a plugin, or add &display=swap to end of the Google Font URLs.

Keep request counts low and transfer sizes small – reduce requests on your site or from third-party code. Minify CSS/JS, optimize images, and fix redirect issues.

Largest contentful paint – how long the main content on a page takes to finish rendering (multiple factors are involved). Primary ways to improve LCP are to reduce server response times, choose a data center close to visitors, use a CDN, add browser resources hints like preconnect and prefetch, use server-side caching, inline critical resources, defer non-critical resources, use critical path CSS, avoid heavy scripts above-the-fold, reduce DOM size, ensure text remains visible during font load, optimize images, use adaptive images, and minify CSS/JS.

Minify CSS – removes unnecessary characters from CSS (done via cache plugin).

Minify JavaScript – removes unnecessary characters from JS (via cache plugin).

Minimize main-thread work – generic recommendation to optimize JavaScript.

Minimize third-party usage – view your third-party code in PSI or Chrome Dev Tools. Host files locally, lazy load videos, delay JavaScript, replace YouTube iframes with preview images, Use a smaller GA tracking code and disable remarketing/advertising. AdSense can create many third-party requests.

Preconnect to required origins – preconnect CDN URLs and third-party fonts.

Preload key requests – PSI should usually tell you which files to preload.

Properly size images – avoid huge images and resize to smaller dimensions. Try creating a cheat sheet of dimensions for logo, blog images, sidebar images, etc.

Reduce JavaScript execution time – see sec. #13 in this guide to optimize JS.

Reduce server response times – avoid shared hosting, SiteGround, EIG brands.

Remove duplicate modules in JavaScript bundles – often caused by importing code which can result in duplicate modules (JS bundles) from multiple sources.

Remove unused JavaScript/CSS – see sec. #13 in this guide to optimize CSS/JS.

Serve images in next-gen formats – convert images to WebP format using a

plugin⁠

and enable WebP caching in WP Rocket’s Media settings if you’re using it.

Serve static assets with an efficient cache policy – hosting, CDNs, and cache plugins often have an option to set a cache expiration time. Set it to 180 days.

Use video formats for animated content – convert any animated GIFs to video.

User timing marks and measures – get additional metrics in PSI and Chrome Dev Tools by adding the User Timing API. This is not a pass/fail test; it only provides additional speed data used to pinpoint where time is being spent.

Uses passive listeners to improve scrolling performance – some themes/plugins use ‘”addEventListener” (

modify it to be passive⁠

). There’s also an issue with a WordPress core script (js/comment-reply.min.js) creating non-passive listeners.

Gallery

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.