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.

Mobile WordPress Speed Report

 

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

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.

Mobile Web Vitals

Core Web Vitals - Mobile

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.

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:

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

 

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.

Background Maximum Width

 

4. Lazy Load Mobile Images

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

Lazy Load For 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):

Moving from SiteGround
eCommerce Hosting Poll

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

Cloudways Numbers
Cloudways-BuddyBoss
Cloudways Shoutout
Giving them a shout out in the WordPress Hosting Facebook Group
GTmetrix Report - OMM
I use Vultr High Frequency and you can click through my site to see how fast it loads
Digital Ocean Recommendation
DigitalOcean is also good and recommended in the WordPress optimization guide

Why I use Cloudways:

  • My TTFB is consistently <200ms
  • The WordPress admin loads instantly
  • Easier to pass web vitals on cloud hosting
  • Monthly pricing and free 3-day trials are nice
  • Server-level caching (Redis makes a big difference)
  • They do a free migration and have a migrator plugin
  • Support is fast/helpful as reflected in Trustpilot reviews
  • Choice of 5 cloud hosts: DO, Vultr, AWS, Google Cloud, Linode
  • They have a Cloudways Users Facebook Group to ask questions
  • Only major con is no email hosting, but there’s an option for Rackspace

Affiliate Disclaimer – if you sign up for Cloudways with my affiliate link, thank you! Most affiliates recommend things only for commissions but I take mine seriously and support them with evidence. I also donate to GoFundMe campaigns and everything helps. They do free migrations but if you have questions about launching a server or anything else, you can reach out to me by leaving a comment. Cheers to a faster TTFB.

Cloudways Coupon Code
Sign up for Cloudways using promo code OMM25 to get 25% off 2 months

 

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.

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

This is found in Cloudflare’s speed settings:

Cloudflare AMP Real

 

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.

Responsive Mode Elementor

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.

Network based optimizations

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

Cloudflare Image Mirage

 

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.

Load More Comments Button

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

Load More Comments

 

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.

Largest Contentful Paint WordPress Element - Background Image

Largest Contentful Paint Background Image

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

Cumulative Layout Shift Debugger

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

Blocking Time - GTmetrix Waterfall

 

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.

Eliminate Render-Blocking Resources WordPress - Passed Audit

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.

Remove-Elementor-JavaScript

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.

Main-Thread Blocking Time

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.

Facebook Group Search

 

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.

Responsive Design

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.

 

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.

PHP 8.0

 

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.

CDN Facebook poll

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

 

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.

  • 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 GTmetrix or Lighthouse report, that is also an indicator.

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

 

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:

WP Rocket is #1 in most Facebook polls (click thumbnails 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.

 

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

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
6 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments