19 Ways To Improve Mobile Speed In WordPress For Better Scores In Web Vitals

Mobile wordpress speed optimization

Need to improve WordPress mobile speed and core web vitals?

Most speed optimizations carry over to mobile, so start with the basics first: hosting, theme, cache plugin, CDN, and finding slow plugins in Query Monitor. All have a large impact on core web vitals for both desktop/mobile and I listed recommendations later in this tutorial. I like Rocket.net with Cloudflare Enterprise + Gutenberg (i.e. GeneratePress/Blocksy) + FlyingPress. Although the LiteSpeed setup is also good (LiteSpeed server + LiteSpeed Cache + QUIC.cloud).

But let’s get to the mobile-specific optimizations. Some CDNs serve smaller images to mobile (Cloudflare Mirage and BunnyCDN are two while RocketCDN doesn’t do this). You can also use an adaptive images plugin. Perfmatters has an option to disable specific plugins/CSS/JS on mobile. Then there’s mobile caching in WP Rocket, using a “load more comments” button on mobile, and reducing network latency by using a fast DNS (Cloudflare) and higher TLS versions.

No worries, I’ll cover all this in more detail. Just remember: Google uses mobile-first indexing, so mobile speed is more important than ever, especially if most your visitors use their phones.

 

1. Test Mobile Speed In Think With Google

Think With Google is the best way to test mobile speed since it uses a 4G connection. Run your website through it, enter your email address, and Google will send you the full report in a PDF. PageSpeed Insights gives similar recommendations but uses a slower 3G connection for the mobile test. This means your WordPress site will almost always load faster on the desktop test.

Pagespeed insights mobile speed

Google Search Console has a core web vitals report with a mobile-specific tab that shows all URLs that are affected. However, the recommendations in Think With Google are more specific.

Omm mobile core web vitals search console

GTmetrix Pro users can test their website on Android, but it’s limited to Vancouver. Since GTmetrix uses the same recommendations from PageSpeed Insights, it’s somewhat pointless. Google Analytics shows 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. Resize Images For Mobile

Phones and tables have smaller screens, so smaller images should be served.

Not all image optimization plugins/CDNs resize images for mobile (RocketCDN and SiteGround Optimizer don’t while Cloudflare Mirage and BunnyCDN (including FlyingPress’ FlyingCDN) do. You can also use an adaptive images plugin (ShortPixel Adaptive Images is one popular choice). Otherwise, you’ll see a recommendation to properly size images when testing your mobile site.

Flyingpress responsive images
Most CDNs resize images for mobile, but it’s usually a paid feature (screenshot is for FlyingCDN)
Favorite adaptive image resizing plugin
Source: WP Speed Matters Facebook Group

 

3. Reduce Network Latency

There’s usually more latency on mobile networks. This can be improved with a CDN, faster DNS, and TCP settings.

Make sure you’re using a fast DNS on dnsperf.com (I recommend Cloudflare’s which is consistently in the top 5 results, is free, and can be used simply by changing nameservers).

Cloudflare dns

In your Cloudflare SSL/TLS settings, make sure TLS 1.3 is enabled and set the minimum TLS version to 1.2. You may also need to set the minimum TLS version in your hosting account. Cloudflare Pro also has features like TCP Turbo and custom certificates that can help with this.

Cloudflare tls 1. 3 1

 

4. Remove Unused Mobile Assets

Perfmatters can disable CSS, JS, and entire plugins by device. This means if you have certain plugins that don’t need to load on mobile, you can reduce CSS/JS which affects several items in PageSpeed Insights. However, it can only be used if you have separate mobile caching enabled.

Perfmatters disable plugins on mobile

You can also remove certain content on mobile using responsive editors.

Elementor mobile editing

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

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.

 

5. Fix Mobile Layout Shifts

Use Google’s Layout Shift Debugger to find mobile layouts shifts. Your 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.
  • Add placeholders for dynamic content (like AdSense) so they don’t shift around.

Mobile layout shifts

 

6. Enable Mobile Caching

Many cache plugins have an option for mobile caching.

If your cache plugin doesn’t support mobile caching, you may want to switch to one that does. Separate cache files for mobile devices caches mobile-specific elements and should usually only be on if you’re using a mobile plugin (WP Touch, WP Mobile Detect, JetPack mobile theme). Or if you’re using LiteSpeed Cache, it should be on if guest mode and guest optimization are on.

Wp rocket mobile cache

 

7. Hard Code Your Header, Footer, Sidebar

Elementor and Divi are slow (yep, even on mobile).

They add extra CSS, JavaScript, and fonts to both your desktop/mobile site. The best thing would be to use Gutenberg (GeneratePress, Kadence, Blocksy) or Oxygen. 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 will appear across the entire website.

Fastest wordpress themes
View the full 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. He’s pricey and busy, so you may want to search for a developer on freelancer.com or upwork.com.

Wp johnny hardcode header footer service

 

8. Downgrade Image Quality On Slow Connections

Some image optimization plugins (like Optimole) can 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?

Optimole network based optimizations

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

Cloudflare mirage

 

9. Add A “Load More Comments” Button On Mobile

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

I chose to break comments in the WordPress discussion settings (I previously used wpDiscuz and delayed comments, but they jumped around which was annoying). If you use FlyingPress, just add #comments to the “Lazy Render HTML Elements” field. You can also try the Load More Anything or Lazy Load for Comments plugins, or wpDiscuz also lets you add a load more button.

Load more comments button

 

10. Use A Cache Plugin That Better Addresses Web Vitals

FlyingPress and LiteSpeed Cache address core web vitals better than WP Rocket and SiteGround Optimizer.

WP Rocket optimizes for scores but not so much for browsing speed. RocketCDN (StackPath) has a slow Tbps with no other features outside of serving files from the CDN (it doesn’t resize images for mobile either). SG Optimizer lacks even more optimizations in core web vitals with constant compatibility issues they blame on third-party themes/plugins. Nitropack is blackhat because it moves things off the main-thread to cheat scores without improving load time much.

Just telling it how it is. I’d stick to FlyingPress or LiteSpeed Cache. My cache plugin guides cover the settings for every major cache plugin.

SG Optimizer WP Rocket FlyingPress
Server-side caching x x
Delay JavaScript x
Remove unused CSS x Inline Separate file
Critical CSS x
Preload critical images x x By number
Exclude above the fold images By class By URL By number
Lazy load background images x Inline Helper class
Fetchpriority resource hint x x
Lazy render HTML elements x x
Add missing image dimensions x
YouTube iframe preview image x
Self-host YouTube placeholder x x
Host fonts locally x x
Font-display: swap x
Preload links x
CDN (beyond Cloudflare) SiteGround CDN StackPath BunnyCDN
CDN PoPs 14 60 93
CDN Tbps N/A 65 80
Dynamic caching x x
CDN geo-replication x x
CDN image optimization x
CDN image resizing for mobile x x
Documented APO compatibility x x
Flyingpress settings
See my recommended FlyingPress settings

 

11. Try Full Page Cache, Object Cache, OPcache

Caching is great for desktop and mobile, just don’t forget there are many types of caching outside of cache plugins.

Full Page Cache – caches HTML and improves TTFB in multiple global locations when testing your website in KeyCDN’s performance test. Cloudflare APO is probably the most popular but there’s also Super Page Cache for Cloudflare and FlyingProxy which includes full page caching. There’s also full page caching in SiteGround Optimizer, but I don’t recommend using this plugin.

Cloudflare plugin automatic platform optimization

Object Cache – Redis or memcached are usually offered by your host and you’ll need to Google their instructions. In cPanel, they can be activated under PHP Extensions. Some cache plugins like LiteSpeed Cache and W3TC have settings to integrate object cache. There are also several Redis plugins to do this. Cloudways has Redis Object Cache Pro which can be activated in your account and it will be installed as a drop-in plugin. Since there are many different methods for installing Redis or memcached, you need to find your host’s instructions. I personally use Redis.

Redis memcached cpanel

OPcache – OPcache is primarily good for PHP performance and CPU utilization. Again, you’ll need to Google your host’s instructions (screenshots shown above and below are for cPanel).

Opcache

 

12. Manually Check Your Site’s Responsiveness

Just because you’re using a responsive theme doesn’t mean your website is responsive.

You need to manually check your website in a responsive design checker and make sure everything formats nicely. If you’ve never done this, you may be surprised what you’ll find.

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

 

13. 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 pagespeed insights

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 doesn’t hit WordPress. Server-level redirects are faster than redirect plugins.

 

14. Don’t Use AMP

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

Kinsta’s conversions dropped 59% with AMP and they reverted to normal mobile pages. I also stopped using it since the design doesn’t look great. There are AMP plugins to help with design, but it’s still limited and you may be disappointed. And if you decide to add AMP then remove it, it’s extra work since you’ll need to setup redirects back to the old URLs. AMP isn’t worth it IMO.

Accelerated mobile pages amp facebook poll
Source: WP Speed Matters Facebook Group
Amp for wp plugin
If you do decide to use AMP, I recommend AMP for WP

 

15. Stop Using Mainstream Hosts And Get A <200ms TTFB

Rocket.net with their free Cloudflare Enterprise will outperform any “mainstream host” since you get 32 CPU cores + 128GB RAM, NVMe storage, Redis, and Cloudflare’s full page caching + Argo Smart Routing. I use them and average a <150ms global TTFB (or click through my posts).

12 things to know about hosting/TTFB

  1. Hosting is the #1 factor of site speed.
  2. TTFB is a key indicator of hosting performance.
  3. TTFB is part of core web vitals and is 40% of LCP.
  4. TTFB also affects INP (since latency is part of TTFB).
  5. SpeedVitals tests TTFB in 35 locations – use this tool!
  6. Test your site 3 times to get accurate numbers in SpeedVitals.
  7. Doing this ensures your caching and CDN are working properly.
  8. Check your average TTFB worldwide in your 3rd SpeedVitals test.
  9. Google flags your TTFB if it’s over 600ms, but under 200ms is better.
  10. PageSpeed Insights (and other testing tools) only test TTFB in 1 location.
  11. WP Hosting Benchmark also tests hosting performance (here are my results).
  12. Combining a good host/CDN is arguably the best way to improve TTFB (using a host with improved specs on top of Cloudflare Enterprise hits 2 birds with 1 stone).

Omm ttfb speedvitals 1

Mainstream hosts (like SiteGround, Hostinger, and WPX) don’t have a lot of CPU/RAM, use slower SATA SSDs, and are shared hosting with strict CPU limits which force you to upgrade plans. Cloud hosting is faster, but Kinsta still uses SATA SSDs with low CPU/RAM, PHP workers, and monthly visits (Redis also costs $100/month). Cloudways Vultr HF is who I previously used, but again, they start with only 1 CPU + 1GB RAM on slower Apache servers, PHP-FPM, and GZIP.

Here are Rocket.net’s:

All plans use 32 CPU cores + 128GB RAM with NVMe (faster than SATA), Redis (better than memcached), LiteSpeed’s PHP, and Brotli (smaller compression than GZIP). They have no PHP worker limits since only about 10% of traffic hits your origin due to their Cloudflare Enterprise.

SiteGround Hostinger Kinsta Cloudways Vultr HF Rocket.net
Hosting type Shared Shared Cloud Cloud Private cloud
Storage SATA SATA SATA NVMe NVMe
CPU cores Not listed 1-2 12 1 32
RAM (GB) Not listed .768 – 1.536 8 1 128
Object cache Memcached x Redis ($100/mo) Redis (Pro) Redis
Server Nginx LiteSpeed Nginx Apache Nginx
PHP processing FastCGI LiteSpeed FastCGI FPM LiteSpeed
Compression Brotli Brotli Brotli GZIP Brotli
CPU limits Very common Low memory PHP workers Average None

 
Why you need Cloudflare Enterprise

Because you get Enterprise features like 270+ PoPs, prioritized routing, full page caching, HTTP/3, WAF, and image optimization. 3 problems with most CDNs are their small network (PoPs) and no full page caching or image optimization. For example, WP Rocket’s RocketCDN uses StackPath which was removed from cdnperf.com and doesn’t include image optimization with a mediocre Tbps speed of 65+. SiteGround’s CDN only has 14 PoPs. QUIC.cloud CDN (for LiteSpeed) and BunnyCDN are good, but they still don’t beat Cloudflare Enterprise. Sure, you can pay $5/mo for Cloudflare’s APO, but you’re still missing out on all other Enterprise features.

3 popular hosts with Cloudflare Enterprise

Rocket.net’s Cloudflare Enterprise is free, setup automatically, and uses full page caching (unlike Cloudways). And unlike Kinsta’s, Rocket.net has Argo Smart Routing (specifically good for WooCommerce sites), load balancing, and image optimization. Rocket.net CEO Ben Gabler also used to be StackPath’s Chief Product Officer and went as far as building Rocket.net’s data centers in the same locations as Cloudflare’s. And unlike both hosts, Rocket.net doesn’t limit PHP workers (there’s no CPU limits) and monthly visit limits are 10-25 times more than Kinsta’s.

Cloudflare Enterprise (Kinsta) Cloudflare Enterprise (Cloudways) Cloudflare Enterprise (Rocket.net)
CDN PoPs 270 270 270
Prioritized routing
Full page caching x
HTTP/3
WAF
Argo smart routing x
Load balancing x
Image optimization x
Automatic configuration x x
Price Free $5/mo (1 domain) Free

 
Problems with mainstream hosts

I’ve written some pretty bad reviews about SiteGround’s slow TTFB, CPU limits, and why SG Optimizer does a poor job with core web vitals (they also control several Facebook Groups and threaten to sue people who write bad reviews). Hostinger writes fake reviews and is only cheap because you get less resources like CPU/RAM. Kinsta and WP Engine are way too expensive for how many resources, PHP workers, and monthly visits you get. Along with major incidents like WPX’s worldwide outage and SiteGround’s DNS getting blocked by Google for 4 days (both WPX and SiteGround denied responsibility). One thing is clear: most mainstream hosts appear to be more interested in profits than performance. Please do your own research before getting advice.

Getting started

Step 1: Create a Rocket.net account and you’ll be prompted to add a coupon. Sign up with coupon OMM1 to get your first month for $1 (renews at $30/mo or $25/mo when paying yearly). If you sign up with my coupon or affiliate links, I get a commission which I seriously appreciate.

Rocket. Net omm1 coupon

Step 2: Request a free migration. They did this the same day and let me review my website before it was launched with no downtime. For the record, their support is better than Kinsta’s and you can reach out to Ben Gabler or his team (via phone/chat/email) if you have questions.

Step 3: Upgrade to PHP 8.1 and ask support to install Redis (they use Redis Object Cache). These are the only things I did since Cloudflare Enterprise and backups are both automatic.

Step 4: Retest your TTFB in SpeedVitals and click through your pages to see the difference. You can also search their TrustPilot profile for people mentioning “TTFB” where they’re rated 4.9/5.

Kinsta to rocket. Net migrationMoved to rocket. Net vs sitegroundRocket. Net positive review

Rocket. Net facebook review 1Rocket. Net vs kinstaKinsta to rocket. Net ttfb redis

Namehero cloudways rocket. Net
I agree with this for the most part

I was previously on Cloudways Vultr HF which was great, but their Cloudflare Enterprise doesn’t use full page caching (yet) and is $5/mo with annoying challenge pages. Even if their Cloudflare Enterprise was identical, Rocket.net still outperforms them with better specs like more CPU/RAM, Brotli, and LiteSpeed’s PHP (plus better support, easier to use, and usually pricing). While Cloudways is a big improvement than most hosts, you’re already spending $18/mo for Vultr HF’s lowest 1 CPU plan with Cloudflare Enterprise. At that point, the extra $7/mo you’d be spending at Rocket.net is worth it. Rocket.net’s dashboard is also much easier.

For small sites on a budget, NameHero’s Turbo Cloud plan is similar to Hostinger between LiteSpeed, cPanel, and pricing. However, NameHero’s Turbo Cloud plan has about 1.5x more resources (3 CPU + 3GB RAM) with NVMe storage. NameHero’s support/uptimes are also better shown in TrustPilot reviews. This is one the fastest setups on a budget… you get a LiteSpeed server + LiteSpeed Cache + QUIC.cloud CDN, and email hosting. The main con is their data centers are only in the US and Netherlands. If these aren’t close to your visitors, make sure to setup QUIC.cloud’s CDN which has HTML caching (ideally the paid plan which uses all 70 PoPs).

Cpu cores on litespeed hosting plansLitespeed cache litespeed server

Ram on litespeed hosting plansNamehero vs siteground feedback

 

17. Optimize Plugins

Think plugins don’t slow down your mobile website too? Check your website’s Chrome Dev Tools coverage report and look for plugins (as well as other files) with heavy CSS/JavaScript.

Css javascript chrome dev tools

  • Avoid high CPU plugins: avoid this list of 75 slow plugins and use Query Monitor, WP Hive, and the Chrome Dev Tools coverage report to find your slowest plugins.
  • Replace high CPU plugins with faster plugins: research is required, but worth it.
  • Remove unused plugin tables in your database: use WP-Optimize to remove tables left behind by old plugins in your database. You might also find certain plugin features/modules adding lots of database overhead, so reconsider these.
  • Disable plugins on mobile: use Perfmatters to disable certain plugins on mobile.
Wp hive slow wordpress plugins
WP Hive lets you see a plugin’s impact on memory usage/PageSpeed in the WordPress plugin repo

 

18. Use PHP 8

PHP 8 handles more requests per second compared to older versions.

Php 8. 0

 

19. Optimize CSS/JavaScript

There are many items in PageSpeed Insights related to CSS/JavaScript (check your Chrome Dev Tools coverage report shown in step 17).

“Use lightweight themes/plugins” is a generic recommendation, but it’s so much easier to start at the source. You can defer/delay JavaScript, use critical CSS, and unload assets in Perfmatters.

Third-party code is another big one which can add lots of JavaScript code. Some third-party code can be hosted locally (fonts, analytics, YouTube thumbnails). Other third-party code can be delayed in your cache plugin, while CDN URLs and third-party fonts can use the preconnect resource hint. Videos can be lazy loaded, you can use local avatars for comments, and so forth.

View your recommendations and research how to fix it! I have lots of core web vitals tutorials.

Third party code

 

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 can 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?

Adaptive images, a cache plugin that better address core web vitals, and Optimole are 3 WordPress plugins that can improve mobile speed.

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.

Cheers,
Tom

You Might Also Like:

8 thoughts on “19 Ways To Improve Mobile Speed In WordPress For Better Scores In Web Vitals”

  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.

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

      Reply
  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

    Reply
  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?

    Reply

Leave a Comment