Mobile Speed Optimization In WordPress (2021 Guide): How To Improve Your Website’s Mobile Load Time And PageSpeed Grades

3 Comments
Tom Dupuis
Last Updated January 21, 2021

Need to speed up your mobile WordPress site?

To speed up your WordPress mobile site, enable mobile caching in your cache plugin, install a mobile-adaptive images plugin, and consider AMP. Optimizations like using properly sized images, a CDN, and reducing server response times will also carry over from desktop to mobile.

How to speed up a slow WordPress mobile site

1. Test Your Mobile Speed

Think With Google is the best way to test mobile speed since it uses a 4G connection.

PageSpeed Insights gives you similar recommendations but it uses a 3G connection for the mobile test. This means your WordPress site will almost always load faster on the desktop test.

Your core web vitals report in Google Search Console also has a mobile-specific section showing which URLs are affected. The errors are broad (e.g. long LCP) and not very specific.

GTmetrix Pro accounts let you test your website on Android but it’s limited to the Vancouver location. Since GTmetrix uses recommendations from Lighthouse/PageSpeed Insights, I don’t see any point since they’re the same. Google Analytics also lets you see each of your page’s mobile load times under Behavior > Site Speed then add a segment for mobile and tablet traffic.

2. Fix Google’s Recommendations

Here are recommendations from Think With Google / PageSpeed Insights. Learn which items need to be fixed on mobile and find the solution for WordPress. Many solutions are in my guide.

You can search for answers in many Facebook Groups (e.g. WP Speed Matters, WordPress Speed Up, and WordPress Hosting are solid) since they have already been asked multiple times.

3. Enable Mobile Caching

Most cache plugins like WP Rocket and WP Fastest Cache have an option for mobile caching.

If your cache plugin doesn’t come with mobile caching, consider switching to a plugin that does. Some also have an option to create separate cache files for mobile devices which caches mobile-specific elements. You should only enable separate cache files if you’re using a mobile plugin (WP Touch, WP Mobile Detect, or JetPack’s mobile theme). Otherwise, leave it disabled.

Preloading Mobile Cache Instead Of Desktop
Cache plugins have a choice of preloading desktop or mobile cache, but not both. If most of your visitors are mobile, you can choose to preload mobile cache instead of desktop. You can enable mobile preloading using WP Rocket’s helper plugin. For other cache plugins, you’ll need to do a Google search to see if they an option to enable mobile preloading instead of standard preload.

WP Rocket says:

“The plugin will “preload mobile cache files instead of standard cache files. It’s not currently possible to preload both.”

4. Use Adaptive Images

You might come across “properly size images” in the Google PageSpeed Insights mobile test. This means you need serve smaller images to mobile devices using an adaptive images plugin.

Step 1: Test your site on mobile to see if you have properly size image errors.

Step 2: Find the recommended image width.

Step 3: Install an adaptive images plugin from ShortPixel or Adaptive Images.

Step 3: In your adaptive image plugin settings, set the background maximum width to the dimensions provided by GTmetrix or PageSpeed Insights. Next, save changes. There are a few other settings for WebP support, lazy loading images, smart cropping, and removing EXIF data.

Step 4: Retest your site and properly size images should be 100%.

5. Remove Page Builders

There is a huge trend in Facebook Groups of people removing slow page builders.

Divi, Elementor, and other slow page builders add extra CSS and JavaScript which can hurt your entire website’s load time. The extra bloat will likely flag multiple items in PageSpeed Insights for desktop and mobile. Remove your page builder and replace it with a lightweight alternative.

Divi, Elementor, and Brizy are some of the slowest builders.
Astra + Gutenberg, GeneratePress, and Oxygen are popular alternatives.
Kadence and Genesis Framework (StudioPress themes) are other alternatives.
If using Elementor, enable “Optimize DOM Output” in your Elementor settings.
If you insist on using Elementor, use the Hello theme which is more lightweight.
If you’re a page builder, use Perfmatters or Asset CleanUp to unload unused assets.

6. Use Responsive Themes And Plugins

Responsive themes and plugins are suppose to adapt to mobile devices.

Why is this important? Because just like adaptive images, other elements on your website will be resized automatically to fit mobile screens, making them load faster than a desktop version.

Even though most themes and plugins are mobile responsive, it doesn’t mean your site is responsive. You can still have errors which can be checked using a responsive design checker.

Device-based caching is a feature with some CDNs. It lets you cache specific elements based on the user’s device, but it should only be used if your WordPress site is not mobile responsive.

7. Fix Mobile Redirects

If you see redirect errors in PageSpeed Insights, it’s probably because:

You changed to HTTPS or WWW and didn’t update links.
You setup Page Rules in Cloudflare with forwarding URLs.
Badly coded or incorrectly configured plugins are causing redirects.
Cloudflare SSL options are incompatible with your server configuration (see tutorial).

If using Cloudflare, you can use their mobile redirect option which they say “automatically redirects mobile device visitors to a mobile-optimized subdomain. The redirect is done at the edge of Cloudflare’s network, improving load time by eliminating a roundtrip to the origin server – this is especially valuable on mobile networks, which serves content slower than wifi.”

Setup Redirects At Server Level
If you have a mobile subdomain (or any redirect for that matter), it’s best to setup it up at a server level so it’s doesn’t ever hit WordPress. Server-level redirects are faster than plugins.

8. Consider AMP

AMP (accelerated mobile pages) are a Google project that make mobile pages load faster while giving you an AMP stamp in mobile search results.

But, AMP also completely changes your mobile design.

Kinsta’s conversions dropped 58% when adding AMP, and they have since reverted back to their normal mobile pages. I have also decided against AMP since the design doesn’t look great. There are AMP plugins to help with design, but it’s still pretty limited and you may be disappointed with the result. And if you decided to add AMP then remove it, it’s extra work as you’ll need to setup redirects and take other measures to revert back to normal mobile pages.

You’re sacrificing design and conversions for speed. Is AMP worth it? I don’t use it.

I tested AMP back in 2016 but decided to remove them since then.

If You Decide To Use AMP, Use The AMP For WP Plugin
If you’re going to add AMP, you should probably use the AMP for WP plugin. It has the most customization options out of any AMP plugin I’ve seen (even the AMP plugin supported by Google and Automattic). There’s also Glue For Yoast & AMP which also has minimal options.

Cloudflare AMP Real URL

Cloudflare says AMP Real URLs “means a page can be stored in an AMP cache and served quickly from it while showing the original site URL in the browser’s nav bar.”

You can find this in Cloudflare’s speed settings:

9. Downgrade Image Quality For Slow Connections

Some image optimization plugins like Optimole let you downgrade your image’s quality when your visitors are on a slow connection. You need to make a decision whether (only during slow connections) your WordPress mobile speed or image quality (at 40% compression) is priority.

10. Hard Code Your Header And Footer

Hard coding menus in CSS load much faster than menus created by JavaScript, Elementor, and especially hamburger menus.

When you rely on most page builders to create your header and footer, they add lots of div wrappers and they’re more bloated than they need to be. And since your header/footer load across your entire site, it’s a small thing you can do to improve load times for all your URLs. This was the first thing WP Johnny did when I hired him to start removing Elementor from my site.

10. Enable Cloudflare APO

As described in step 13, I generally recommend BunnyCDN over Cloudflare.

If you’re using Cloudflare already, it’s worth trying their automatic platform optimization. Many people have had great results in Facebook Groups and Cloudflare says it can reduce TTFBs significantly and caches HTML. Cloudflare’s APO will serve your entire website from their edge network. It can be purchased for $5/mo in the Cloudflare dashboard or use Cloudflare’s plugin.

You can also try Cloudflare mirage:

“Mirage was designed to make the loading of images faster in two primary ways: 1) deliver smaller images for devices with smaller screens; and 2) “lazy load” images only when they appeared in the viewport. Both of these optimizations were designed primarily to accelerate web performance on mobile devices.”

11. Reduce TTFB With Faster Hosting

Slow TTFBs greatly affect your mobile and desktop scores (it’s the #1 speed factor).

If you have slow server response times, rethink you hosting. SiteGround has one of the worst TTFBs (reported by Backlinko) which explains why they didn’t perform well in my speed tests. GoDaddy, Hostinger, and EIG brands (Bluehost and HostGator) aren’t good either. That’s why I recommend joining the WordPress Hosting Facebook Group to get unbiased hosting opinions.

Most people in the WordPress Hosting Facebook Group swear by Cloudways.

Specifically, their DigitalOcean and Vultr High Frequency plan (I use DigitalOcean).

Do your research and look at this thread (or this one).

Yes, it’s a little more expensive at $10-$13/month, but we’re talking about speed here – not being cheap. With Cloudways, you have a choice of using DigitalOcean, Vultr High Frequency, Google Cloud, AWS, or Linode. These are worlds faster than shared hosting and can handle resource-intensive tasks much better (Elementor, Beaver, Divi, WooCommerce, AdSense, etc).

Cloudways makes it easy to test them out and see the difference in your load times: they do free migrations, monthly pricing, a Migrator plugin, and a promo code to save money: OMM25

People who moved to Cloudways and reported faster TTFBs/load times (including me):

Recent Facebook polls show a large shift in people moving away from lower quality hosts (especially SiteGround) to Cloudways, Kinsta, A2, and GridPane. Oh, how things have changed.

Affiliate Disclaimer – if you sign up for Cloudways using my affiliate link, I would seriously appreciate it. I don’t recommend bad hosting like many other affiliates. I also donate quite a bit to charity ($6,000 to GoFundMe so far) and your support would really help. I try to base my reviews not only from my experience, but real evidence from the overwhelming feedback in numerous Facebook Groups. It would mean a lot.

12. Run PHP 7.4

This is super easy and can make your site 2-3x faster.

First, login to your hosting account and go to the PHP Version manager, then make sure you’re running the latest PHP version supported by your host. Some hosting companies are quicker to release newer PHP versions than others, but you should ideally be running the latest PHP 7.4.

13. Use A Performant CDN

Cloudflare and RocketCDN (StackPath) can sometimes increase TTFBs.

BunnyCDN is the most favorable CDN in Facebook threads (including this thread). It’s relatively cheap considering you get to select the countries you want to use with your CDN.

Setting up BunnyCDN is easy when you follow their instructions. Sign up, select the countries you want to use, then create a pull zone. BunnyCDN will provide you with a CDN URL which you will usually paste in your cache plugin (e.g. WP Rocket) or just use their BunnyCDN plugin.

If you’re using a LiteSpeed server, the free QUIC.cloud CDN also works very well.

14. Optimize Images

Optimizing images can fix many items in PageSpeed Insights.

Properly size images: resize large images to be smaller dimensions.
Specify image dimensions: add a width + height in the image’s HTML or CSS.
Efficiently encode images: compress images (e.g. ShortPixel, Imagify, Smush).
Use next-gen formats – use a WebP plugin to convert JPEG/PNG images to WebP.
Adaptive images – use an adaptive images plugin to serve smaller images to mobile.
Serve images from a CDN – serve images from your CDN URL instead of your domain.
Lazy load images – built into WordPress 5.5 or many cache/speed plugins have lazy load functionality. Be sure to exclude above the fold images (e.g. your logo) from lazy loading.

15. Optimize Plugins

Too many plugins or any high CPU plugins (especially those using external scripts) can slow down your site, even on mobile. I’m very picky about which plugins I use and test Query Monitor after installing a new plugin. Always use the fastest, most lightweight, reliable plugins.

Avoid high CPU plugins: avoid this list of slow plugins. Common slow plugins include social sharing plugins, portfolios, slider, statistics, backups, and others.
Replace high CPU plugins with faster plugins: some research will be required, but replace any of your high CPU plugins with faster, more lightweight plugins.
Delete plugins you don’t need: can you replace plugins with code (eg. insert GA tracking code directly, use Facebook widgets instead of plugins, or create a table of contents in HTML + CSS? Any plugins you can replace with code, do it.
Use plugins with modular design: this lets you disable specific functionality in a plugin which you’re not using, ultimately resulting in less bloat and faster speeds.
Find your slowest plugins: use the GTmetrix Waterfall tab or Query Monitor (the queries by components tab) to see your slowest plugins. If a plugin shows multiple times in your PageSpeed + YSlow report, that may also be an indictor.

WP Hive is a Chrome Extension that shows you a plugin’s impact on memory usage and PageSpeed scores. Install it, search the WordPress repository for a plugin, and view the stats.

16. Optimize Third-Party Code

External scripts are anything that pull requests from outside websites.

The most common external scripts are Google Fonts, Google Analytics, Google Tag Manager, AdSense, Maps, social sharing plugins, embedded videos, Gravatars, and even Facebook Pixel.

Some third party scripts are easy to optimize:

Google Fonts can be combined and hosted locally using WP Rocket, Autoptimize, or even Asset CleanUp. Be minimal with fonts + weights!
Google Analytics can be optimized using WP Rocket or CAOS Analytics.
Embedded videos lazy load and replace the iframe with a preview image using WP Rocket, WP YouTube Lyte, or use this detailed light YouTube embeds guide.
Add browser cache to Facebook Pixel can be done using WP Rocket’s add-on.
Social sharing plugins need to update ‘like counts’ (at least many of them do). I recommend the Grow By Mediavine plugin which is a lightweight alternative.
Unused JetPack modules should be disabled (find these in debug settings).

Other third party scripts aren’t so easy:

Google AdSense can be loaded asynchronously, lazy loaded, or you can try Cloudflare’s SG Railgun which helps speed up dynamic content. However, Google AdSense may be difficult to optimize and can absolutely kill PSI + GTmetrix scores and load times. That’s why I recommend affiliate marketing instead.
Google Tag Manager should generally only be used for large, unoptimized sites. Otherwise it usually does more harm than good and slows down your site.

17. Preload And Prefetch

Preconnecting and prefetching make an early connection to browsers so they anticipate third party requests (Google Fonts, Analytics, AdSense, embedded videos, and other HTTP requests).

Mozilla says:

“DNS requests are very small in terms of bandwidth, but latency can be quite high, especially on mobile networks. By speculatively prefetching DNS results, latency can be reduced at certain times, such as when a user clicks the link. In some cases, latency can be reduced by 1s.”

How To Prefetch DNS Requests
Pre* Party Resource Hints has the following features: DNS prefetch, prerender, preconnect, prefetch, and preload (here are their definitions). These are helpful if you have third party scripts on your site (Google Fonts, Analytics, YouTube videos, Gravatars, etc). Copy this list of common external domains (or add your own) and add them to either Pre* Party or WP Rocket.

18. Use A Better Cache Plugin

Not all cache plugins are equal.

WP Rocket is usually rated #1 in Facebook polls and yields the best desktop and mobile load times (and GTmetrix scores). That’s because WP Rocket comes with more features than other cache plugins. If you were to use another cache plugin that didn’t have these features, you would need to install about 6-7 extra plugins, while WP Rocket has all these features built-in.

The result?

Less plugins on your site, yet more speed optimization features and better results.

WP Rocket Features Not Included With Most Cache Plugins:

Database Cleanup: built-in to WP Rocket, or use WP-Optimize.
Lazy Loading: built-in to WP Rocket, or use WP YouTube Lyte.
Heartbeat Control: built-in to WP Rocket, or use Heartbeat Control.
Local Google Analytics: built-in to WP Rocket, or use CAOS Analytics.
Local Google Fonts: built-in to WP Rocket, or use either OMGF or SHGF.
Prefetch DNS Requests: built-in to WP Rocket, or use Pre* Party Resource Hints.
Facebook Pixel Browser Caching: built-in to WP Rocket (no other plugin does this).
CDNs: built-in to WP Rocket (both Cloudflare + multiple CDNs), 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.

19. Clean Your Database

Frequently cleaning your database prevents it from getting bloated.

You can use WP-Optimize or WP Rocket to schedule weekly or biweekly database cleanups (but taking a backup is recommended). Typically, everything in the settings should be deleted except for unapproved comments. Database tables are often left by plugins you deleted, a post revision is created every time you edit a post, you should empty your trash folder, and so forth.

I also recommend Perfmatters or Clearfy to limit post revisions to 2-3, disable auto-drafts, and disable pingbacks + trackbacks. I call these “miscellaneous optimizations” and use Perfmatters by Kinsta which has the following features (it also lets you selectively disable plugins + scripts):

20. Desktop Optimizations Carry Over To Mobile

Most desktop speed optimizations will carry over to your mobile website.

I’m talking about:

Adding a CDN
Optimizing images
Optimizing plugins
Cleaning your database
Upgrading PHP versions
Upgrading your server/hosting
Configuring a good cache plugin
Optimizing external scripts (eg. Google Fonts)

If your mobile and desktop need work in GTmetrix, I wouldn’t worry so much about your mobile site at first. Enable mobile caching (in your cache plugin), then strictly focus on your PSI + GTmetrix recommendations, as well as the primary factors of WordPress speed optimization.

If you search “mobile speed” in the WordPress plugin library, hardly anything comes up to optimize WordPress sites specifically for mobile devices. Start with desktop optimizations!

Frequently Asked Questions

Do desktop optimizations also improve mobile load times?

Yes, nearly all optimizations made on desktop will also improve mobile load times. That's why it's best to fix these first.

What is the easiest way to improve mobile speed in WordPress?

Use an adaptive images plugin (eg. from ShortPixel) to make sure your images are correctly resized for mobile devices. If you use a separate subdomain for your mobile site, make sure the redirects are setup properly and you don't get redirect errors in GTmetrix.

Which desktop optimizations carry over to mobile?

Hosting, upgrading PHP versions, and optimizing images, fonts, and plugins all carry over to mobile and have a large impact on both your mobile and desktop speed. Very important!

What about mobile recommendations from Google PageSpeed Insights?

You are much better off paying attention to GTmetrix's Waterfall tab than Google PageSpeed Insights, since this tells you exactly which elements take longest to load and the recommendations are more specific. Most of the WordPress community tells you not to even pay attention to Google PageSpeed Insights and to focus on GTmetrix instead.

What is the most accurate way to test mobile load times?

I prefer GTmetrix's mobile testing tool which you can use by signing up for a free GTmetrix account, then test your site on Android.

Need Help With Your WordPress Mobile Speed?

Send me your GTmetrix report in the comments and I’ll be glad to give some pointers. Or, if you’d like to hire my team and I to make your WordPress site faster (both mobile and desktop), we also offer a WordPress speed optimization service with before and after GTmetrix reports.

Cheers,
Tom

Yo, I’m Tom

I write tutorials on WordPress speed optimization and SEO. I also donate a good chunk of my blog's income to GoFundMe campaigns. Check out my bio to learn 50 random and disturbing things about me.