How to improve your mobile PageSpeed score

It is very normal for mobile speeds to be slower, and the PageSpeed score lower, than desktop results. This guide will explain why, recommend which WP Rocket settings will have the most impact, and give you concrete steps to optimize your site further.

In this Article

Mobile conditions

  The conditions under which mobile devices are used are not always optimal:

  • The devices themselves have less processing power than a desktop
  • Internet connections may be slower and/or less reliable 
  • Depending on the location of your visitor, they may be paying a high cost for internet access and bandwidth

Everything simply takes longer on mobile. This means that any negative performance aspect which might not be very noticeable on desktop, will be very obvious on mobile devices.

In particular the PageSpeed mobile test is done on a slow 4G connection, on a very average device. So the conditions are likely worse than your users are actually experiencing in real life.

How can WP Rocket help

Make sure mobile caching is enabled in WP Rocket: 

Note: Mobile Cache is activated by default in new installations of WP Rocket 3.16. Learn more here: Changes for the Mobile cache option

This will apply caching and all of the file optimizations for mobile visitors. All the features of WP Rocket that help desktop speeds will help improve mobile performance as well. The following may have additional impact for mobile:

Preload Fonts

Remove Unused CSS

Render blocking resources

Enable:

Remove Unused JavaScript, Minimize main-thread work, Reduce JavaScript execution time

Defer offscreen images

Additional optimizations

All web performance best practices apply on mobile devices just as they do on desktop, but will have even more impact.

Mobile pages have to be as light as possible to score highly, so you have to be very selective in deciding which features you actually should include on the mobile version of your site. 

It’s important to understand that there will be a trade-off between having a lot of rich interactive features, and having a fast site. You have to try to find a balance.

There are a few things that you should pay extra attention to for the mobile version of your site:

Remove / Delay JavaScript

Too many slow scripts will really hurt your site’s mobile performance. 

Removing and delaying JavaScript are the most important things here. 

  • Run a PageSpeed test while bypassing WP Rocket: add ?nowprocket to your URL (e.g. https://example.org?nowprocket)
  • Check the Reduce JavaScript Execution time Diagnostic to find the worst scripts. 
  • Evaluate if you need these features at all, or at least on every page of your site. 
  • If possible remove the feature/plugin. 
  • Or, selectively load it only on crucial pages using the Asset CleanUp plugin
  • If you keep the script, try to delay it
  • If it can’t be delayed, move it lower on your page so it doesn’t slow down the initial view of the page. For example, if you have a slider on your site, consider loading it in the middle of the page and not at the top.

Reduce Page size

Reducing the network payload is important for mobile.  Aim for less than 1MB for your mobile pages. 

  • Consider replacing interactive elements like sliders with a static image instead. 
  • Reduce the amount of content, like featured posts/products on the page.
  • Reduce the number of different font faces being used
  • Make sure images are sized correctly and optimized
  • Break very long pages into multiple smaller ones
  • On your blog homepage, display post excerpts instead of full posts

Remove/reduce 3rd party content

Both processing power and screen real estate are scarce on mobile. Don’t take up space and data with social widgets, popups, notification requests etc that are likely rarely used. All of these get in the way between your visitor and your content and they add to the page size and loading time. 

Content from 3rd parties, that is, external domains that you don’t control, usually loads slower and can be unreliable. Please see our guide: Handling external resources

  • Run a PageSpeed test while bypassing WP Rocket: add ?nowprocket to your URL (e.g. https://example.org?nowprocket)
  • Look for this recommendation: Reduce the impact of third-party code and address the worst offenders there. 
  • You will likely find that it’s JavaScript from 3rd parties that is especially problematic, so you can use the same tips described above to mitigate that.
  • Reduce the number of ads on your mobile site and don’t place them at the top of the page
  • Remove unnecessary social widgets like Instagram / Facebook / Twitter feeds
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.