I increased my PageSpeed Insights performance score from 79 to 99. Follow this WordPress speed optimization guide so you can too.
Table of Contents
Tools you need
PageSpeed Insights
We’ll measure immediate changes using PageSpeed Insights over other website performance testing tools like GTMetrix and Pingdom because it’s the tool Google uses to assess your Core Web Vitals. Passing your Core Web Vitals assessment sends positive ranking signals to Google because you show you care about your website visitors’ experience.
Google Search Console
Add your website to Google Search Console to measure the long-term effects of the optimization. Pay attention to the Core Web Vitals report under the Experience section.
Google Webfonts Helper
Google Webfonts Helper lets us download the Google fonts you need on your website and give us the codes to run them locally from your site instead of loading them externally through Google Fonts API.
File Manager tool
We need a way to upload fonts to your website. The options are:
- Easy: FTP tool like FileZilla
- Easier: Your hosting’s file manager tool
- Easiest: “File Manager” plugin by mndpsingh287
I’m using my hosting’s file manager tool in this WordPress speed optimization guide. But the steps are similar regardless of which file manager tool you use.
Now that you have everything you need, let’s get started.
WordPress speed optimization: how to speed up your WordPress site
I broke down this guide into three steps with a few substeps under each one.
Before you start, I suggest you analyze your most popular page on PageSpeed Insights and record your “before” score. There’s a “Copy Link” button on the top-right of the screen so you can store your assessment for comparison after you’ve followed this WordPress speed optimization guide.
1. Install and set up Autoptimize
Autoptimize is a free performance optimization plugin that allows you to safely pass PageSpeed Insight’s audits that infamously cause websites to fail the Core Web Vitals assessment. For example, eliminating render-blocking resources as part of the First Contentful Paint (FCP) and Largest Contentful Paint (LCP) metrics.
Add and activate the “Autoptimize” plugin by Frank Goossens (futtta).
After activating, proceed to the plugin settings. It’s listed under the “Settings” menu on your WordPress dashboard.
The first tab is called the “JS, CSS & HTML.” Let’s focus on the top section labeled “JavaScript Options.”
Optimize JavaScript code
Autoptimize’s JavaScript Options will help you pass the “Eliminate render-blocking resources” audit.
Optimize JavaScript Code? Check
Aggregate JS-files? Check
Everything is left to its default settings, including “Exclude scripts from Autoptimize: , wp-includes/js/dist/, wp-includes/js/tinymce/, js/jquery/jquery.min.js”
That’s it for the JavaScript Options. Let’s proceed to the HTML Options, skipping CSS Options.
Optimize HTML code
Autoptimize’s HTML Options will help you to pass the Minify CSS and Minify JavaScript audits.
Optimize HTML Code? Check
Also minify inline JS/ CSS? Check
Everything is left to its default settings. “Keep HTML comments?” is left unchecked.
That’s it for the HTML Options. Let’s proceed to the last option, “Misc Options, ” skipping CDN Options and Cache Info.
Enable miscellaneous options
Tick all the boxes in the Misc Options menu.
Save aggregated script/css as static files? Check
Minify excluded CSS and JS files? Check
Enable 404 fallbacks? Check
Also optimize for logged in editors/ administrators? Check
Enable configuration per post/ page? Check
That concludes all the settings needed on the first tab. Click the “Save Changes and Empty Cache” button before proceeding to the next tab, “Images.”
Optimize images
Autoptimize’s image optimization options will help you pass the “Serve images in next-gen formats” audit.
Image optimization & CDN – Check
Ticking the image optimization and CDN box above will open more options.
Leave “Optimization exclusions” empty.
Image Optimization quality – Lossy
Leave “Load AVIF in supported browsers?” unchecked.
Lazy-load images
Autoptimize’s lazy-loading options will help you pass the “Defer offscreen images” audit.
Lazy-load images? Check
Ticking the lazy-loading box above will open more options.
Leave “Lazy-load exclusions” empty.
Leave Lazy-load from the nth image as the default, “2.”
That concludes all the settings needed on the second tab. Click the “Save Changes” button before proceeding to the next tab, “Extra” – skipping “Critical CSS.”
Enable extra auto-optimizations
A couple of Autoptimize’s extra options will help you pass the “Eliminate render-blocking resources” and “Reduce unused JavaScript” audits.
Remove emojis – Check
I will assume you have Google Analytics installed on your site. It will always try to load first unless instructed, which is what we’ll do below.
Async Javascript-files – Add https://www.googletagmanager.com/gtag/
Everything is left to its default settings: “Google Fonts” is left as is, and other boxes are left unchecked and empty.
2. Install and activate Cache Enabler
Cache Enabler by KeyCDN is a lightweight page caching plugin that compliments Autoptimize.
Page caching will help you pass the “Reduce initial server response time” audit.
Cache Enabler is so lightweight that it will immediately start working after you install and activate it.
3. Add and load fonts locally
Loading fonts externally through Google Fonts API is one of the most common causes of failing Google’s Core Web Vitals assessment. It specifically affects the “Eliminate render-blocking resources” audit. So I will walk you through how to add and load your fonts locally without installing a plugin.
Identify fonts
Identify fonts used on your website, including the style variations. Check your theme customizer or use Google Chrome’s Inspection tool.
For example, this website uses GeneratePress. It has a Font Manager section under Typography.
I can see that this site uses Open Sans with the regular, italic, and 600 variants.
Download fonts
Download the fonts you’ve identified during the previous step from Google Webfonts Helper.
Enter the font name in the box at the top of the left menu.
Click on the font to open more options on the right side of your screen.
Proceed to step 2, selecting the style variants. In my case, I ticked the boxes next to regular, italic, and 600.
Proceed to step 4. Click the button to download your font.
When your download is complete, don’t close the window yet. You’ll need it for later.
The file you just downloaded is a zip file. Extract the font file by double-clicking it. Now you have your font that has a .woff file extension. I recommend you delete the zip file so you don’t accidentally upload it during the next step.
Repeat the same steps if you’re using multiple font families. Remember not to close the window after downloading each font family.
Upload fonts
Upload the fonts you’ve downloaded to your website using the tool you’re most comfortable using. It could be an FTP tool like FileZilla, your hosting’s File Manager tool, or the File Manager plugin.
I’m using my web hosting’s File Manager tool. But the steps are similar regardless of which tool you pick.
Let’s create a fonts folder on our WordPress root folder.
You know it’s your WordPress site’s root folder when you see the wp-admin, wp-content and wp-includes folders, and other PHP files such as wp-activate.php and wp-blog-header.php.
After creating the fonts folder, go into that folder and upload the font(s) you’ve downloaded from the previous step.
Let’s return to the Google Webfonts Helper window that we kept open.
Edit CSS
Return to the Google Webfonts Helper tool and scroll down to the “3. Copy CSS” section.
Before copying the code, enter yourdomainname.com/fonts/ next to the “Customize folder prefix (optional):” box like so:
Notice how it updates the code for you.
Click on any part of the code to select it all. Next, copy it. That’s Ctrl+C for Windows or Command+C for Mac.
Customize theme
In your WordPress dashboard, click Customize under Appearance.
Click Additional CSS and paste the code you’ve copied during the previous step. That’s Ctrl+V for Windows or Command+V for Mac.
Next, go to your theme’s Typography settings. If you’re using GeneratePress like me, turn off “Use Google Fonts API.” Ensure the “Font Family Name” matches the name next to “font-family” in the CSS code.
Under Typography Manager, ensure your font is selected as the Font Family.
Before exiting the Customizer, click the “Publish” button to make the changes.
The moment of truth.
Clear your CSS and JavaScript caches using Autoptimize before analyzing the same page you used before the optimization process. Disregard the first result and analyze the page again. (This is because you’ve just cleared your caches, and the first result rebuilt them.)
Still not scoring at least 90?
You must score 90 or above to pass the Core Web Vitals assessment. Here are a few more things to try if your site scores 89 or below, even after following the WordPress speed optimization guide above.
Delete unused plugins and themes
WordPress plugins and themes add CSS and JavaScript files to your site. Delete unused ones to improve your site’s performance, and think twice before adding new ones moving forward.
This website, for example, only has six plugins and three themes installed.
The list of plugins includes Autoptimize and Cache Enabler (for performance optimization), GP Premium and Recent Posts Widgets With Thumbnails (for front-end development), and Rank Math SEO and Rank Math SEO Pro (for SEO).
The list of themes includes GeneratePress (parent theme), GeneratePress Child, and the most recent default WordPress theme – Twenty Twenty-Three (for debugging).
Clear your cache and reanalyze your most popular page twice.
Still not breaking 90? Keep reading.
Change theme
Are you using an unsupported theme?
Are you still using a page builder like Divi or Elementor?
Consider changing your theme if you answered “yes” to any of the questions above.
I highly recommend the theme I’m using, GeneratePress. It’s lightweight, and the support is fantastic. You can choose from plenty of beautiful starter sites or templates in their Site Library.
If changing your theme is too much of a commitment, keep reading.
Change hosting service
It’s a myth that you must pay hundreds of dollars monthly to pass your Core Web Vitals assessment. I only pay $10.95 monthly for mine. I’m on BigScoots’ 155cc Shared Hosting plan.
If you’re on BlueHost, GoDaddy, or HostGator, I suggest looking into BigScoots and seeing which plan fits your budget.
Conclusion
WordPress speed optimization is complex because no two websites are entirely identical. So my guide may or may not work for you. But the more you understand how website performance is assessed and how your website functions, the easier it is to speed it up and keep it running fast.