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

Want to speed up your mobile WordPress site?

Google uses mobile-first indexing, making mobile speed more important than ever. The first step is to test your WordPress website using a mobile-specific speed test (i.e. Think With Google) and view the mobile version of your core web vitals report in Google Search Console. Learn whether you need to improve things like LCP, CLS, or TBT on your mobile WordPress site.

So how do you speed up your mobile site?

To speed up your mobile WordPress site, enable mobile caching in your cache plugin, use responsive/adaptive images, and avoid JavaScript in mobile menus (try coding them in CSS instead). You may consider AMP, but there are complaints about it. You can even add a “load more comments” button on mobile and downgrade image quality for slow mobile connections.

The goods news is that most desktop optimizations transfer to mobile. Reducing TTFB, using lightweight plugins, and hard coding your header/footer (instead of relying on page builders) are all things that can improve both desktop and mobile speed. If you haven’t done everything you can to optimize your site (general optimizations), these should improve mobile speed too.

 

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.

The core web vitals report in Google Search Console has a mobile-specific section showing URLs that are affected. However, it only says whether you need to improve LCP, FID, and CLS. Use Think With Google (or even PageSpeed Insights) if you want the specific recommendations.

GTmetrix Pro accounts can test your website on Android, but it’s limited to Vancouver. Since GTmetrix uses the same recommendations from Lighthouse, it’s somewhat pointless. Google Analytics also lets you see each page’s mobile load time under Behavior > Site Speed, then add a segment for mobile and tablet traffic. But like I already said, I would stick to Think With Google.

 

2. 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 support mobile caching, you might want to switch to one that does. Separate cache files for mobile devices caches mobile-specific elements and should only be enabled if you’re using a mobile plugin (WP Touch, WP Mobile Detect, 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 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 there’s an option to use mobile preloading instead of standard preload.

WP Rocket says:

 

3. Use Adaptive Images

Adaptive images will serve smaller images to mobile devices.

It’s similar to properly sizing images (only for mobile) and is done using an adaptive images plugin like ShortPixel Adaptive Images. In the settings, set the background maximum width.

 

4. Lazy Load Mobile Images

Many cache and image optimization plugins let you lazy load images on mobile.

 

5. Remove Sliders On Mobile

It’s been said many times, but sliders suck.

If you insist on having them, at least consider removing them from mobile and reduce the number of images. Almost all sliders will slow down WordPress and this is also true for mobile. If you’re using a page builder like Elementor, use responsive mode to remove sliders on mobile.

 

6. Fix Mobile Redirect Errors

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.

 

7. Reduce TTFB With Faster Hosting

Lighthouse fails your TTFB if it’s over 600ms.

If you have a slow TTFB, join the WordPress Hosting Facebook Group (WP Speed Matters is good too) to get unbiased feedback since most hosting recommendations are honestly garbage.

I use Cloudways is who is #1 in most recent Facebook polls and my TTFB is consistently <200ms. I’m currently on their Vultr High Frequency plan, but DigitalOcean is good too. It’s $10-$13/month, but we’re talking about fast cloud hosting, not cheap hosting with slow TTFBs.

Instead of reading biased reviews, I encourage you to do your own research. Join Facebook Groups and look at polls, migration results, and conversations on “the best hosting” (shown below). Check out Backlinko’s PageSpeed Test where he found SiteGround had a slow TTFB. You already know GoDaddy and EIG brands (Bluehost + HostGator) are not good choices. WP Engine went downhill, Hostinger writes fake reviews, and NameCheap is mainly for domains.

Recent Facebook polls show many people are moving away from low quality hosts to Cloudways, LiteSpeed, Kinsta, GridPane, and A2 Hosting (click on thumbnails to enlarge):

People who moved to Cloudways and posted their results (click thumbnails to enlarge):

 

8. Consider AMP

AMP (accelerated mobile pages) make mobile pages faster while giving you an AMP stamp in mobile search results. But, AMP completely changes the design of your mobile WordPress site.

Kinsta’s conversions dropped 59% 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 somewhat limited and you may be disappointed with the result. And if you decide 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 may be 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

This is found in Cloudflare’s speed settings:

 

9. Use Responsive Modes To Simplify Mobile Layouts

Page builders generally do a good job of keeping your site responsive, but check the responsive view to make sure it looks good and remove sliders or unnecessary heavy JavaScript on mobile.

If you’re using Elementor, here’s a great video on simplifying layouts:

 

10. Downgrade Image Quality On 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.

Mirage also does this if you’re using Cloudflare Pro.

 

11. Use A “Load More Comments” Button On Mobile

If posts have lots of comments, consider breaking them or use a “load more comments” button.

I don’t do this and instead, delay my comments (wpDiscuz and Gravatars) so they load upon user interaction (i.e. scroll). I also noticed WP Johnny recommends using a load more comments button, but he loads all comments. If you don’t use a load more button, at least optimize them.

wpDiscuz and most comment plugins have a load more button button and other speed settings.

 

12. Improve Core Web Vitals

Open your mobile core web vitals report in Search Console and check if you need to improve the 3 core web vitals: LCP, CLS, and TBT.

Largest Contentful Paint – your largest contentful paint element will be shown in PageSpeed Insights and is usually a large image or background image (it can be a video, animation, or block-level element too). But in many cases, it’s an image  or background image that often loads across your entire site. Optimize this image by compressing it, making sure it’s sized properly, consider a faster image format (i.e. WebP), and preload the image. You should also consider serving the image from your CDN, excluding it from lazy load, and making sure it has specified dimensions.

Cumulative Layout Shift – use Google’s Cumulative Layout Shift Debugger and check “avoid large layout shifts” in your PageSpeed Insights report. Avoid layout shifts by specifying dimensions (of images, videos, iframes, and ads in the div code). Fix “ensure text remains visible during webfont load” by adding font-display: swap to your font’s CSS (manually or with a plugin like Swap Google Fonts Display). Host fonts locally, preload them, and make sure “optimize CSS delivery” in WP Rocket is working if you’re using it. Use CSS transform property in animations and use transform: translate() to move your elements around (instead of top, bottom, left, right).

Total Blocking Time – blocking time can be caused by fonts, third-party code, or JavaScript. View your Waterfall report in GTmetrix and look for elements that have a high blocking time (your third-party code report in PSI also shows main-thread blocking time of third-party code).

 

13. Fix PageSpeed Insights Mobile Recommendations

I have tutorials for nearly every recommendation in PageSpeed Insights which you can find in my sidebar and nav menu. Check which items appear in your mobile report and try to fix them.

Render-blocking resources – try configuring Autoptimize (enable optimize/aggregate CSS and JavaScript in the settings). Also configure the Async JavaScript plugin (just click “apply defer” after installing it). This reduced render-blocking resources from 7 to 1 for my WordPress site.

Ensure text remains visible during webfont load – add font-display: swap to your font’s CSS manually or by using a plugin (i.e. Swap Google Fonts Display, LiteSpeed Cache, Asset CleanUp).

@font-face { font-family: Lato; font-display: swap; }

https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap

Optimize JavaScript – defer, delay, minify, and combine JavaScript files. Remove unused JavaScript and CSS files with an asset unloading plugin like Asset CleanUp or Perfmatters.

Optimize CSS – generate critical CSS (i.e. optimize CSS delivery) or try CSS removal tools like PurifyCSS. The RapidLoad plugin by Autoptimize removes unused CSS and is a premium plugin.

Optimize third-party code – host things locally (fonts, analytics, GTM, avatars). Be minimal with font families, weights, icons. Use a smaller analytics tracking code (analytics-minimal.js). Lazy load videos/iframes and replace the iframe with a preview image. Use fast social sharing plugin (i.e. Grow Social). Lazy load or delay AdSense and reserve space for ads by specifying dimensions in the div code (to prevent layout shifts). Consider delaying third-party scripts using WP Rocket or Flying Scripts, and prefetch them. Avoid loading heavy JavaScript above the fold.

Preload – try preloading fonts (found in your GTmetrix Waterfall chart) as well as your LCP element (found in your PageSpeed Insights report) and test each one’s impact on load times.

<link rel='preload' href='/image.png' as='image'>
<link rel='preload' href='/font.woff2' as='font' crossorigin>

Preconnect – usually only done with CDNs and external fonts when they’re not hosted locally.

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdn.yourdomain.com" crossorigin>

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

 

14. Hard Code Your Header, Footer, Sidebar

Hard coding these in CSS is much faster than creating them JavaScript-heavy plugins, Elementor, and hamburger menus.

Page builders and plugins can add lots of unnecessary bloat. Since your header/footer load across your site (both mobile and desktop), it’s a small thing that can make a big impact to all URLs. It was the first thing WP Johnny did when I hired him to remove Elementor from my site.

There’s also a huge trend in Facebook Groups of people removing slow page builders.

Divi and Elementor (specifically) add extra CSS, JavaScript, and div wrappers. The extra bloat will likely flag multiple items in PageSpeed Insights (related to CSS and JavaScript) for desktop and mobile. I suggest removing your page builder and replacing 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 and Improve Asset Loading
• If you insist on using Elementor, use the Hello theme which is more lightweight
• Use Perfmatters or Asset CleanUp to unload unused assets created by page builders

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

 

15. Use Responsive Themes And Plugins

Responsive themes and plugins are supposed 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 included in some CDNs. It lets you cache specific elements based on the user’s device, but this should only be used if your WordPress site isn’t responsive.

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

 

16. Use PHP 8.0

Some hosts (like Cloudways) now support PHP 8.0.

Your themes/plugins may not be compatible, so you might be better off on PHP 7.4. But always test the latest PHP version in your hosting account since higher PHP versions = faster websites.

 

17. Use A Performant CDN

Cloudflare (especially with their APO), BunnyCDN, and QUIC.cloud CDN on LiteSpeed are 3 solid choices.

BunnyCDN is popular in Facebook threads (and this thread). It’s relatively cheap considering you only select countries you want to use. Setting up BunnyCDN is easy with these instructions. Sign up, select the countries you want to use, then create a pull zone. BunnyCDN provides you with a CDN URL which you will usually paste in your cache plugin, or use the BunnyCDN plugin.

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.

 

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

 

19. Use A Better Cache Plugin

WP Rocket and LiteSpeed Cache are the gold standards for cache plugins.

I use WP Rocket who was #1 in most Facebook polls and 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:

• Database cleanup – or use WP-Optimize
• CSS/JS optimization – or use Autoptimize
• Delay JavaScript execution – or use Flying Scripts
• Host Google Analytics locally – or use Flying Analytics
• CDN URL integration – or use BunnyCDN / CDN Enabler
• Heartbeat control – or use Heartbeat Control / manual code
• Preload links/instant page – or use Perfmatters / Flying Pages
• Lazy load images/videos – or use Optimole / WP YouTube Lyte
• Host Facebook Pixel locally – no other plugin does this that I know
• Font-display:swap – or use Swap Google Fonts Display / manual code
• Prefetch/preload/preconnect – or use Pre* Party Resource Hints / manual code

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

 

Frequently Asked Questions

How do I test my website's mobile speed?

Think With Google uses a 4G connection to test your website's mobile speed and includes recommendations that can improve core web vitals.

Why is my WordPress site slow on mobile?

If your mobile site is slow, it may be from heavy JavaScript caused by plugins, page builders, and third-party code. It could also be from non-responsive images, lack of mobile caching, sliders, and a slow TTFB.

Why is my PageSpeed Insights mobile score low

PageSpeed Insights uses a slow 3G connection to test your mobile website. Combine this with throttling and this is often why websites have better scores on desktop than mobile.

Which WordPress plugins improve mobile speed?

There is no WordPress plugin dedicated to improving mobile speed. Try using general optimization plugins like Autoptimize, Asset CleanUp, ShortPixel, and a solid cache plugin.

Should I use accelerated mobile pages?

Most people in Facebook Groups recommend against AMP because it changes your design and can be difficult to get working properly. Kinsta reported their conversions dropped 59% after using AMP and ultimately decided to disable it.

See Also: My Ultimate WordPress Speed Guide

Cheers,
Tom