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

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.

 

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:

 

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.

Page builder migrations and polls on the fastest themes (click on image to enlarge):

 

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.

• StackPath device-based caching instructions
• KeyCDN device-based caching instructions
• Cloudflare device-based caching instructions

 

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

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:

 

11. Reduce TTFB With Faster Hosting

Most hosting recommendations are honestly garbage.

Join the WordPress Hosting Facebook Group to get unbiased feedback from knowledgeable people who’ve been around the block. I won’t tell you to switch hosts if you don’t need to, so run your website through Lighthouse and check for slow server response times (TTFB) over 600ms.

If your TTTFB is slow, many people in Facebook groups (including myself) use Cloudways WordPress Hosting. Specifically their DigitalOcean or Vultr High Frequency plan. Sure, it’s $10-$13/month, but we’re talking about speed, TTFB, and core web vitals – not being cheap.

Take a look at conversations, migration results, and polls posted in some of these Facebook groups. Or look at Backlinko’s PageSpeed Test where he found SiteGround has a slow TTFB. You already know GoDaddy and EIG brands (Bluehost and HostGator) are obviously not good. Hosting affects TTFB, LCP, and other web vitals which will be a ranking factor as of May, 2021.

Here are 22 people who moved to Cloudways and posted their results (click image to enlarge):

Recent Facebook polls taken on “the best hosting” (click image to enlarge):

I use Cloudways DigitalOcean who is #1 in most recent Facebook polls.

Not saying hosting is everything, but it helps.

This is a simple Pingdom test to measure TTFB + load times of 16 WordPress hosts. I installed the same Astra Starter Site on 16 hosting accounts (using separate domains) while measuring Pingdom load times for 1 week at 30 minute check intervals, as well as TTFB in various tools. No caching or CDN (with same plugins) are being used since I’m strictly comparing the server. Some domains are still live (cwdoserver.com is hosted on a $10/month Cloudways DO plan and stgrndserver.com is on SiteGround GrowBig). I cancelled most accounts since it got expensive. Even when browsing through those 2 sites or running your own tests, you’ll see the difference.

 

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.

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:

Other third party scripts aren’t so easy:

 

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.

WP Rocket is #1 in most Facebook polls (click on image to enlarge):

 

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

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.

See Also: WordPress Speed Guide: How I Got 100% In GTmetrix

Cheers,
Tom