How I Optimized My Slow WordPress Site For 100% GTmetrix Scores — 28 Tips For Speeding Up WordPress Sites (2020 Guide)

Have a slow WordPress site?

This post you’re reading has over 70 images, 470 comments (while showing Gravatars), uses external fonts, Google Analytics, social sharing buttons, and an embedded YouTube video. Yet, it can load in under 2s with a 2.56MB page size, 89 requests, and 100%/97% GTmetrix scores.

Everyone ranking for “slow WordPress” in Google has a bad GTmetrix report: WP Buffs, Themeisle, Torque Mag, and Search Engine Shop who uses 0 images and copies my keywords.

So thanks for choosing mine!

I’ll show you how to take your GTmetrix + PageSpeed Insights report and make WordPress-specific optimizations that improve grades/load times. I’ve already written popular guides on WP Rocket, slow plugins to avoid, and a list of 24+ speed plugins. This combines everything.

When in doubt, look at the WordPress optimization guide to see the most important factors. The most common fixes for a slow WordPress site are usually related to your infrastructure (theme, hosting, page builder, cache plugin, CDN, and plugins you’re using). While optimizing images and third party scripts can definitely speed up WordPress, most factors are site-wide.

For this, I recommend Cloudways or Kinsta (hosting), Astra or Oxygen Builder (theme + page builder), and WP Rocket (main optimization plugin). You will avoid 90% of speed issues and they’re all rated highly in Facebook polls. Comment with your GTmetrix report if you need help.

How To Speed Up A Slow WordPress Site

  1. Use Faster WordPress Hosting
  2. Rethink Your Theme + Page Builder
  3. Configure A Solid Cache Plugin
  4. Upgrade To PHP 7.4
  5. Enable Varnish + Memcached
  6. Use A CDN
  7. Avoid 65+ Slow Plugins
  8. Optimize Third Party Scripts
  9. Google Fonts
  10. Google Analytics
  11. Google AdSense
  12. Google Tag Manager
  13. Comments + Gravatars
  14. Facebook Pixel
  15. Use A Fast Social Sharing Plugin
  16. Optimize Images + Videos
  17. Reduce Server Response Times
  18. Clean Your Database
  19. Remove Bloat
  20. Disable Plugin Usage Tracking
  21. Disable Plugins On Specific Pages + Posts
  22. Minimize Redirects
  23. Don’t Enable Yoast Indexables
  24. Utilize Plugins By Gijo Varghese
  25. Increase Memory Limit To 256MB
  26. Make WooCommerce Load Faster
  27. Block Bad Bots From Using Resources
  28. Identify Bottlenecks In Speed Testing Tools

GTmetrix (load times) should be your primary metric while PageSpeed Insights doesn’t even measure load times. Getting 100% in every single tool is not realistic unless you have a bare bones, static HTML site. Don’t obsess over scores – obsess over your actual load times instead.

2020-GTmetrix-Report

Watch My Video – it’s a 42 minute video, but I cover pretty much everything (timestamps are found in video description). You will learn a ton of good stuff on WordPress speed optimization.

 

1. Use Faster WordPress Hosting

Hosting is the #1 factor in the WordPress optimization guide.

Run your website through Google PageSpeed Insights and check if reduce server response times is in your report. Google recommends a response time of <200ms. You can also check your TTFB (time to first byte) in the GTmetrix Timings tab. If these are slow, so is your hosting.

Reduce Server Response Time

I would personally skip the shared crap and go with Cloudways.

They’re who most people recommend in the WordPress Hosting Facebook Group and #1 in most recent Facebook polls, especially since SiteGround increased prices and went downhill. I migrated from SiteGround to DigitalOcean on Cloudways and you can view the results below.

SiteGround-vs-Cloudways

I use them and you can check my GTmetrix report, or visit cwdoserver.com to see the speed of a $10/month Cloudways DigitalOcean test server I set up with an Astra Site. It loads instantly (for reference, stgrndserver.com is the identical Astra Site only on SiteGround’s GrowBig plan).

Do your research on EIG, SiteGround’s CPU limits, and look at Facebook polls, conversations, and migration results. Check your server response time in PageSpeed Insights and your TTFB.

2020-Hosting-Poll

Cloudways Response Times

Godaddy-to-DigitalOcean-Migration

VPS Cloud Hosting WooCommerce Poll

SiteGround-Alternative

Hosting Recommendations Facebook

2017-WordPress-Hosting-FB-Poll

Favorite Hosting For Elementor

Elementor-Hosting-Poll

Untitled

Vultr-Migration

WordPress Hosting Suggestions

SiteGround-Alternative-For-Beginners

VPS Cloud Hosting Poll

2016-WordPress-Hosting-FB-Poll

Elementor Hosting Recommendations

Cloudways-Facebook-Review

I signed up for 15+ hosting accounts to test their speed. All domains in this video are live, which means you can visit them in real-time and click through their pages, use GTmetrix, etc.

Each website is identical except for it’s hosting (same Astra Starter Site, SSL, no caching, no CDN, and the same 6 plugins). I also used WP Hosting Performance Check and KeyCDN to measure the most popular options. The results align with what most people are saying in the WordPress Hosting Facebook Group which I recommend joining to get real, unbiased opinions.

#1. DigitalOcean On Cloudwayscwdoserver.com was the fastest, is who I use, and are very popular in Facebook Groups (especially as an alternative to SiteGround). DigitalOcean is also the only host mentioned in the WordPress Optimization Guide. Cloudways was #1 in most recent Facebook polls and people who migrate usually see significant load time improvements. They use PHP 7.4, Maria DB 10.3, Memcached, Varnish, Nginx, and Redis. Pricing starts at $10/month with no strict CPU limits or renewal prices like on other hosts. The community manager is very helpful and they do free migrations. You can get 25% off your first 2 months with the promo code OMM25.

#2. Kinstaknstaserver.com had similar speeds as DigitalOcean on Cloudways only they are more expensive starting at $30/month. Known for being capable of handling many concurrent visitors. People consistently recommend Kinsta in Facebook Groups, Twitter, and in migration results. Even though they’re not always #1 in Facebook polls (likely because not everyone can pay $30+/month), they are great for high traffic sites.

#3. WPX Hostingwpxserver.com is also very quick, but Cloudways and Kinsta are slightly faster. Starts at $20-$25/month and is who Matthew Woodward recommends.

#4. A2 Hostingatwoserver.com usually outperformed other shared hosting but is not nearly as fast as cloud hosting (just cheaper). I use A2 for my girlfriend’s restaurant website and it’s decently fast with good uptimes. A2 (and all shared hosting) is only sufficient for smaller websites with low traffic/plugins. Otherwise, use cloud hosting.

#5. SiteGround – has gone downhill with many complaints about their renewal prices, price hikes, CPU limits, and support isn’t as good as it used to be. SiteGround shifted to Google Cloud hosting (instead of shared) which is supposed to be faster, but load times and TTFB on stgrndserver.com were usually above 1s. Their SG Optimizer plugin should help, but I still wouldn’t use them. You’re better off on Cloudways DigitalOcean.

Affiliate Disclaimer – I would seriously appreciate you using my affiliate links which means I earn a commission at no expense to you. This would help me make GoFundMe donations ($6,000 so far)! I try to base my recommendations on tests, Facebook polls, and conversations I see on a daily basis in the 30+ WP Facebook Groups I’m active on.

 

2. Rethink Your Theme + Page Builder

Most people are using Astra Themes.

The only problem with Astra is that most of their themes use page builders. Even Elementor adds a lot of scripts that can mildly slow down your WordPress site (you can check these in Asset CleanUp or Perfmatters). That was my biggest complaint when I had my site redesigned in Astra (I even went themeless). My StudioPress theme was slightly faster with 0 extra scripts.

It really depends on what you want; if you like Astra + Elementor for designing your site and don’t mind a slight decrease in speed, that’s what I would recommend. If you’re a speed freak like me and only want the fastest stuff, I wish I would have stuck with StudioPress and Genesis.

studiopress-themes

Here were my extra CSS and JavaScript files added by Elementor:

Elementor-Scripts

I recommend either Astra or Oxygen Builder.

Astra-Themes-Facebook-Poll

 

3. Configure A Solid Cache Plugin

As far as GTmetrix scores go, your cache plugin has the biggest impact.

WP Rocket is the most popular cache plugin (it’s also what I use) mainly because it comes with more speed optimization features than any other cache plugin. This not only results in better GTmetrix scores, but also means you don’t have to install a bunch of extra plugins on your site.

Get 10% off WP Rocket by signing up for their email list on their coupons page. Then check my recommended WP Rocket settings for optimal GTmetrix scores/load times.

With most other cache plugins, you would need to install about 7 extra plugins to get these features when WP Rocket has them all built-in. Otherwise you will need to research which features your cache plugin comes with, then install these plugins if it doesn’t support them.

2016 best cache plugin poll

2019 cache plugin poll

Swift vs WP Rocket

2016 cache plugin poll

Best cache plugins 2018 poll

wp rocket vs w3 totla cache

What About SG Optimizer? If you’re on SiteGround, use their SG Optimizer plugin (instead of WP Rocket) with these SG Optimizer settings. It’s free and comparable to WP Rocket (you will still need heartbeat control and database cleanup). This plugin is only for SiteGround’s hosting.

WP Engine + GoDaddy – these hosts have their own built-in caching system and blacklist you from using cache plugins. In this case, use Autoptimize to optimize HTML, CSS, and JavaScript.

I also have configuration tutorials for WP Fastest Cache, W3 Total Cache, WP Super Cache, and Swift Performance, but I definitely recommend WP Rocket as your one and only caching plugin.

 

4. Upgrade To PHP 7.4

Login to your hosting account (or use the Display PHP Version plugin) to see which PHP version you’re currently running. WordPress stats show most users are running outdated PHP versions when PHP 7.4 is available on many hosting accounts. Upgrading is as simple as finding the PHP Version Manager (or similar) in your hosting account, then upgrading the latest version of PHP.

PHP-7.4

WordPress PHP Benchmarks

Some hosts are quick to release new versions (SiteGround, Cloudways, Kinsta), while others don’t make an effort to stay current in technology. Another reason to avoid EIG and GoDaddy.

*Check your website for visible errors since non-maintained plugins may not be compatible. If you do see errors, you can always revert back to an earlier PHP version.

 

5. Enable Varnish + Memcached

Many cloud hosting providers support Varnish + Memcached. Login to your hosting account and activate them. If you’re using Varnish, be sure to enable the Varnish addon in WP Rocket.

Hosting-Application-Services

 

6. Use A CDN

Most people use Cloudflare or RocketCDN (from WP Rocket).

RocketCDN uses StackPath’s data centers and offers it at a lower price than if you buy directly from StackPath. Both are great CDNs, but there are a few major differences between the two.

Cloudflare vs. RocketCDN

  • Cloudflare is free, RocketCDN is $6.99/month
  • Cloudflare cannot serve images from their CDN, StackPath can
  • Cloudflare has 200+ data centers, StackPath has 45 data centers
  • Cloudlare’s data centers are likely not as high-performance as StackPath
  • Cloudflare has a dashboard you can login to and tweak, RocketCDN does not
  • Cloudflare’s dashboard has extra features like page rules, Rocket Loader, Railgun
  • Cloudflare requires changing nameservers (some hosts also have an option to activate Cloudflare directly from your account), StackPath’s set up is automatic with WP Rocket

Cloudflare-Bandwidth-Savings

Ensure Cloudflare Compatibility With WP Rocket – WP Rocket and most other cache plugins ask for your Cloudflare Zone ID, Global API Key, and your Cloudflare account email. Add them.

WP-Rocket-Cloudflare-Add-On

Configuring The Cloudflare Dashboard – if you’re using Cloudflare, login to your dashboard. There are a few things in here that aren’t available if you set up Cloudflare through your host.

Page Rule 1: Cache Everything And Force HTTPS – cache your website aggressively.

http://*yourwebsite.com/*

Always-Use-HTTPS-Page-Rule

Page Rule 2: Secure The WordPress Admin And Bypass Cache – sets security level of the admin to high and bypasses Cloudflare’s cache in the admin, since you don’t want CDNs (or apps + performance features like Rocket Loader) running inside the admin.

yourwebsite.com/wp-admin*

WordPress-Admin-Page-Rule

Page Rule 3: Decrease Bandwidth Of WP Uploads – since the content in your WP Uploads folder does not change frequently, increasing Edge Cache TTL to a month can save on bandwidth, since the WP Uploads folder cache won’t be refreshed as often.

yourwebsite.com/wp-content/uploads*

WP-Uploads-Page-Rule

Setting Up RocketCDN Or StackPath – the easiest way to set up RocketCDN is with WP Rocket. If not using WP Rocket, you will need to sign up for a StackPath account through their website then follow instructions for creating a CDN site. They will assign you a CDN URL which most cache plugins (including Autoptimize) have a field for. Or use the CDN Enabler plugin.

Make Sure Your CDN Is Working – every CDN should show 100% in GTmetrix YSlow except Cloudflare’s CDN. To make GTmetrix detects Cloudflare, you’ll need to sign up for a GTmetrix account → User settings → “add your hostname to YSlow CDN Hostnames.” You can also use Cloudflare’s Claire Chrome Extension to see if it’s working. GTmetrix always detects StackPath.

CDN GTmetrix YSlow

 

7. Avoid 65+ Slow Plugins

You can find your slowest plugins in the GTmetrix Waterfall tab or Query Monitor.

Slow WordPress Plugin

Most slow WordPress plugins include social sharing, statistic (analytics), sliders, portfolios, page builders, calendars, chat, contact forms, related post, sitemap, Wordfence, WPML, WooCommerce, and any plugin that runs ongoing scans or processes. These can be identified using Query Monitor or GTmetrix Waterfall.

  1. AddThis
  2. AdSense Click Fraud Monitoring
  3. All-In-One Event Calendar
  4. Backup Buddy
  5. Beaver Builder
  6. Better WordPress Google XML Sitemaps
  7. Broken Link checker (use Dr. Link Check)
  8. Constant Contact for WordPress
  9. Contact Form 7
  10. Contextual Related Posts
  11. Digi Auto Links
  12. Disqus Comment System
  13. Divi Builder
  14. Essential Grid
  15. View Full List Of 65 Slow Plugins

Lightweight Plugin Alternatives

 

8. Optimize Third Party Scripts

Third party scripts are anything that create requests from external websites.

These include Google Fonts, Analytics, Maps, AdSense, Tag Manager, embedded videos, social media widgets, Facebook Pixel, Gravatars, or even like buttons from your social sharing plugin. Some can be optimized to have no impact on GTmetrix while AdSense/Tag Manager are harder.

The next sections (7-16) show you how to optimize specific third party scripts that may be giving you errors in your GTmetrix and Google PageSpeed Insights reports.

Step 1: Learn Which Third Party Scripts Are Slowing Down Your Site
Look at reduce DNS lookups in GTmetrix YSlow or third party usage in PageSpeed Insights.

External-Scripts

Common third party domains taken from Github:


//maps.googleapis.com
//maps.gstatic.com
//fonts.googleapis.com
//fonts.gstatic.com
//use.fontawesome.com
//ajax.googleapis.com
//apis.google.com
//google-analytics.com
//www.google-analytics.com
//ssl.google-analytics.com
//www.googletagmanager.com
//www.googletagservices.com
//googleads.g.doubleclick.net
//adservice.google.com
//pagead2.googlesyndication.com
//tpc.googlesyndication.com
//youtube.com
//i.ytimg.com
//player.vimeo.com
//api.pinterest.com
//assets.pinterest.com
//connect.facebook.net
//platform.twitter.com
//syndication.twitter.com
//platform.instagram.com
//referrer.disqus.com
//c.disquscdn.com
//cdnjs.cloudflare.com
//cdn.ampproject.org
//pixel.wp.com
//disqus.com
//s.gravatar.com
//0.gravatar.com
//2.gravatar.com
//1.gravatar.com
//sitename.disqus.com
//s7.addthis.com
//platform.linkedin.com
//w.sharethis.com
//s0.wp.com
//s1.wp.com
//s2.wp.com
//stats.wp.com
//ajax.microsoft.com
//ajax.aspnetcdn.com
//s3.amazonaws.com
//code.jquery.com
//stackpath.bootstrapcdn.com
//github.githubassets.com
//ad.doubleclick.net
//stats.g.doubleclick.net
//cm.g.doubleclick.net
//stats.buysellads.com
//s3.buysellads.com

Step 2: Add Domains To Prefetching
Take the external scripts from your GTmetrix report and add them to WP Rocket (Preload → Prefetch DNS Requests). Prefetching and other browser resource hints makes them load faster. If you don’t have WP Rocket, you can do this with Perfmatters or Pre* Party Resources Hints.

Prefetch-DNS-Requests

Step 3: Use Flying Scripts To Delay Loading Them
The Flying Scripts plugin delays loading JavaScript until the timeout period you set in the plugin. It’s the only plugin that let me show Gravatars without them impacting my GTmetrix report, but this can also be done with other third party scripts. Just enter the keyword of the script into the plugin (eg. discuz) and set a timeout period. I also recommend checking out Gijo’s speed plugins.

Flying-Scripts

Don’t forget to see the next few sections which will help you better optimize external scripts.

 

9. Google Fonts

Here are 4 steps for optimizing Google Fonts and Font Awesome.

Optimize Fonts With WP Rocket Or SG Optimizer – both WP Rocket and SG Optimizer have an option to optimize Google Fonts. This combines your fonts to create fewer HTTP requests.

Optimize-Google-Fonts

Host Google Fonts Locally – use the OMGF plugin to host fonts locally. The plugin will automatically download your fonts, create a stylesheet for them, then include it in the header.

Preload Fonts – grab the URLs of your font files in the GTmetrix Waterfall report and add them to WP Rocket’s “preload fonts” option, or in OMGF. This helps browsers download fonts faster.

Preload-Fonts

Be Minimal With Fonts + Weights – be minimal with the number of fonts and weights.

 

10. Google Analytics

Hosting Google Analytics locally will fix the leverage browser caching issue for Google Analytics in GTmetrix. For this, I use the Flying Analytics plugin since WP Rocket’s Google Tracking add-on still showed errors. Insert your Google Analytics Tracking ID (the UA code) into the plugin, then use the “Minimal Analytics Inlined” method which only adds a measly 1.4KB.

Flying-Analytics

Plugins to host Analytics locally: WP Rocket, Perfmatters, Flying Analytics, CAOS.

 

11. Google AdSense

Google Adsense is one of the most difficult scripts to optimize and you shouldn’t expect a good GTmetrix report with it. You can try enabling Cloudflare’s Rocket Loader which defers loading of JavaScript until after rendering, but affiliate links are way faster and usually more profitable.

 

12. Google Tag Manager

GTM should usually only be used for large, unoptimized sites.

If you absolutely need it, use a good Google Tag Manager plugin and be minimal with tags, but that’s about all you can do. I don’t use GTM on my website (my load times are more important).

Google Tag Manager Speed

 

13. Comments + Gravatars

I use 3 plugins for comments which you’ll see zero errors for in GTmetrix.

  • wpDiscuz: commenting plugin.
  • Flying Scripts: delays loading of Gravatars.
  • WP User Avatar: use a custom, optimized photo as the default avatar.

Step 1: Configure wpDiscuz to load faster.

Comment thread displaying → initiate AJAX loading after page and lazy load comment.

Disqus-Comment-Thread-Displaying

General → disable “use WordPress native AJAX functions” and enable combine/minify JS/CSS.

Disqus-General-Settings

Styles and colors → disable “load font awesome CSS lib.”

Disqus-Load-Font-Awesome-CSS-Lib

Step 2: Delay Gravatar loading with the Flying Scripts plugin.

Speed-Up-Comments

Step 3: Upload a custom, optimized photo using WP User Avatar.

WP-User-Avatar

Retest your GTmetrix report and your comments should load much faster with no errors.

 

14. Facebook Pixel

Use the Pixel Caffeine plugin and host Facebook Pixel locally in WP Rocket.

Facebook-Pixel-Browser-Caching

 

15. Use A Fast Social Sharing Plugin

WP Rocket did a test on the fastest social sharing plugins.

The Grow by Mediavine plugin (Social Pug) was rated the #1 fastest social sharing plugin. It’s also what I use and saw no difference in my GTmetrix report. You can see a preview near my comments section; the buttons look nice, can be loaded before and after the content, and has options for Facebook, Twitter, Pinterest, LinkedIn, email, print. You can also do a floating bar.

 

16. Optimize Images + Videos

There are several ways to optimize images. The first 3 items are in GTmetrix, the last 2 are from PageSpeed Insights. Speed testing tools only show you unoptimized images for the single page you test (keep that in mind when fixing serve scaled image or specify image dimension errors).

  • Serve scaled images – resize large images to be smaller.
  • Specify image dimensions – add a width/height to the image’s HTML.
  • Lossless compress – use an image optimization plugin to compress images.
  • Lazy load images + videos – delays load of images/videos until they’re visibly seen.
  • Serve images using next-gen formats – use WebP/SVG format instead of JPEG/PNG.

image-optimization

Serve Scaled Images – resize large images to be smaller. GTmetrix tells you the correct dimensions. Just click the image in GTmetrix, resize it to the new dimensions, and replace it. Never use the ‘drag to resize’ feature in the visual editor since this only resizes the displayed image (not the actual image). It’s best to resize to the correct dimensions before uploading it.

Serve-Scaled-Images-GTmetrix

Create a cheat sheet so you can use the correct dimensions before uploading images:

  • Slider images: 1903(w) x 400(h)
  • Carousel images: 115(h)
  • Widget images: 414(w)
  • Full width blog post images: 680(w)
  • Featured images: 250(w) x 250(h)

Specify Image Dimensions – means you need to add a width + height in the image’s HTML or CSS. This usually only happens for hand-coded HTML and plugins that don’t take care of this for you. Get the image dimensions from GTmetrix, locate the image, then add the width and height.

Specify-Image-Dimensions-WordPress

Optimize Images – losslessly compress images (also known as “optimize images” in GTmetrix). The best way to compress images is when you’re editing them (eg. in Photoshop or GIMP) since you will likely see a loss in quality with image optimization plugins, even if you select “lossless compression” in the settings. Otherwise, ShortPixel or Imagify are decent options. These plugins can also be resource-intensive and slow down your WordPress website temporarily.

Lazy Load Images + Videos – in your WP Rocket Media settings, enable lazy loading of images, videos, and replace the YouTube iframe with a preview image. These will make images and embedded videos load significantly faster, as they’re often the heaviest element on a page. If you’re not using WP Rocket, try A3 Lazy Load (for images) and WP YouTube Lyte (for videos).

WP-Rocket-Lazy-Load

Serve Images In Next-Gen Formats – most image optimization plugins have an option to convert images to WebP format, or the WebP Converter For Media plugin has great ratings.

Serve-Images-In-Next-Gen-Formats

 

17. Reduce Server Response Times

I want to clarify a few things about server response times.

Most hosting providers let you monitor CPU and RAM (memory usage). If you notice these are very close to exceeding your limits, this will put stress on your server. The whole goal is to make your server “relaxed” by giving it enough server resources to accommodate your site’s resource consumption (from high CPU plugins, traffic, WooCommerce, etc). If you notice you’re almost hitting your limits or exceeding them and getting 503 errors, it means your server is stressed.

Cloud-Memory-Increase

That’s why it’s so important to look at how many server resources come with your hosting plan. Any host that says “unlimited bandwidth” is lying (just check their terms and conditions page and they will mention their CPU limits). Especially if you anticipate high resource consumption, make sure your hosting plan includes enough resources to properly accommodate your site.

SiteGround-Server-Resources-Comparison

 

18. Clean Your Database

Use WP Rocket or WP Optimize to clean your database.

Ongoing cleanups keep your database optimized and removes transients, spam + trash comments, and potentially hundreds of post revisions which WordPress stores automatically every time you update content. Unless you need post revisions to restore backups of old content, you should be able to delete everything. I recommend scheduling weekly cleanups.

WP-Rocket-Database-Settings

Delete Old Plugin Tables – one thing I like about WP-Optimize is the option to delete database tables left behind by old plugins that aren’t installed anymore (these are often pre-configured settings). If you don’t plan on using these plugins again, delete the tables that say “not installed.”

WP-Optimize-Tables

 

19. Remove Bloat

Perfmatters (by Kinsta) is the ultimate bloat removal plugin.

The features page includes descriptions of what each item does, but it removes unnecessary WordPress features which you probably don’t need. It even has options for optimizing your Google Analytics tracking code, WooCommerce, prefetch + preconnect, and heartbeat control. Remember to selectively disable plugins in the Perfmatters script manager or Asset CleanUp!

perfmatters-features

Limit Post Revisions – use Perfmatters or add the code to your wp-config file.

define('WP_POST_REVISIONS', 5);

Increase Autosave Interval – use Perfmatters or add the code to your wp-config.php file.

define('AUTOSAVE INTERVAL', 5);

Disable Trackbacks + Pingbacks – use Perfmatters or disable in Settings → Discussion.

Disable-Trackbacks-Pingbacks

Disable Unused Addons + Modules – if you’re using a plugin containing a bunch of addons or modules (Elementor, Ultimate/Premium Addons, JetPack), delete the ones you’re not using.

Disable-Addons

Delete Unused Plugins + Themes – any plugins/themes you’re not using should be deleted.

Delete Unused WordPress Themes

 

20. Disable Plugin Usage Tracking

Any time you have an option to disable usage tracking, do it. Sorry plugin developers.

I also don’t recommend Yoast’s speed indexing (the comments have horrible reviews).

Yoast-Speed-Indexing

 

21. Disable Plugins On Specific Pages + Posts

The Perfmatters script manager (premium) and Asset CleanUp (free) both let you disable plugins/scripts from running on specific pages/posts. Some plugins load across your entire site (even on content they’re not being used on), so it’s best to disable them when that’s the case.

Examples:

  • Disable slider plugin on pages that don’t use sliders
  • Disable rich snippets plugin on pages that don’t use rich snippets
  • Disable contact form plugin on pages that don’t have a contact form
  • Disable affiliate link management plugin on pages that don’t use aff links
  • Disable social sharing plugin on all pages (since it’s usually for blog posts)

perfmatters-script-manager

Perfmatters and Asset CleanUp (the premium version) have a Regex option that allows you disable plugins/scripts based on specific URL patterns and categories. For example, you may want to only enable your schema plugin on posts containing the word “review” in the URL.

 

22. Minimize Redirects

If you have URL redirect errors in GTmetrix, it usually means you changed the WWW or HTTP(S) version of your website but didn’t change all your links and images to reflect the new version. In this case, try using the Better Search & Replace plugin to fix these errors in bulk.

minimize redirects

Third party scripts and poorly coded plugins can also cause redirect errors in GTmetrix. The solution completely depends on which plugins and third party scripts you’re using on the site.

 

23. Don’t Enable Yoast Indexables

Yoast 14.0 came out with indexables which they claim “can provide a speed boost of 5-10%.”

However, if you look at the comments, it’s clear they have not thoroughly tested this (many complaints about CPU spikes, crashed websites, errors, etc). None of the feedback looks positive, so I would at least hold off of clicking that button until they do more thorough testing.

Yoast-Speed-Indexing

 

24. Utilize Plugins By Gijo Varghese

Gijo Varghese has create quite a few plugins for speeding up WordPress.

These plugins help you host Google Analytics locally, optimize images and serve them from a CDN, preload pages, delay loading scripts by creating a timeout, and ensure text remains visible while loading fonts. All have great ratings. Check out his WP Speed Matters Facebook Group.

Gijo-Varghese-plugins

 

25. Increase Memory Limit To 256MB

WooCommerce and WPML require a 256MB memory limit, but you should really be using 256MB no matter which type of WordPress site you’re running. Some hosts have an option to increase it in their dashboard, otherwise edit your wp-config.php file and add the code below.

Cloudways-Memory-Limit

define('WP_MEMORY_LIMIT', '256M');

 

26. Make WooCommerce Load Faster

WooCommerce sites run extra scripts, styles, cart fragments, and they usually require more plugins. That’s why when choosing a hosting plan, you should usually buy one tier up of what you actually need to accomodate for the extra resources often required for WooCommerce.

WooCommerce Cart Fragments

Optimize WooCommerce Scripts, Styles, Cart Fragments
To optimize these, use Perfmatters or there are quite a few solutions on Github and WooCommerce. Disabling scripts will disable WooCommerce scripts and styles everywhere except on product, cart, and checkout pages. There’s also an option to disable cart fragments.

perfmatters woocommerce optimization

Clear WooCommerce Transients
If you feel like your WooCommerce website is getting sluggish, go to WooCommerce Status settings → delete all transients. Transients temporarily store cached data in your database.

Delete WooCommerce Transients

 

27. Block Bad Bots From Using Resources

You would never know if spam bots are hitting your site unless you checked your Wordfence live traffic report. By blocking them, you will save resources and put less stress on your server.

Step 1: Install Wordfence (you’ll want to uninstall it when you’re done).

Step 2: View your live traffic report (under Wordfence’s Tools settings) which shows you all bots hitting your website in real-time. Googlebot is obviously OK, but when I did this, I saw compute.amazonaws.com making a ridiculous amount of requests every couple seconds. I Googled it and sure enough, this was a bot known for sucking up bandwidth. View your report for a minute or two and see if bots with sketchy names are constantly hitting your site. If you have doubts, Google their hostnames and see if other people are having issues with that bot.

Live-Traffic-Report-Wordfence

Step 3: Block the bots. You have a few options: Wordfence blocking (however the plugin itself consumes resources), Cloudflare firewall rules (comes with 5 free rules which means you can block 5 bots), or the Blackhole For Bad Bots. I have a tutorial for blocking bad bots using all 3 methods. It depends on how many you want to block; if it’s only a few, I’d use Firewall Rules.

Login to your Cloudflare Dashboard and go to Firewall → Firewall Rules → Create A Firewall Rule. Copy the bad bot’s hostnames (from Wordfence) and add it here in the “Value” field. Since you can create 5 rules, you would repeat this step for your 5 worst bad bots from Wordfence.

  • Field = Hostname
  • Operator = Contains
  • Value = hostname of the bad bot you found in Wordfence

Cloudflare Firewall Rule To Block Bad Bots

Step 4: Go to your Blocking log in Cloudflare and watch your spam bots get blocked.

Cloudflare-Firewall-Events

 

28. Identify Bottlenecks In Speed Testing Tools

GTmetrix – my tool of choice since you can find exactly which images, plugins, fonts, and external scripts take longest to load (plus it shows your time to first byte and redirect errors).

2020-GTmetrix-Report

Pingdom – the most accurate tool for measuring your load times according to WP Rocket which is the primary metric you should be measuring (not grades), but there is a correlation.

Google PageSpeed Insights – good for measuring server response times but also has other recommendations like using next-gen format for images (eg. WebP), lazy loading, avoid third party scripts, preconnect, minification, caching recommendations, and serving scaled images.

Query Monitor – great for finding slow plugins, scripts, styles, and other elements slowing down your site. Make sure to delete it when you’re done since the plugin itself can be slow.

Get Help Fixing Your GTmetrix Report

 

Frequently Asked Questions

🚀 What are the most important speed factors?

Your infrastructure (hosting, theme, plugins, page builder, CDNs) have the biggest impact on load times.

🚀 Which cache plugin should you use?

WP Rocket is usually rated the top cache plugin in Facebook polls since it has built-in features most cache plugins don't. These extra optimizations should yield better scores and load times in GTmetrix. The top free cache plugins are usually WP Fastest Cache, W3 Total Cache, and Swift Performance.

🚀 Which WordPress hosting should you use?

The best hosting is highly debatable, but Cloudways, SiteGround, and Kinsta generally the top 3 hosts based on 30+ Facebook polls.

🚀 Which speed testing tool should you use?

GTmetrix has the most robust recommendations especially for finding slow plugins, images, external scripts, and measuring TFFB. Pingdom doesn't have as many recommendations, and Google PageSpeed Insights doesn't measure load times.

🚀 How do you optimize images?

You can optimize images using a plugin like ShortPixel or Smush to compress images and strip EXIF data. Make sure you're resizing images to the correct dimensions, and ideally serve them from a CDN. Lazy loading images and videos will also make the page faster.

🚀 Should you use AMP?

Generally, you should avoid AMP (accelerated mobile pages) since the design changes can lower conversions. Kinsta's conversions dropped 59% after adding AMP and they decided to remove them.

🚀 How do you optimize plugins?

Find high CPU plugins using Query Monitor which usually include portfolios, statistics, sliders, and plugins that run ongoing processes. Next, replace them with lightweight plugins that consume minimal resources. Delete all plugins you're not using, and disable unnecessary plugin settings that consume resources. Finally, selectively disable plugins from loading on certain content using a plugin like Asset Manager or Perfmatters.

🚀 How do you optimize external scripts?

It's best to avoid external scripts all together, such as Google AdSense, Facebook widgets, and plugins that create external requests. Some plugins such as Disques let you load it conditionally. If the page contains JavaScript, try the Async JavaScript plugin. Finally, prefetch all external URLs that are loading on the page.

Really hope this helped! Drop your new GTmetrix scores + load times in the comments :-)

Cheers,
Tom

25 WordPress Speed Optimization Plugins For Speeding Up Your Website In 2020 (Same Ones I Used To Get 100% GTmetrix Scores)

WordPress Speed Optimization Plugins

Need a solid list of WordPress speed optimization plugins?

These are the same speed plugins I used to get 100% GTmetrix scores on my homepage and most of my posts. They’re a collection of plugins I use myself and popular plugins in Facebook Groups. I do WordPress speed optimization for a living – so I geek pretty hard on the plugins!

This is not a typical list of cache plugins: I dive into advanced plugins like selectively plugin disabling, browser resource hints for external scripts, hosting things locally, and bloat removal.

ps. If you join the WordPress Speed Up Facebook Group they have a list of 60+ recommended WordPress Speed Up Tools and useful links. But I did try to include the important ones here :)

The only speed optimization plugins I use on my site are WP Rocket, Perfmatters, WP-Optimize, TinyPNG, and wpDiscuz (my lightweight comment plugin). If you’re using SG Optimizer or another caching plugin, you will need to install a few extra speed plugins since these lack some functionality (see the notes listed in each section below).

The Best WordPress Speed Plugins Of 2020

  1. WP Rocket
  2. SG Optimizer
  3. Perfmatters
  4. Asset CleanUp
  5. TinyPNG
  6. WP-Optimize
  7. WP YouTube Lyte
  8. Heartbeat Control
  9. Pre* Party Resource Hints
  10. OMGF | Host Google Fonts Locally
  11. CAOS | Host Google Analytics Locally
  12. wpDiscuz
  13. Flying Scripts
  14. WP User Avatar
  15. CDN Enabler
  16. Breeze By Cloudways
  17. Autoptimize
  18. WP Fastest Cache
  19. ToolKit For Elementor
  20. AMP For WP
  21. Query Monitor
  22. Display PHP Version
  23. GTmetrix For WordPress
  24. WP Hosting Performance Check
  25. Better Search Replace

1s-2020-GTmetrix-Report

 

1. WP Rocket

WP Rocket was rated the #1 cache plugin in most Facebook polls.

That’s because it comes with more features than any other cache plugin. This means better GTmetrix results and less plugins needed on your site. Otherwise, with other cache plugins, you would need to research which features it doesn’t include, then install these extra plugins if it doesn’t support them. If you’re like me, you want to use 1 plugin (WP Rocket) for everything.

  • Database cleanup (built-in to WP Rocket, or use WP-Optimize)
  • Heartbeat control (built-in to WP Rocket, or use Heartbeat Control)
  • Lazy load images/videos (built-in to WP Rocket, or use WP YouTube Lyte)
  • Host Google Analytics locally (built-in to WP Rocket, or use CAOS For Analytics)
  • Prefetch DNS Requests (built-in to WP Rocket, or use Pre* Party Resource Hints)
  • Host Google Fonts locally (built-in to WP Rocket, or use CAOS For Fonts, or SHGF)
  • Integration with Cloudflare + other CDNs (built-in to WP Rocket, or use CDN Enabler)

Get 10% off WP Rocket by signing up for their email list on their coupons page. Then check my recommended WP Rocket settings for optimal GTmetrix scores/load times.

2016 best cache plugin poll

2019 cache plugin poll

Swift vs WP Rocket

2016 cache plugin poll

Best cache plugins 2018 poll

wp rocket vs w3 totla cache

WP-Rocket-Features

 

2. SG Optimizer

SG-Optimizer-Plugin

SG Optimizer only works if you’re on SiteGround’s hosting.

On a demo website, I tested SG Optimizer with a fresh installation of Astra’s Outdoor Adventure theme on SiteGround’s GrowBig plan and got a 1s load time with 99%/94% GTmetrix scores. If I used a CDN, my GTmetrix scores would have been exactly 99%/100%.

Since SiteGround’s big update to SG Optimizer, it’s now comparable to WP Rocket. It also uses server-side caching and binaries which is faster and more efficient than the file-based caching by other cache plugins (including WP Rocket). If you’re on SiteGround, I would definitely use it.

See my recommended SG Optimizer settings to learn how to configure SG Optimizer.

SG Optimizer Features

  • Caching (static, dynamic, memcached)
  • Minify & combine HTML, CSS, JS
  • Gzip compression
  • PHP version selection
  • Optimize Google Fonts
  • Defer render-blocking JS
  • Compress new + existing images
  • Lazy load images, videos, iframes, Gravatars, thumbnails, widgets, mobile

Features SG Optimizer Lacks

  • Heartbeat control
  • Database cleanup
  • Bloat removal
  • CDN URL
  • Prefetch + preconnect
  • Host Google Analytics locally

 

 

 

3. Perfmatters

Kinsta’s Perfmatters is the ultimate bloat removal plugin.

A few notable features include decreasing the autosave interval, limiting post revisions, disabling heartbeat and pingbacks, prefetching + preconnecting fonts and third party scripts, and optimizing WooCommerce scripts, styles, and cart fragments. It basically takes care of the last 10% of WordPress speed optimization with features WP Rocket/SG Optimizer don’t have.

perfmatters features

Perfmatters includes a script manager for selectively disabling scripts/plugins on specific content (same thing as Asset CleanUp). Some plugins load across your entire site even when they’re not being used. By selectively disabling plugins, you will reduce page sizes and make them load faster. There’s also a Regex option to better control where plugins are being loaded.

Examples:

  • Disable slider plugin on pages not using sliders
  • Disable rich snippets plugin on pages not using rich snippets
  • Disable contact form plugin on pages not using contact forms
  • Disable affiliate link management plugin on pages not using aff links
  • Disable social sharing plugin on all pages (since it’s usually for blog posts)

perfmatters-script-manager

 

4. Asset CleanUp

Same thing as the Perfmatters script manager (lets you selectively disable scripts/plugins) only Asset CleanUp doesn’t have bloat removal options, but it is free. Plugin Organizer and Plugin Load Filter are similar, but AssetCleanUp has great reviews and is what most people are using.

Asset CleanUp Check All

 

5. TinyPNG

Compresses images to get 100% for the “optimize images” items in GTmetrix.

I have tried Imagify, ShortPixel, and other image optimization plugins but they all resulted in a loss in quality even when the “lossless” option was selected. Slowly but surely, I am redoing these images in TinyPNG. I see barely any quality loss which I can’t say for the other plugins.

TinyPNG-Plugin

 

6. WP-Optimize

A big difference between WP-Optimize and WP Rocket’s database cleanup feature, is that WP-Optimize lets you delete old plugin tables.

Both plugins let you delete trash (trashed posts, spam posts, post revisions, transients) and optimize your database tables. But WP-Optimize lets you view your individual database tables and delete tables left behind by old (not installed) plugins. If you don’t plan on using these plugins again, you can delete their tables since they often leave behind pre-configured settings.

WP-Optimize-Tables

WP Rocket does the same thing, only it doesn’t let you delete old plugin tables:

WP-Rocket-Database-Settings

 

7. WP YouTube Lyte

Lazy loads videos by inserting responsive “Lite YouTube Embeds” which only calls the “fat” YouTube player when the play button is clicked. Videos take the longest time to load by far. Just to give you an idea, my W3 Total Cache tutorial only has 2 videos, but when I lazy load them that post’s load time went from 5s to 1.5s. It has the same function as light video embeds.

If using WP Rocket, you can simply lazy load videos and replace iframes with a preview image.

WP-Rocket-Lazy-Load

 

8. Heartbeat Control

The WordPress heartbeat API consumes resources by sending you real-time plugin notifications, when other users are editing a post, and so on. 99% of people should disable it.

Heartbeat-Control

WP Rocket and Perfmatters also let you disable it, or add this code to your functions.php file.

add_action( 'init', 'stop_heartbeat', 1 );
function stop_heartbeat() {
wp_deregister_script('heartbeat');
}

 

9. Pre* Party Resource Hints

Supports browser resources hints which can make fonts and scripts load faster.

WP Rocket already supports prefetch + preconnect, otherwise you can use Pre* Party Resource Hints. Third party scripts can be found in the “reduce DNS lookups” section of your GTmetrix report or shown as “reduce the impact of third party code” in PageSpeed Insights.

These can be Gravatars, Google Analytics, Maps, Tag Manager, AdSense, embedded videos, or any third party request generated on your website. You’ll want to prefetch these (Luke created a nice list of common domains to prefetch). And if you’re using Google Fonts or Font Awesome, grab your font URLs from the GTmetrix Waterfall tab and add them to the preconnect section.

Third-Party-Usage

 

10. OMGF | Host Google Fonts Locally

OMGF can fix Google Font-related errors by downloading all your Google Fonts (using the Google Fonts Helper API) and generating a stylesheet for them. You will need to configure the settings to serve fonts from your CDN and select the folders to save font files to. While some plugins like WP Rocket and SG Optimizer already optimize fonts, OMGF can often yield better results especially when served from a CDN. The Self-Hosted Google Fonts plugin is similar.

Google-Fonts-GTmetrix

What it looks like:

OMGF-Settings

Tip: if using external fonts, be minimal with the number of fonts (and font weights) you choose. If for some reason this plugin doesn’t fix errors, I have a guide for hosting Google Fonts locally.

 

11. CAOS | Host Google Analytics Locally

Leverage Brower Caching Google Analytics

CAOS fixes the leverage browser caching item in GTmetrix by hosting Google Analytics locally. Install the plugin, enter your Tracking-ID, and CAOS will add the Tracking Code to the header or footer. But if you’re using WP Rocket or Perfmatters, these already have this functionality.

CAOS-Analytics-Settings

 

12. wpDiscuz

Why is wpDiscuz in my list of WordPress speed plugins?

Because with wpDiscuz, I get an awesome comment plugin on my blog with virtually no expense to my GTmetrix report. This is usually not the case with other commenting plugins. Go to your wpDiscuz settings and use the tweaks below which should make the plugin load faster.

Recommended settings to speed up wpDiscuz:

Comment Thread Displaying → initiate AJAX loading after page and lazy load comment.

Disqus-Comment-Thread-Displaying

General → disable “use WordPress native AJAX functions” and enable combine/minify JS/CSS.

Disqus-General-Settings

Styles And Colors → disable “load font awesome CSS lib.”

Disqus-Load-Font-Awesome-CSS-Lib

 

13. Flying Scripts

Flying_Scripts_by_WP_Speed_Matters

This plugin helps you optimize third party scripts found in GTmetrix (reduce DNS lookups) and PageSpeed Insights (minimize third party scripts).

It delays loading of JavaScript until the timeout period you set in the plugin. For example, you can delay loading your comments plugin and Gravatars for 3 seconds which can significantly speed up initial load times. In fact, Flying Scripts is the only plugin that let me show Gravatars without them affecting GTmetrix. It is definitely one of my favorite WordPress speed plugins.

Flying-Scripts

 

14. WP User Avatar

The blank default Gravatar can still create errors in GTmetrix.

If you don’t want it to, install the WP User Avatar plugin which hosts the default Gravatar locally. Upload your own optimized Gravatar image (ideally a 50×50 pixel compressed image).

WP-User-Avata

 

15. CDN Enabler

CDN Enabler helps you set up a CDN (content delivery network). This does not work with Cloudflare which requires changing nameservers, while CDN enabler is specifically for StackPath, KeyCDN, and other CDNs that provide a CDN URL. First, sign up for a CDN (I use StackPath) then enter your CDN URL into the CDN Enabler plugin. See instructions below:

Step 1: Sign up for a CDN (I use StackPath who has 34 data centers) and create a CDN site.

Step 2: Grab Your CDN URL:

StackPath-CDN-URL

Step 3: Enter your CDN URL into CDN Enabler, then configure the settings:

CDN-Enabler-Plugin-Settings

 

16. Breeze By Cloudways

Breeze is only if you’re using Cloudways hosting.

It has a long way to go if they want to catch up to SG Optimizer or WP Rocket, and I would personally use WP Rocket instead as it lacks many features (probably why it doesn’t have the best ratings). While I highly recommend Cloudways hosting, I can’t recommend Breeze yet.

Breeze-Cache-Plugin

While the Cloudways Breeze plugin isn’t great, their hosting is.

SiteGround-vs-Cloudways

 

17. Autoptimize

Optimizes HTML, CSS, and JavaScript. You don’t need Autoptimize unless you’re hosted on GoDaddy, WP Engine, or any host who blacklists cache plugins, since WP Rocket and most cache plugins optimize the code for you. But while GoDaddy and WP Engine’s built-in caching might be fine, it doesn’t optimize HTML/CSS/JS. That’s where Autoptimize comes into play.

Autoptimize

 

18. WP Fastest Cache

WP Fastest Cache is usually rated one of the top free cache plugins and is easy to configure. However, it lacks quite a few features and if you want them, you’ll need to upgrade to the premium version, in which case you’ll be better off with WP Rocket. I have a configuration tutorial on the WP Fastest Cache settings as well as W3 Total Cache and WP Super Cache.

WP-Fastest-Cache-Settings

 

19. ToolKit For Elementor

ToolKit does a little bit of everything (minification, combination, font optimization, lazy load, bloat removal, gzip, browser caching, expires headers), but it doesn’t do everything. You’ll be better off using WP Rocket combined with Perfmatters. One thing I like about ToolKit is the option to disable unused widgets in Elementor, WordPress, and in the WordPress dashboard.

ToolKit-for-Elementor

 

20. AMP For WP

I was using AMP, but I ultimately disabled it and now I don’t. But if you want to add AMP (accelerated mobile pages) to WordPress, this is one of the most highly rated AMP plugins since it has lots of customization options. One of the frustrating parts about AMP is that it strips some of your design elements, so you want to make sure the mobile pages still look nice.

Warning: AMP can sometimes decrease mobile conversions. Read Kinsta’s study on how their conversions dropped 59% when using AMP. I ultimately decided against it.

AMP-Pages

This plugin has tons of settings for customizing mobile pages:

Accelerated-Mobile-Pages-Plugin-Settings

 

21. Query Monitor

Find your slow loading plugins, queries, scripts, and other elements that take longest to load. Make sure you delete it when you’re done, since Query Monitor can cause high CPU in itself.

Query Monitor Slow Plugins

You can also use GTmetrix Waterfall to find your slowest plugins:

Slow WordPress Plugin

 

22. Display PHP Version

Display PHP Version simply shows which PHP version you’re running. Faster PHP versions = faster load times, so be sure to login to your hosting account and use the latest PHP version.

Display-PHP

 

23. GTMetrix For WordPress

The GTmetrix WordPress plugin monitors your load times and PageSpeed + YSlow scores, then sends you a report directly in your WordPress dashboard, or through scheduled email reports.

GTmetrix-WordPress-Dashboard-Widget

GTmetrix-Scheduled-WordPress-Reports

GTmetrix-Scheduled-Reports

 

24. WP Hosting Performance Check

Shows overall performance of hosting and whether your technology (PHP, MySQL, WordPress versions) is running slow, in which case it should be updated. It also shows your slowest pages.

Hosting-PHP-Server-Response

Browser-Load-Speed

Web-Server-Response-Time

Bytecheck.com and GTmetrix also show your TTFB (time to first byte) in the Waterfall tab:

TTFB Check

GTmetrix TTFB

Cool Trick: one of the only things PageSpeed Insights is good for is checking for server response times. Google says it should be under 200ms. If not, your server (hosting) is slow.

Reduce Server Response Time Under 200ms

 

25. Better Search Replace

If you see minimize redirects in your GTmetrix report, this usually means you changed the WWW or HTTPS version of your site, but didn’t change your links to reflect the new version.

Minimize-Redirects

Instead of fixing all your links manually, use the Better Search And Replace plugin to update them in bulk. It can also be helpful for fixing broken links, or even bulk updating links/images which appear on multiple pages/posts. Better Search Replace can be an enormous time saver.

Better Search Replace – WWW Versions

 

Other Notable Tools / Resources

Cloudways and SiteGround – they are usually rated the top hosts in Facebook polls by far, with many people who migrated and posted their new load times. Both use cloud hosting and are extremely fast; SiteGround is more user-friendly but renewal prices are high and they have strict CPU limits. Cloudways is usually faster but more technical and they don’t support direct email hosting (you would need a Rackspace account). Both are very fast and do free migrations.

Cloudways Response Times

SiteGround Load Time Migration

SiteGround-Bluehost-Migration

Switching To SiteGround

Godaddy to DigitalOcean Migration

2018 Hosting Recommendations

Favorite Hosting For Elementor

VPS Cloud Hosting WooCommerce Poll

Hosting Recommendations Facebook

2017-WordPress-Hosting-FB-Poll

Untitled

SiteGround Response Times On Joomla

SiteGround-HostGator-Migration

HostGator To SiteGround Migration

Vultr Migration

July 2019 Hosting Recommendation

Elementor Hosting Recommendations

WordPress Hosting Suggestions

VPS Cloud Hosting Poll

2016-WordPress-Hosting-FB-Poll

Preferred-Web-Hosting-Poll

Affiliate Disclaimer – if you sign up for Cloudways or SiteGround using my affiliate link, I will earn a commission at no expense to you. I am not an affiliate for Bluehost, HostGator, or GoDaddy because they’re not fast and the results show it. I also donate a good chunk of my blog’s income to GoFundMe campaigns and would seriously appreciate your support. I try to make recommendations based on pure evidence.

Cloudflare – free CDN and speed/security service which mirrors your site (and offloads resources) on over 200+ data centers. Integrates with most cache plugins with options to use aggressive minification, Railgun, and hotlinking. All my cache plugin tutorials include Cloudflare setup instructions and don’t forget to set up page rules for your WordPress site.

StackPath – paid CDN which adds 30+ additional data centers around the world (more data centers = faster content delivery), reducing the distance between your website/visitors – a recommendation in the WordPress optimization guide. $10/month with a free 30-day trial.

Pingdom – most accurate tool for measuring load times according to WP Rocket, though GTmetrix has better recommendations for actually optimizing your site, in my humble opinion.

GTmetrix – good for identifying images that need to be optimized using the 3 methods: serving scaled images (resizing them), specifying images dimensions in the HTML/CSS, and optimizing images (lossless compression). GTmetrix recently switched to a fully loaded time metric which shows a longer load time than previously. Their waterfall tab measures individual slow loading elements, and if your time to first byte is long that indicates your hosting is slow.

Google PageSpeed Insights – most recommendations can be ignored but it’s good for measuring server response time which Google recommends <200ms or your hosting is slow.

Pronaya (My WordPress Speed Optimizer) – you can hire my WordPress speed optimizer on freelancer.com who I’ve been working with for 5 years and we’ve optimized multiple sites to load 500% faster. His name is Pronaya, he’s $40/hour and has a perfect 5/5 star review with 19 reviews (just sign up for a Freelancer account and search for user BDKAMOL). If you think I’m good at speed optimization, Pronaya is way better. I’ve also been working with Usama (his username is I333) who is quite cheaper but is also amazing with 4.9/5 stars and 375+ reviews.

 

Frequently Asked Questions

🚀 What are the 5 most important speed plugins?

WP Rocket, SG Optimizer, OMGF, Perfmatters, and Autoptimize are 5 top speed optimization plugins.

🚀 What is the best cache plugin?

WP Rocket was rated the #1 cache plugin in numerous Facebook polls because it has more speed features than other cache plugins including database cleanup, heartbeat control, lazy load, and optimizing Google Analytics. WP Fastest Cache is usually rated the top free cache plugin, and SG Optimizer is good if you're on SiteGround.

🚀 What's the best image optimization plugin?

ShortPixel, TinyPNG, Imagify, and Smush are 4 popular image optimization plugins.

🚀 Which plugin is best for optimizing fonts?

OMGF, Perfmatters, WP Rocket, and Autoptimize all have font optimization options. WP Rocket and Perfmatters let you preconnect them which makes them load even faster.

🚀 Should I add AMP?

We chose not to use AMP after reading Kinsta's article about how their conversions dropped by roughly 50% due to AMP.

My WordPress Speed Optimization Tutorial – has 400+ comments with people saying things like “My page speed score on gtmetrix went from 69 to 93” and “this might be one of the most helpful posts I’ve ever read.” Tons of people have used it to improve Pingdom/GTmetrix scores.

I hope you find these WordPress speed optimization plugins useful! If you have questions leave me a comment. Or if you simply need to fix your slow WordPress site, see my tutorial above. It has over 400 comments and has helped many people reduce their load time to <1s.

Cheers,
Tom

How To Optimize Images In WordPress (For Both Speed + SEO)

When it comes to image optimization, you’ve probably heard enough about alt text.

There are actually 20 different ways to optimize images (if you include both SEO and speed optimization). These will give you better scores in GTmetrix/Pingdom, potentially rank you higher in search, and make your content load much faster. I’ve managed to get a 100% GTmetrix report with .5s load times… optimizing my images in WordPress was a big part of it.

Optimize images BEFORE uploading – using a program like Photoshop to optimize images before uploading them can save lots of work. You can resize, compress, strip EXIF data, save in correct format (eg. PNG/JPEG), and write a descriptive file name (which will automatically be used as the alt text if using the Automatic Image Alt Attributes plugin). That’s 6 optimizations!

If you require high resolution images (eg. a photography website), you may not want to resize and compress them (step 3 and 8) since these can reduce quality, even if it’s by a small amount.

Main tools I use – I use GIMP to resize/compress images (my image editor of choice), WP Rocket for my cache plugin, Imagify for further lossless compression + removing EXIF data, both Cloudflare and StackPath CDN, Automatic Image ALT Attributes plugin to automatically use the image file name as alt text, and Optimum Gravatar Cache to cache Gravatars in comments. I use WP Review Pro as my rich snippets plugin, Better Search Replace to bulk update images (very handy), and GTmetrix as my speed testing tool. See the full list of tools.

Table Of Contents

  1. Find Unoptimized Images
  2. Serve Scaled Images
  3. Specify Image Dimensions
  4. Losslessly Compress Images
  5. Combine Images Into CSS Sprites
  6. Avoid Image URL Redirects
  7. Serve Images From A CDN
  8. Cache Images
  9. Make Favicon Small And Cacheable
  10. Remove EXIF data
  11. Cloudflare Image Optimization
  12. Lazy Load Images
  13. Save As Correct Format
  14. Image File Names
  15. Alt Text
  16. Open Graph (Facebook + Twitter)
  17. Images In Featured Snippets
  18. Structured Data
  19. Style Images
  20. Resize GIFs
  21. Cache Gravatars
  22. Avoid Embedding Images From External Websites
  23. Image Optimization Tools

 

1. Find Unoptimized Images

Run your site through GTmetrix and you’ll see these items in the Page Speed/YSlow tabs. The first five are usually page-specific, meaning GTmetrix will only show the unoptimized images for the single page you test. The last 3 usually occur on your entire site. Of course, these are only 7 ways to optimize images, but some of the most important, so we’ll be doing these first.

  • Serve scaled images: resize large images to correct dimensions (step 2)
  • Specify image dimensions: specify a width/height in the image’s HTML or CSS (step 3)
  • Optimize images – losslessly compress images (step 4)
  • Combing images using CSS sprites – combine multiple images into 1 image (step 5)
  • Avoid URL redirects – don’t serve images from wrong www or http(s) version (step 6)
  • Use a content delivery network – serve images/files from a CDN (step 7)
  • Leverage browser caching –  cache images/files using your cache plugin (step 8)
  • Make favicon small and cacheable – use a 16x16px favicon and cache it (step 9)

Image Optimizations In GTmetrix

Start by fixing images that appear on multiple pages: logo, sidebar/footer images, etc. Also start with serve scaled images as you may have to resize/reupload them with new dimensions.

 

2. Serve Scaled Images

If you see serve scaled images errors in GTmetrix, it means you have oversized images and need to resize them to the correct dimensions (which GTmetrix provides you with). As long as you follow your image dimensions cheat sheet (see below), you shouldn’t see these errors. But if you already uploaded oversized images, you’ll need to resize them manually, or use a plugin.

Serve-Scaled-Images

Bulk Resize Images Using A Plugin – the problem with this, is that different images call for different dimensions (widgets, sliders, fullwidth images). While most image optimization plugins have an option to resize images to one single specific set of dimensions, you should really crop/resize them before uploading. If you do resize images using a plugin, keeps backups of the original images (and only test a few out) in case you’re not happy with the results.

Resize Large Images

Resize Images Manually – get the correct dimensions from GTmetrix and resize/reupload them. Remember, GTmetrix only shows unoptimized images for the single page you test.

Create A Cheat Sheet Of Your Website’s Image Dimensions
Your sliders, blog sidebar, featured images, and blog content body all call for specific dimensions which images should be resized to. Create a cheat sheet so you can resize them before uploading them to WordPress. This is especially helpful if you have many areas of your website requiring different images sizes, and if you have multiple designers/editors.

Example:

  • Slider images: 1900(w) x 400(h)
  • Carousel images: 115(h)
  • Widget images: 414(w)
  • Fullwidth blog post images: 680(w)
  • Featured images: 250(w) x 250(h)
  • Yoast Facebook OG image: 1200(w) x 628(h) – step 11
  • Yoast Twitter OG image 1024(w) x 512(h) – step 11

680 Pixel Width Rectangle

 

3. Specify Image Dimensions

This means adding a width/height to the image’s HTML or CSS. The Visual Editor does this for you (but widgets, some page builders, and custom HTML do not). Test a few pages in GTmetrix.

GTmetrix tells you the image’s dimensions…

Speciy Image Dimensions GTmetrix

Add the width/height to the image’s HTML…

Specify Image Dimensions

 

4. Losslessly Compress Images

These are “optimize images” items in GTmetrix. Many programs (eg. Photoshop and Gimp) have the option to compress when exported. While this is a great start, image compression plugins usually get even better results. I prefer Imagify, Kraken, ShortPixel, or Smush. Other plugins are known to visually reduce image quality and may cause errors with your images.

Compressing Images With Imagify

  1. Sign up for Imagify
  2. Install the Imagify Plugin
  3. You will be prompted with the instructions below:
  4. Enter your API key from your Imagify account
  5. Set your compression level (normal, aggressive, ultra)
  6. Imagif’em all (photo below) with bulk optimizes all images on your site
  7. Once you’ve reached your limit, pay $4.99 or wait next month to reset your limit

imagify

Test how images look with different levels of compression…

Imagify Compression Comparison

Once signed up, bulk optimize all images on your site…

imagify-wordpress-image-optimization

Set the option to optimize images on upload…

Imagify Optimize Images On Upload

 

5. Combine Images Into CSS Sprites

On my homepage, you may think you see 21 icons, but they’re actually 1 single image. This is a CSS sprite, where you combine multiple images into 1 single image. This reduces the number of images (and requests) which is why my homepage only has 10 requests. Instead of loading 21 images, it loads 1. You will need CSS knowledge to do this, or use a CSS sprite generator.

CSS Sprites

GTmetrix CSS Sprites

Only Use CSS Sprites For Decorative Images – you lose a lot of image alt tags when you combine 21 images into 1. Do NOT combine important images into CSS sprites if they describe your content. As for me, the speed of my homepage is more important than it’s SEO… I use my homepage’s GTmetrix report in a lot of places (so I have to keep it clean) and my homepage, believe it or not, doesn’t target a keyword. It’s purpose is to outline my tutorials… and load fast.

 

6. Avoid Image URL Redirects

If you changed to HTTPS, www versions, or started serving images from a CDN, you should bulk update all your images (and links) using Better Search Replace so they are serving the correct version. Otherwise you may see minimize redirects or use cookie-free domains errors.

Minimize Redirects

Cookie Free Domains

Use the Better Search Replace plugin to bulk update image URLs…

Better Search Replace WWW Versions

Better Search Replace HTTP vs. HTTPS

 

7. Serve Images From A CDN

This requires changing image URLs to include your CDN URL

  • Old Image URL (Without CDN)https://onlinemediamasters.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png
  • New Image URL (With CDN)https://t9w8m8j8.stackpathcdn.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png

Cloudflare vs. StackPath – I use both Cloudflare and StackPath since more data centers = faster content delivery. Cloudflare has 200+ data centers, StackPath has 34+ data centers which are heavily located in the United States (which is where most my visitors are from). Cloudflare does not assign you a CDN URL so we’ll use StackPath’s CDN to serve images.

StackPath-Data-Centers

Step 1: Choose a CDN. I use StackPath (they have a 30-day trial).

Step 2: In the dashboard, click the CDN tab, then create a StackPath CDN Site

StackPath-CDN-Tab

StackPath-CDN-Domain

CDN-URL-StackPath

Step 3: Copy your CDN URL and paste it into your cache plugin (below is for WP Rocket)…

WP-Rocket-CDN

Step 4: Replace image URLs to include your CDN URL (using Better Search Replace).

Better Search Replace CDN URL

Step 5: Check for old image URLs using Chrome DevTools. Sometimes, your cache plugin or CDN Enabler takes care of this, except links in CSS and JavaScript which are hard-coded. For the links which are left behind, they are normally in files (such as CSS or Javascript) that need manual checking and replacing. Chrome DevTools shows you all domains currently being used.

Step 6: Run your site in GTmetrix and “content delivery network” should be green in YSlow. You shouldn’t have any errors in “minimize redirects” or “use cookie-free domains” either.

CDN GTmetrix YSlow

 

8. Cache Images

Most cache plugins have an option for browser caching, which caches images. I use WP Rocket which was rated the #1 cache plugin in multiple Facebook polls, and I have tutorial for that. Swift Performance is generally ranked the #1 free cache plugin (I have a tutorial for that too).

Browser Caching

 

9. Make Favicon Small And Cacheable

Ensure your favicon is 16x16px, is favicon.ico format, and is cached using your cache plugin.

 

10. Remove EXIF data

Exif data contains information such as aperture, shutter speed, ISO, focal length, camera model, date the photo was taken, and more. You don’t need this for images on your website. The VA Removing Exif plugin removes Exif data automatically once images are uploaded.

Most image optimization plugins (including Imagify, ShortPixel, Kraken, EWWW, and Smush) have an option to remove EXIF data automatically. Here is the settings for Imagify…

Imagify Remove EXIF Data

 

11. Cloudflare Image Optimization

Cloudflare also has a few ways to optimize images. Mirage and Polish are found in your Cloudflare speed settings while Hotlink Protection is found in your Scrape Shield settings.

Cloudflare Mirage (Pro Feature) – reduces image requests, lazy loads images, and improves image load times on mobile devices with slow network connections. Here are more details…

  • Resizes images based on a visitor’s device/connection. A visitor on a poor connection will get a smaller version (lower resolution) until they are back on a higher bandwidth.
  • Reduces amount of requests – instead of sending multiple requests for all images on the website, Mirage pulls this into one request so visitors can see images immediately.
  • Lazy loads images (only loads them once users scroll down and actually see the image).

Cloudflare Image Mirage

Cloudflare Polish (Pro Feature) – strips EXIF data and compresses images.

Cloudflare Image Polish

Cloudflare Hotlink Protection – prevents people from copying your images and pasting them on their own website, which (since you’re still hosting that image) will suck up your bandwidth.

Cloudflare Hotlink Protection

 

12. Lazy Load Images

This delays the loading of images until users scroll down the page and visibly see the image. While it improves initial load times, constantly loading images as you scroll can be very annoying. I personally only lazy load videos, since those take much long to load than images.

You can use the Lazy Load plugin, Lazy Load For Videos plugin, or use WP Rocket…

WP-Rocket-Lazy-Load

 

13. Save As Correct Format

PNG vs. JPEG – PNG is uncompressed (larger file size) and should be used in simple images without lots of colors. JPEG is a compressed (smaller file size) which slightly reduces image quality but is smaller in size, and is used in images with lots of colors. GIMP and other image editing programs should use the correct format automatically, but this is still good to know.

jpg_vs_png

Illustration by Labnol
 

14. Image File Names

Search engines use both alt text and image file names, so name your files before uploading them to WordPress. If you’re using a plugin that adds alt text automatically based on the file name, naming your files is all you need to do! Do not stuff keywords, just describe the image.

Label Image File Names

 

15. Alt Text

These should be the same as your image file name. You can use the Automatic Image Alt Attributes plugin to automatically use the file name as the alt text. As long as you’re using relevant images, some of them should naturally include (bits) of your keyword… there is absolutely no reason to stuff keywords in images, which risks a keyword stuffing penalty.

Add Alt Text To Images Automatically – use the Automatic Image Alt Attributes plugin. Now whenever you add an image, the plugin will add alt text which is the same as the file name…

<img src="https://website.com/wp-content/uploads/2016/08/WP-Fastest-Cache-Plugin.jpg" alt="WP-Fastest-Cache-Plugin" width="577" height="247" />

Find Missing Alt Text – Screaming Frog is a free tool that shows you all images missing alt text.

  • Download Screaming Frog SEO Spider
  • Enter your website and click “Start” to crawl the website
  • Click the images tab
  • Go to Overview → Missing Alt Text (see below)
  • Locate those images on your site and add alt text

Missing Image Alt Text – Screaming Frog

 

16. Open Graph (Facebook + Twitter)

This makes your content format properly when shared on Facebook/Twitter, specifically your image since both networks use custom dimensions to display it, otherwise it will look funny.

facebook-share

If using Yoast, go to the “Social” settings and enable Open Graph for both Facebook/Twitter…

Yoast-Social-Meta-Data

Now edit a page/post, then click the “share” link in Yoast and you will see options to upload custom images for Facebook (1200 width x 628 height) and Twitter (1024 width x 512 height).

yoast-social-media-optimization

 

Featured snippets are when Google shows bits of your content at the top of search results and can (but are not guaranteed) to include an image. Google will pull these from any 1st page result, however it’s up to them whether they will even display a featured snippet or image. These also make your snippet show up twice and are an incredible way to get lots of traffic.

3 Types Of Featured Snippets

  • Answers
  • Tables
  • Lists

Featured-Image-Snippets

How To Get Featured Snippets In Google

  • Target a keyword where people want a concise answer
  • Use Moz Keyword Explorer to identify question keywords
  • Use Answer The Public to find even more question keywords
  • Choose whether the answer should be a paragraph, list, or table
  • Design a nice graphic (or take a photo) describing the keyword
  • Use optimal character length (see photo below taken from Moz)
  • Create fact-based content with quality references (links, graphics, etc)
  • Target keywords that already have an featured snippet but do a poor job
  • If you’re aiming for the answer box, target your keyword using an exact match
  • Make sure you’re on the 1st page for the keyword, if not, improve the content

Optimial Featured Snippets Length

 

18. Structured Data

Images can be used in structured data (and badges) for the following content types:

Video Rich Snippet

Recipe-Rich-Snippets

Product Rich Snippet

What Rich Snippets Plugin Should I Use?
I use MyThemeShop’s WP Review Pro (here’s a page I use it on) which supports 14 data types including recipes and product reviews. I used to use WP Rich Snippets but the developer abandoned the plugin and it hasn’t been updated for 2+ years, and the All In One Schema plugin is just boring (it has a lack of options and styling). WP Review Pro is very easy to use.

 

19. Style Images

Don’t forget to style your images! I use borders on most of mine.

  • Image Titles
  • Image Links
  • Image Borders
  • Image Captions

 

20. Resize GIFs

Just like you resize images to the correct dimensions, GIFs should be resized too (use GIF GIF).

Resize the GIF…

Resizing GIFs

Then compress it…

Compress GIFs

The result :-)

Optimize Dog GIF

 

21. Cache Gravatars

If you have posts with lots of comments, Gravatars can completely ruin your report. You can disable them, break comments to only show a certain number of comments, or try a Gravatar cache plugin. You may need to do a bit of testing as some plugins don’t work on some websites.

  • Cache Gravatars (Optimum, Harry’s, or FV Gravatar Cache)
  • Disable Gravatars completely
  • Set your default Gravatar to blank
  • Delete comments that don’t add value
  • Set your default Gravatar to a custom image on your server
  • Restrict your Gravatar images to smaller dimensions (e.g. 32px)
  • Paginate comments in WP Disable to only show 20 comments at a time
  • If none of these work, check out WP Rocket’s caching Gravatars tutorial

Cache-Gravatar-Images

 

22. Avoid Embedding Images From External Websites

Always upload images to your website, never copy/paste them. Otherwise you end up with extra requests as the image isn’t hosted on your server so it has to pull it from somewhere else.

 

23. Image Optimization Tools

Avoid using plugins with duplicate functionality – Imagify, ShortPixel, Kraken, EWWW, and Smush all basically do the same thing (lossless compression, EXIF data removal, resize images). WP Rocket has options for lazy load, caching, and CDN (and database cleanup + hosting Google Analytics locally) which most cache plugins do not, saving you from using extra plugins.

 

Frequently Asked Questions

✅ How do you fix Optimize Image errors in GTmetrix?

By losslessly compressing them using a plugin like ShortPixel, Imagify, or Smush. I use ShortPixel because it always fixes this error in GTmetrix.

✅ How do you fix Serve Scaled Image errors in GTmetrix?

This means you need to crop/resize images to the correct dimensions. If images are too large, GTmetrix will show serve scaled image errors and tell you the correct dimensions they should be resized to.

✅ How do you fix Specify Image Dimension errors in GTmetrix?

View the image's HTML and check to make sure it has a specified width and height, as shown in this tutorial.

✅ Any other ways to make images load faster?

Removing EXIF data and using a CDN to serve your images will make the most difference outside the recommendations in GTmetrix.

✅ Which image optimization is best?

I use ShortPixel because there is virtually zero loss in quality and it fixes the Optimize Images item in GTmetrix.

 

What Do You Think?
Does your GTmetrix report look a little better? Let me know in the comments! And if you want more tips that will get you even better scores/load times, see my full WordPress speed guide.

New-GTmetrix-Report

See Also: How I Got 100% GTmetrix Scores

Cheers,
Tom

How To Load Google Fonts Locally In WordPress: An Optimization Item Found In GTmetrix, Pingdom, And Google PageSpeed Insights

If your WordPress site has Google Font errors in GTmetrix/Pingdom, loading Google Fonts locally should fix them.

You can’t control some external resources and scripts, which makes them impossible to compress, minify, or optimize. This can seriously affect your WordPress speed. One of the most common external resources are Google Fonts. If you are already configured a cache plugin like WP Rocket or WP Fastest Cache, you may start noticing external resources like fonts affecting grades + load times. This is where loading Google Fonts locally comes into play. This allows your cache plugin to compress all resources related to your custom font(s).

Take a full backup of your site (or at least the files you’re editing) before making changes.

Google-Fonts-GTmetrix

Table Of Contents

  1. Choose a Google Font
  2. Download The Font
  3. Convert Fonts to Web Fonts
  4. Download Converted Font Files
  5. Upload Font Files To WordPress Files
  6. Add Custom Font To CSS
  7. Test The Font
  8. Set The Default Font
  9. Always Have Font Fallbacks
  10. Retest Your Website (In GTmetrix)

 

Step 1: Choose A Google Font

In this example, we will use Roboto font with two font weights: regular (400) and bold (700).

Google-Fonts-Selection

Use Fewer Google Fonts – keep your Google Fonts to a minimum (less fonts = less requests).

Be Selective With Font Weights – the number of weights also affect load times. If you only need the bold version, uncheck the other weights so Google Fonts only load those you need.

 

Step 2: Download The Font

Download the fonts when you’re ready. Google will automatically download all font weights, so the selection of font weights is not required at this step, and is instead required in step 3.

Google-Fonts-Download

 

Step 3: Convert Fonts To Web Fonts

Next, we’ll convert these font files (.ttf) to web font files. I’ll be using Transfonter. Go to their site, click Add Fonts, then upload only the font types you’ll be using on your website. I’m using Roboto-Regular.ttf and Roboto-Bold.ttf so I have both regular and bold weights. Leave the settings as default since WOFF and WOFF2 cover all major browsers. Now click convert.

Transfonter-Google-Font-Conversion

Only select the font types you’ll be using on your website…

Google-Fonts-Conversion-Selection

 

Step 4: Download Converted Font Files

Once the fonts are converted, you can download them. In the zip file, each font will include WOFF and WOFF2 formats (since we downloaded 2 fonts, we will have a total of 4 font files).

WOFF-Google-Font-Conversion

 

Step 5: Upload Font Files To WordPress Files

Upload the web font files via FTP or cPanel, ideally in the wp-content/uploads folder so the theme and core updates do not override them. I created a “fonts” folder and uploaded them there (to separate them from other files). To confirm they were uploaded successfully and you have the correct links, open the links in your browser and the fonts should begin to download.

Example:

  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff2

Replace yourwebsite.com with your own website (and HTTPS if using SSL). Ideally, test all 4 links and make sure you have the URLs correct (and also be sure to save them somewhere).

 

Step 6: Add Custom Font To CSS

Next, we will add the CSS you got inside the downloaded zip file named stylesheet.css. This is the CSS code that will connect your fonts with your existing CSS and make them ready to use.

Where to place the CSS code is subjective but you can use an external stylesheet or the WordPress’ wp_enqueue_style function in functions.php, or at the start of your style.css file (or custom.css if you have one). I’m going to paste it in the default style.css file of the theme. Copy/paste the code into the stylesheet, and change any relative URLs to absolute URLs.

Default URLs in stylesheet.css:
src: url('Roboto-Bold.woff2') format('woff2'),
url('Roboto-Bold.woff') format('woff');

Change these to:
src: url('http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2') format('woff2'),
url('http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff') format('woff');

Basically, just include the folder URL before the font filename.

This is optional but if you prefer, create a custom class to easily use the font in existing HTML. Here we named our classes roboto_font and roboto_bold_font. To do this, add this to your style.css file (after the above code):

.roboto_font {

font-family: “Roboto”, “Arial”, sans-serif;

}

.roboto_bold_font {

font-family: “Roboto”, “Arial”, sans-serif;

font-weight: bold;

}

 

Step 7: Test The Font

Now create a test page and place the following code in the Text Editor

<h2>Testing</h2>
<h2 class="roboto_font"> Custom Font Test </h2>
<h2 class="roboto_bold_font"> Custom Font Test </h2>

Google-Fonts-Testing

Preview the page. If you did it correctly, you should see the new custom font! The first heading is the default font of your website, the second and third are the Google Fonts fonts we added:

Local-Google-Fonts

 

Step 8: Set The Default Font

To make this your website’s default font, add this CSS to your style.css file:

body {

font-family: “Roboto”, “Arial”, sans-serif;

}

Be careful! If you already have a custom font, it may not appear correctly and require debugging or editing existing font-family properties and replacing them with this one instead.

 

Step 9: Always Have Font Fallbacks

It is bad practice to apply a Google Font as a font-family. Instead, you should have multiple fonts specified including the common fonts such as Arial, Times New Roman so that the browser can fall back to these fonts just in case the font does not load or takes longer to load.

Without fallback:
font-family: 'Roboto';

With fallback font:
font-family: 'Roboto', Arial, sans-serif;

Now, in case it fails to load your Google Fonts, the browser will fall back to Arial font or the default sans-serif font type of the system and not cause any issues with the font rendering.

 

Retest Your Website (In GTmetrix)

You shouldn’t see any Google Fonts errors in it…

New-GTmetrix-Report.png

Have questions? Drop me a line.

See Also: How I Got 100% GTmetrix Scores

 

Frequently Asked Questions

✅ How do you speed up Google Fonts?

Combining Google Fonts, hosting them locally, and preconnecting and prefecthing them can all help improve their load times. Check your GTmetrix Waterfall to get a benchmark of your fonts, then retest it after optimizing.

✅ How to convert fonts the web font files?

We use Transfonter.

✅ What about Elementor custom fonts?

Elementor Custom Fonts can also host Google Fonts locally and is built-in to Elementor Pro. You can use this to upload your font files.

✅ Which plugins help optimize fonts?

WP Rocket, OMGF, Autoptimize, and Perfmatters can all help you optimize fonts.

✅ What about prefetching and preconnecting fonts?

These can speed up fonts by helping browsers anticipate them better. We use the Perfmatters plugin by Kinsta to prefetch and preconnect fonts, but you can also use WP Rocket or the Pre Party Resource Hints plugin.

Cheers,
Usama

65 Slow WordPress Plugins To Avoid Because Of High CPU

Avoid these 65 WordPress plugins and your site will load faster.

Many of you remember using P3 Profiler to run scans that detect slow plugins. But it hasn’t been updated for several years – so I created this list which also includes talks about finding slow plugins in GTmetrix, alternative lightweight plugins, and disabling unused plugin settings.

There are certain plugin settings known for causing high CPU like Wordfence’s live traffic report, Broken Link Checker’s ongoing scans, and other settings that run scans, collect statistics, send email notifications, or robust plugins that offer tons of functionality (but you only need some features… like only using one feature from Jetpack). I would also install WP Disable to turn off WordPress settings you don’t use (Emojis, Gravatars, heartbeat API, etc).

Thank you Ivica from the WordPress Speed Up Facebook Group for creating this awesome list on his resources page – I also added quite a few. I would definitely join his group which has over 10,000 members. You can also read my own WordPress speed optimization guide which includes over 40 tips to make your site load faster (using WP Rocket, Cloudflare, AMP Pages, image optimization, plugin optimizations and plenty more) which has over 350+ comments.

Slow Loading WordPress Plugins

*Most slow WordPress plugins include social sharing, statistic (analytics), sliders, portfolios, page builders, calendars, chat, contact forms, related post, sitemap, Wordfence, WPML, WooCommerce, and any plugin that runs ongoing scans or processes. These can be identified using Query Monitor or GTmetrix Waterfall.

  1. AddThis
  2. AdSense Click Fraud Monitoring
  3. All-In-One Event Calendar
  4. Backup Buddy
  5. Beaver Builder
  6. Better WordPress Google XML Sitemaps
  7. Broken Link checker (use Dr. Link Check)
  8. Constant Contact for WordPress
  9. Contact Form 7
  10. Contextual Related Posts
  11. Digi Auto Links
  12. Disqus Comment System
  13. Divi Builder
  14. Essential Grid
  15. Facebook Chat
  16. Fancy Gallery
  17. Fuzzy SEO Booster
  18. Google Analytics
  19. Google Language Translator
  20. Google Translate
  21. Google XML Sitemaps
  22. Jetpack
  23. Leaflet Maps Marker
  24. MyReview
  25. NextGEN Gallery
  26. NewStatPress
  27. Real Estate Website Builder
  28. Really Simple Share
  29. Reveal IDs
  30. Revolution Slider
  31. Sharebar
  32. ShareThis
  33. S2 member
  34. SEO Auto Links & Related Posts
  35. Share Buttons by AddToAny
  36. Share Buttons by E-MAILiT
  37. ShareThis
  38. Social Discussions
  39. Socialable
  40. Similar Posts
  41. Slimstat Analytics
  42. SumoMe
  43. Talk.To
  44. Tribulent Slideshow Gallery
  45. Ultimate Social Media & Share
  46. VaultPress
  47. WooCommerce Customer History
  48. Wordfence (disable live traffic reports)
  49. WordPress Facebook
  50. WordPress Related Posts
  51. WordPress Popular Posts
  52. WordPress Social Ring
  53. WP Bakey (formerly Visual Composer)
  54. WP Facebook Like Plugin
  55. WP Jump Menu
  56. WP Social Bookmarking Lite
  57. WP Social Share
  58. WP Statistics
  59. WP Power Stats
  60. WP-PostViews
  61. WPML (if you use too many extensions)
  62. wpCloaker
  63. WPML
  64. Yet Another Related Post Plugin
  65. Yuzo Related Posts

 

Finding Slow Plugins In GTmetrix

Since P3 Profiler doesn’t work anymore, an alternative solution to finding YOUR slowest loading plugins is to run your site through GTmetrix and check out your report. If when you expand items the same plugin appears multiple times in your report (or simply takes a long time to load in the GTmetrix waterfall tab), you should probably delete or replace that plugin.

Slow WordPress Plugin

 

Lightweight Plugins

Social Sharing – WP Rocket’s test showed Social Media Feather, MonarchSimple Shared Buttons Adder, and MashShare had the least amount of requests and fastest load times.

BackupUpdraftPlus.

SlidersSoliloquy, LayerSlider, or Meteor Sliders.

CommentsDisqus Conditional Load.

PortfolioEnvira Gallery, FooGallery, or The Grid.

Analytics – Google Analytics and Search Console should be plenty. Just make sure you’re hosting Google Analytics locally (using WP Rocket or WP Disable).

Page BuildersWordPress Page Builder by MotoPress, but no page builder runs faster than the native WordPress Editor. Combine this with the Duplicator plugin and you shouldn’t need a page builder (including page builders built-in to WordPress themes). Unless your team absolutely refuses to learn a little HTML (the easiest coding language), avoid page builders.

StudioPress Plugins – lightweight plugins for the Genesis Framework.

 

Turn Off Unused Plugin Settings

Go through each of your plugins and decide which settings you can turn off (this will lower CPU). For example, in Yoast under Settings > General > Features I disabled the following…

Yoast-Feature-Settings

Wordfence’s live traffic view also consumes high CPU…

Disable-Wordfence-Live-Traffic-View

 

Avoid Using 2 Plugins For Duplicate Functionality

Since Yoast creates a sitemap for you, you don’t need the Google XML Sitemaps plugin. If your host takes backups for you, you don’t need a plugin for that. If you have Google Analytics, do you really a statistics plugin that slows down your site and does about 1/1000 of what Google Analytics can do? Think about which plugins you actually need and delete the ones you don’t. And instead of using Jetpack so you can use 1 or 2 features, install a lightweight plugin that does the same thing but doesn’t have a million settings/features that will slow down your site.

 

Disable Unused Settings In WordPress

WP Disable lets you disable settings in WordPress that consume CPU and slow down your site. It also has options for heartbeat control (if you remember the actual heartbeat control plugin, you can now delete it and just use this)… as well as a few other options that can speed up your website/admin panel. Go through the settings and disable everything you don’t use…

Tips On Using WP Disable

  • Disable EVERYTHING you don’t use
  • Scheduling spam deletion is a good idea
  • Emojis, Google Maps, and Gravatars take a long time to load
  • Pingbacks and trackbacks aren’t usually worth the extra resources
  • Set post revisions to 3-5 so you have backups, but you don’t need hundreds
  • Miscellaneous options in the “request” tab can further your improve load times

WP-Disable-Requests

WP-Disable-Tags-Settings

WP-Disable-Admin

/WP-Disable-SEO.

WP-Disable-Others

 

AWStats Helps Identify Sources Of High CPU/Bandwidth

AWStats is a tool built-in to most hosting cPanels that provides statistics on CPU usage. It tells you whether certain bots, images, downloaded files, and even IP addresses are consuming a lot of CPU. You can also use the WP Server Stats plugin but I think AWStats does an awesome job.

AWStats helps you find:

  • High bandwidth crawlers
  • High bandwidth IP addresses
  • High bandwidth download files
  • High bandwidth files (eg. images)
  • Total bandwidth usage (for monitoring)

Monthly-Bandwidth

Search engine crawlers/spiders usually consume the most CPU (bandwidth)…

Robots-Spiders-Bandwidth

My WordPress speed guide has more tips on reducing crawler CPU plus tons of other tips.

 

Frequently Asked Questions

🔌 Which type of plugins slow down WordPress the most?

The most common slow loading plugins are social sharing, statistic, live chat, page builder, commenting, calendar, backup, portfolio, related post, and slider plugins. These need to be selected carefully and tested in GTmetrix.

🔌 Which plugins are the most common culprits?

If you plan on using WPML or WooCommerce, you're better off going straight to cloud hosting because shared hosting will probably not have enough server resources to handle your site. This is because (especially WooCommerce sites) usually require more plugins and generate extra scripts, styles, and cart fragments that will also take longer to load.

🔌 How can I find my slowest plugins?

Look in your GTmetrix Waterfall tab to see which plugins are taking longest to load, or use the Query Monitor plugin to find your slowest plugins.

🔌 Will disabling unused plugin features help?

Yes! If you're not using a feature, disable it. I also recommend using Asset CleanUp or Perfmatters to selectively load plugins on certain pages/posts. For example, if you only use your contact form on the Contact page, disable it everywhere else.

🔌 Does number of plugins really matter?

Every plugin adds to your load time, it just depends how much. Using lightweight plugins is more important than reducing number of plugins, but both should be taken into account.

 

What If You Absolutely Need Resource-Hungry Plugins?

Your hosting plan has a limited amount of server resources (#1 factor in the WordPress optimization guide). If a plugin is consuming too much CPU your only option (other than deleting or replacing it) is to upgrade your plan to include more server resources. Some of you know I recommend SiteGround for many reasons as their speed technology is extremely fast. And if you’re currently hosted with someone like Bluehost, Godaddy, InMotion or any of those other crappy hosts, this will be a huge upgrade for your server hardware which should improve both your scores and page load times in GTmetrix, Pingdom, and Google PageSpeed Insights.

See Also: Hot I Got 100% GTmetrix Scores

If you found this tutorial helpful, a share is always appreciated :)

Tom