Mobile Speed Optimization In WordPress (2020): How To Improve PageSpeed Scores Specifically On Mobile Devices

Looking to speed up your mobile WordPress site?

This tutorial covers mobile caching, mobile-adaptive images, and AMP (accelerated mobile pages). Most optimizations made on your desktop site carry over to your mobile site. That’s why doing things like upgrading PHP versions and reducing server response times also help.

How To Test Your WordPress Site’s Mobile Speed
I recommend GTmetrix’s mobile test since it gives you completely new PageSpeed recommendations specifically for mobile site speed, it measures load times, and you can expand each item to see exactly which elements need to be optimized on your mobile site.

1. GTmetrix Mobile Test
With a free GTmetrix account, you can test your site on Android. The PageSpeed tab is unique to mobile while YSlow is the same as desktop. The PageSpeed tab shows serve scaled image errors if you’re not using adaptive images, as well as redirect errors and your mobile load time.

2. Google PageSpeed Insights
Google PageSpeed Insights has a “mobile” tab which tells you mobile-specific optimizations. However, you shouldn’t use PageSpeed Insights anyway since there’s an emphasis on scores (and not load times) which it doesn’t even measure, so use GTmetrix or another tool instead.

3. Think With Google
Think With Google isn’t great either. Just like PageSpeed Insights, the recommendations are somewhat broad (with GTmetrix you can actually expand recommendations to see which plugins, scripts, and images are slowing down your site). Think With Google doesn’t do that.

4. Google Analytics
You can see each of your page’s mobile load times under Behavior > Site Speed then add a segment for mobile and tablet traffic. The speed suggestions tab can also be helpful, but then again, it refers to Google PageSpeed Insights recommendations which aren’t very useful at all.

1. 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, find out if it at least supports it. If not, consider using a cache plugin that does. Some also have an option to create separate cache files for mobile devices which makes sure mobile-specific elements are cached (mainly helpful if you’re using a mobile plugin like WP Touch, WP Mobile Detect, or JetPack’s mobile theme).

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 viewing your site from mobile and you have many mobile-specific design elements you want loaded faster, you can choose to preload mobile cache instead of desktop. You can enable mobile preloading with WP Rocket’s helper plugin. For other cache plugins, Google to see if they an option to enable mobile preloading instead of standard preloading.

WP Rocket says:

2. Use Adaptive Images

If serve scaled images is not 100% when you test your site on GTmetrix’s mobile test, using adaptive images should fix these errors.

“Adaptive images detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embedded HTML images.”

Step 1: Test your site on GTmetrix (Android) to see serve scaled image errors on mobile.

Step 2: Find the recommended image width in GTmetrix.

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

Step 3: In your plugin settings, set the background maximum width to the dimensions provided by GTmetrix (in the serve scaled images section). 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 in GTmetrix (Android) and serve scaled images should be 100%.

3. Enable Cloudflare Mirage

Cloudflare says:

This is a pro feature of Cloudflare, but you shouldn’t need it since there are free lazy loading and adaptive image plugins out there which do the same thing. Mirage is an alternative though.

4. Use Responsive Themes And Plugins

Responsive themes and plugins naturally 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.

I personally use StudioPress and their Genesis Framework which is also used by Yoast.

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

5. Fix Mobile Redirects

If you see “minimize redirect” errors in GTmetrix, it’s probably from one of these:

• 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 redirecting website traffic
• 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.

6. Reduce Server Response Time

Your server (hosting) is the #1 factor in the WordPress optimization guide.

Run your site through Google PageSpeed Insights to check your server response time which should be <200ms like Google recommends. GoDaddy and EIG (Bluehost, HostGator, iPage, Site5) are infamous for slow servers. This is well-known on Twitter and in Facebook Groups. Join the WordPress Hosting Facebook Group and look at the polls that were taken on hosting.

SiteGround and Cloudways are usually #1 and #2. Many people already migrated and posted their new load times on Twitter – the difference can sometimes be up to 8 seconds. Both SiteGround (shared) and Cloudways (cloud) are good options depending on your budget and needs, but both are worlds better than GoDaddy and EIG. Both will also migrate you for free.

SiteGround and Cloudways will both migrate you for free.

7. Don’t Use 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 used to use AMP, but have since removed it:

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:

8. 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 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!

9. Run PHP 7.3+

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 PHP 7.3 or higher. You can also use the Display PHP Version plugin see which version you’re currently on.

Sometimes, incompatible plugins can cause errors when upgrading PHP versions. This means they aren’t maintained well and you should consider deleting or replacing those plugins. As always, take a backup before upgrading, but you can always revert to an earlier PHP version.

10. Setup A CDN

There’s absolutely no reason not to use Cloudflare’s free CDN.

They have 200+ data centers around the world. By using these data centers to host heavy files on your website, you’re reducing the geographic distance between your server and visitors (a recommendation in the WordPress optimization guide). You’re also offloading bandwidth consumption to Cloudflare, which can save CPU consumption and money on your hosting bill.

To setup Cloudflare, sign up for a free account, grab the 2 nameservers from Cloudflare, then change nameservers in your domain registrar. This will take about 24 hours for propagation.

Setting Up Multiple CDNs
Multiple CDNs = more data centers = faster delivery of your content. Small websites should be fine with Cloudflare, but if you’re serious about speed or have a large website, you may consider an additional CDN from someone like StackPath or KeyCDN (I use Cloudflare + StackPath). While Cloudflare requires changing namesevers, other CDNs are much easier. They will assign you a CDN URL which most cache plugins have a field for, or use CDN Enabler.

11. Optimize Images

Images can be optimized in 3 ways according to GTmetrix:

• Serve scaled images: resizing large images to be smaller
• Optimize images (lossless compression): try ShortPixel, Imagify, or Smush
• Specify image dimensions: adding a width + height in the image’s HTML or CSS

GTmetrix only shows errors for a single page. That’s why it’s best to optimize images that appear on multiple pages first (logo, sidebar and footer images), then work you way through your most important pages. It’s also best to start with scaling images since that requires cropping/resizing images and reuploading them. GTmetrix will tell you the correct dimensions for unscaled images and for those that have no specified width + height in the HTML or CSS.

Create An Image Dimensions Cheat Sheet
I recommend creating an “image dimension cheat sheet” for the dimensions of your sliders, full width blog images, featured images, etc. That way, you can crop + resize them to the correct dimensions before uploading them, and you shouldn’t have serve scaled image errors again.

12. 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 my GTmetrix report after installing a new plugin. Always use the fastest, most lightweight, reliable plugins.

Asset CleanUp is great for speeding up plugins. It lets you see which plugins, scripts, and styles are loading on certain pages, then selectively disable them on content where they don’t need to be loaded. If you’re not doing this already, I would 100% recommend using Asset CleanUp.

13. Optimize External Scripts

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:

14. Preconnect And Prefetch

Preconnecting and prefetching make it easier to for browsers to anticipate third party requests (Google Fonts, Analytics, AdSense, embedded videos, and other outside websites).

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.

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

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

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