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.

Mobile-WordPress-Speed-Optimization

 

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.

Think With Google Mobile Speed

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.

Mobile Web Vitals

Core Web Vitals

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.

Facebook Group Search

 

3. Enable Mobile Caching

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

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.

Serve Scaled Images On Mobile

Step 2: Find the recommended image width.

Maximum Background Width

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

ShortPixel 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.

Background Maximum Width

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.

Responsive Design

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.

AMP on Google

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

amp-pages

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.

AMP For WP

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:

Cloudflare AMP Real

 

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.

Network based optimizations

 

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.

Cloudflare Automatic Platform Optimization

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.”

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):

Cloudways Numbers
Another Happy Cloudways Customer

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

Moving from SiteGround
eCommerce Hosting Poll

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

Cloudways Shoutout

Not saying hosting is everything, but it helps.

2021 PSI Report

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.

WordPress-Hosting-2020-Pingdom-Test

I use Cloudways because:

  • My TTFB is consistently under 200ms.
  • Free migration service made it easy to try them.
  • They continuously update their speed technology.
  • Multiple caching levels (Redis, memcached, Varnish).
  • Support is great as reflected in their Trustpilot reviews.
  • Free SSL, staging, bot protection, cron job management.
  • Monthly pricing with no long-term contracts or high renewals.
  • They have a Cloudways Users Facebook Group to ask questions.
  • Choice of 5 cloud providers: DO, Vultr, AWS, Google Cloud, Linode.
  • Their community manager answered my questions when signing up.
  • Launching a server yourself and using their migrator plugin is also easy.
  • Ain’t nobody got time for shared hosting when trying to pass web vitals.

 

Affiliate Disclaimer – if you sign up for Cloudways using my affiliate link, I seriously appreciate it. I try to support my recommendations with real, unbiased evidence. I also make donations ($6,000 to GoFundMe so far) and your support would help. It’s easy to request a free migration and promo code OMM25 gets you 25% off the first 2 months.

 

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.

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.

CDN Feedback

 

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.

GTmetrix Image Optimizations

 

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.

WP Hive

 

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.

Third Party Usage

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.

Prefetch-DNS-Requests

 

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):

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.

WP-Optimize Clean Database

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):

perfmatters features

 

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.

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

Cheers,
Tom

About Tom Dupuis

Tom Dupuis 2017Tom Dupuis writes WordPress speed and SEO tutorials out of his apartment in Denver, Colorado. In his spare time, he plays Rocket League and watches murder documentaries. Read his bio to learn 50 random and disturbing things about him.

Subscribe
Notify of
guest
3 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments