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

Want to improve mobile PageSpeed scores?

To speed up WordPress on mobile, use mobile caching, adaptive images, and asset unloading plugins like Perfmatters or Plugins Organizer to remove unused CSS/JS based on device type. Take advantage of multiple cache levels like Redis, memcached, and Cloudflare full page cache. And finally, if you’re using Elementor, activate the “Experiments” settings and hard code your header + footer in CSS so it doesn’t use bloated page builder code which slows down your 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.

Most desktop optimizations carry over to mobile, so it’s best to focus on the general optimizations first (hosting, theme, plugins, CDN, images, fonts, third-party scripts, etc).

 

1. Test 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.

Mobile wordpress speed report

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 core web vitals

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

Many cache plugins 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). Or if you’re using LiteSpeed Cache, it should be on if guest mode and guest optimization are on.

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

Use Multiple Caching Levels

Remember to use multiple caching levels since cache plugins usually only have 1 level of caching. Try using Redis, memcached, or Clouflare’s full page cache. Most cloud hosts have an option to activate Redis or memcached, or if using cPanel, you can activate them under Select PHP Version → Extensions. Then install the Redis Object Cache plugin and use it to activate Redis (LiteSpeed Cache also has an option in the object cache settings). Cloudflare’s full page cache can be used in a plugin, by creating a page rule, or SiteGround’s Optimizer has an option.

Cache-everything-page-rule

 

3. Fix Mobile Layout Shifts

Use Google’s Layout Shift Debugger to find mobile layouts shifts. You score should ideally be under .01 like Google recommends. Layout shifts are often caused by fonts, images or iframes without specified dimensions, animations, or asynchronous CSS which can often cause FOUC.

  • Turn off “optimize CSS delivery” in WP Rocket
  • Turn off “load CSS asynchronously” in LiteSpeed Cache
  • Turn on “add missing image dimensions” in WP Rocket or LiteSpeed
  • Fix animation layout shifts with CSS transform + translate properties

Mobile layout shifts

 

4. Remove Unused Mobile Assets

You may be familiar with using asset unloading plugins like Perfmatters or Asset CleanUp to remove unused CSS + JavaScript. Recently, Perfmatters added the option to disable assets by device type, so you can disable CSS, JavaScript, or entire plugins on mobile. This removes unused CSS/JS and makes your site quicker by disabling things where they don’t need to load.

Mobile script manager

And if you’re using Elementor, remember to activate the following settings in the Experiments tab, which can improve PageSpeed items related to DOM elements, CSS, JavaScript, and fonts.

Elementor experiments

You can also use Perfmatters or Asset CleanUp to remove unused page builder CSS/JS.

Remove elementor css javascript

Just like you removed unused CSS and JavaScript on mobile, you can do the same thing by removing certain content on mobile that takes a long time to load. You may consider removing certain images, your sidebar, or replacing sliders and dynamic content with a static image. Elementor’s responsive mode lets you edit mobile content (most page builders have an option).

Elementor mobile editor

Also make sure you’re not using unnecessary columns + widgets when creating your pages. If you’re using Elementor, here’s a great video on simplifying layouts with less columns + widgets.

 
If you’re using WP Rocket, you probably know it can also remove unused CSS.

Remove unused css wp rocket

 

5. Use Adaptive Images

Adaptive images serves smaller images to mobile devices and can be done using an adaptive images plugin like ShortPixel Adaptive Images. Otherwise, if you run your website through a mobile speed test (like you can in GTmetrix Pro), you may see errors with properly size images.

Adaptive images plugin
Source: WP Speed Matters Facebook Group

Background maximum width

 

6. Hard Code Your Header, Footer, Sidebar

Elementor and Divi add extra JavaScript, CSS, and fonts to both your desktop and mobile site. The obviously recommendation would be to remove Elementor and Divi and use a lightweight alternative like Gutenberg, GeneratePress, Oxygen Builder, or Kadence Theme. But if you need to keep your page builder, you should at least code your header, footer, and sidebar in CSS so it doesn’t use bloated code from page builders, since these are present across the entire website.

Page builder speed test

I hired WP Johnny to do this and it made an enormous difference (he eventually removed Elementor completely and replaced it with Gutenberg, but started by coding these in CSS).

Wp johnny header footer service

 

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

 

8. Downgrade Image Quality On Slow Connections

Some image optimization plugins (like Optimole) let you downgrade image quality when visitors are on a slow connection. If the connection is slow, this downgrades the image quality to a whopping 40% compression level. Load times or image quality – which’s one more important?

Network based optimizations

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

Cloudflare image mirage

 

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

 

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

Avoid multiple page redirects

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.

 

11. Use Cloud Or LiteSpeed Hosting

Most hosting recommendations are garbage.

SiteGround has a slow TTFB, GoDaddy is a NO, Bluehost is gangrene, and stay away from Hostinger. Most hosting recommendations are garbage and I suggest joining the WP Speed Matters Facebook Group (run by Gijo Varghese) to get unbiased feedback on speed/hosting.

I use Cloudways Vultr HF which is a popular choice in Facebook Groups. You can check my GTmetrix report, TTFB, or click through my site to see yourself. I moved from SiteGround to Cloudways which cut load times in half and fixed CPU issues (it’s also monthly pricing with no higher renewals). They use Object Cache Pro/Redis with NVMe storage and 44 data centers. Main cons are no file manager/email hosting and their Breeze plugin + CloudwaysCDN aren’t great. I suggest WP Rocket or FlyingPress, Cloudflare or BunnyCDN, and Google Workspace. They do 3-day trials, a free migration, and a promo code for 30% off 3 months. Some people are afraid they’re techie since it requires an extra step to launch a Vultr HF server, but it’s not hard:

Cloudways launch vultr hf server

Siteground slow ttfb

Siteground cloudways cpu usage

Siteground vs cloudways pricing

Spend 5 minutes looking at recent Facebook polls on “the best hosting,” migration results of people who switched, and unbiased feedback in Facebook groups (click thumbnails to enlarge).

Favorite-cloudways-server

Moving away from siteground

 
LiteSpeed hosting on NameHero is another solid choice (if you haven’t heard of LiteSpeed, go read about it). It’s cheaper than Cloudways because it’s shared hosting – but faster than most.

I’m not sure why people use other LiteSpeed hosts like Hostinger/A2 when you get more CPU cores + RAM with NVMe on NameHero. You can use the LiteSpeed Cache plugin with server-side caching, QUIC.cloud, HTTP/3, and Redis. This is arguably the fastest setup you’ll find on a budget. I don’t know anywhere else you get 3 CPU cores, 3GB RAM, and NVMe on LiteSpeed for $8/mo. WP Johnny and I both have solid guides on configuring LiteSpeed Cache with QUIC. The main con is they only have data centers in US + Netherlands. Otherwise they have higher uptimes with less ‘frequent maintenance’ compared to Hostinger/A2’s uptime status page with US-based support. Ryan (the founder) is a down to earth guy if you watch his YouTube channel.

Namehero plans resources
NameHero has more resources compared to similar LiteSpeed hosts (see specs page)

Web server poll

Web server poll oxygen

Siteground vs cloudways vs namehero

Namehero vs siteground feedback

Siteground to namehero

Cloudways trustpilot review

Namehero trustpilot review

Affiliate Disclaimer: I use affiliate links to Cloudways + NameHero and appreciate your support. But what do I know? I’m just a biased affiliate. Do your own research in FB groups.

 

12. Use A Fast CDN

Cloudflare is alright for a free CDN, but BunnyCDN, QUIC.cloud, and Cloudfront are usually faster than Cloudflare and other paid CDNs like StackPath (which is also used in RocketCDN).

Cdn feedback

Cloudflare is setup by changing nameservers (moving your DNS to Cloudflare is faster than using the DNS from GoDaddy or NameCheap). Once that’s done, go to your DNS settings and change your website from DNS Only to Proxied. Take advantage of other speed optimization features in the Cloudflare dashboard like their page rules and automatic platform optimization.

Activate cloudflare cdn

BunnyCDN is what I use and is popular in Facebook Groups. It’s relatively cheap considering you only select regions you want to use. Setting up BunnyCDN is easy with these instructions. Sign up, select your countries, then create a pull zone. Once BunnyCDN gives you a CDN URL, paste it into your cache plugin (i.e. CDN CNAME field in WP Rocket) and also paste it into the BunnyCDN plugin (adding it to both places makes sure more files are delivered from the CDN).

Bunnycdn source code

 

13. Use A Fast Cache Plugin

WP Rocket and LiteSpeed Cache are the gold standards for cache plugins if you check polls.

I wrote guides on setting up the WP Rocket settings and LiteSpeed Cache settings. The only other cache plugins I recommend are SiteGround Optimizer (meh) and FlyingPress. Most other cache plugins either don’t address core web vitals while other plugins (NitroPack) are blackhat.

If you’re using a free plugin like WP Fastest Cache or W3 Total Cache, they usually don’t come with browser resource hints, database cleanup, heartbeat control, hosting analytics locally, delaying JavaScript, and other optimizations that can improve both desktop and mobile scores. Some of these you can do manually with code, otherwise you would need to install a bunch of extra plugins. With WP Rocket and LiteSpeed Cache, these are already built-in to their settings.

 

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

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:[email protected]&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

 

15. Don’t Use 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.

Amp facebook poll
Source: WP Speed Matters Facebook Group

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

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

 

16. Use PHP 7.4

Upgrade to PHP 7.4 in your hosting account. PHP 8.0 is available on some hosts, but it’s not stable with many WordPress themes and plugins. PHP 7.4 is much safer and is still very fast.

Php 7. 4

 

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

 

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 mobile website 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 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.

8 thoughts on “Mobile Speed Optimization In WordPress (2022 Guide): How To Improve Your Website’s Mobile Load Time And PageSpeed Scores

  1. Tx. Nice article.
    What’s your opinion on swift performance as optimization plugin. I found’it to be more customizable, and you can squeeze more performance. We usually use swift or wp rocket.

    1. Many people swear by it but it has bad reviews mostly for bad billing practices. I just moved from WP Rocket to Gijo’s FlyingPress and noticed a big improvement when clicking through my posts. “Scores” stayed the same, but load times are much quicker. I haven’t used Swift enough recently to give a decent opinion, but FlyingPress was great for me.

  2. Hi Tom,

    Thank you for your informative articles on web vitals. I have become a daily visitor now.

    Can you please explain how to Remove Sliders On Mobile.
    Even if I keep it display none, I’ll be downloading images.

    Thanks,
    Sal

  3. Hello Tom,

    i appreciate this comprehensive guide on mobile optimization.

    The GTmetrix mobile testing is not available for my account.
    Is it for Pro User?

Leave a Reply

Your email address will not be published.