If you’ve ever run a PageSpeed or other speed test for the mobile version of your site, you’ve undoubtedly been horrified by the low speed and score compared to the desktop version of your site.
In this post I’ll explain:
- Why mobile performance is typically worse
- The primary cause of slow mobile pages
- How to create mobile-specific versions of your pages
- How to remove unnecessary files from your mobile pages
Optimizing for mobile does take a bit of extra effort since site owners are usually “retrofitting” their sites for mobile performance.
If you are starting a new site, it will be easier if you consider mobile performance from the start, and make it a priority.
Table of Contents
Why is my website slow on mobile?
First, rest assured that this is totally normal!
Mobile speeds and scores will be worse than desktop by default because:
- Google’s PageSpeed tool uses a slow 3G connection to run the test. This is very different than fast 4G or wi-fi. Slower connection speeds = slower loading experience
- Mobile devices generally have less processing power than a desktop computer, so it takes longer to process all the code on your page. Google uses a mid-range device for testing, which is slower than the fancy iPhone you might have.
Making a site fast under optimal conditions is very different than optimizing for poor conditions, like those of a PageSpeed mobile test. It takes extra work if you want to properly optimize your mobile site.
What site owners do wrong
Many site owners build their sites with desktop visitors in mind. They load their pages up with rich and resource-intensive content, like sliders etc.
These features may work OK on a desktop. But with the mobile limitations described above in mind, you can’t push that same content over a slow connection to a limited device and expect the same performance.
As Google continues to move toward mobile-first indexing, we have to build our sites accordingly. That means making sure the mobile experience is just as good as, or better than desktop.
We’ll need to make a mental shift to designing for mobile visitors first. Make the mobile version of your site as fast as possible and add the bells and whistles only for desktop visitors.
You might be costing your visitors time and money
Always keep in mind that not everyone has access to cheap internet and they may be paying a lot for bandwidth. So when you’re shoving a complicated 5MB page at them, not only are they suffering from a poor user experience because the page is slow and unresponsive, but you are literally making them pay money for this!
What slows down a mobile page?
I encourage you to read my guide about all the ways we, as site owners, slow down our pages. All the same things that slow down a page for desktop visitors, will slow down a mobile page, but the impact will be amplified on mobile.
- Chat boxes
- Widgets with social feeds (e.g. displaying Instagram pics)
- Animations and other effects
- Parallax effects
If most of the content isn’t visible, or if the layout is broken, you’ve got problems.
How do I speed up my WordPress mobile site?
First you have to figure out what’s causing the most problems.
PageSpeed tells you which plugins are the bottleneck
When you run the report, pay special attention to these sections:
- Reduce the impact of third-party code
Expand them and you will find some of the biggest bottlenecks to performance.
Third party culprits are typically easy to identify by the domain. When the file lives on your own domain, mouse over it to see which plugin is loading it.
The best optimization technique is removal 🙂
So the first thing you have to do is audit all those features – do your mobile visitors really need them?
Another way to think about it is, can you afford them from a performance point of view?
There is going to be a trade-off so you have to decide if the benefit of the feature outweighs the impact it has on the speed.
If you decide it’s not crucial for your mobile visitors but ok for desktop visitors then you would ideally create a mobile-specific version of your pages.
How to create a different homepage for mobile visitors on your WordPress site
There are a range of plugins which allow you to create a separate version of your whole site for mobile, with a different theme etc.
But some pages on your site won’t need a mobile-specific version if they are not as resource intensive.
However, many sites that I see have a big problem with the homepage. That tends to get loaded up with sliders, tons of featured content etc.
So you may only need to create a lightweight version of one or two pages, not all of them.
Mobile Pages Plugin
The Mobile Pages plugin by Pootlepress lets you easily create a mobile-specific version of any page on your site.
The plugin will work best on sites built with Gutenberg. Some page builders probably won’t be compatible here, although many offer their own ways to create mobile-specific content.
To use the Mobile Pages plugin:
- Add a new block in your page
- Search for the Gutenberg Mobile block
- Click the Import Page Content button – this brings your existing content into the Gutenberg Mobile block.
- Now your page content has been divided between desktop and mobile and you can create a separate version just for mobile.
Keep the mobile content really simple and don’t load it up the same way you do your desktop version.
If you use a caching plugin make sure it can create a separate mobile version of the cache, otherwise the wrong version of the page could show up.
Remove unneeded files on mobile with Asset CleanUp Pro
Having created mobile-specific content, you may also want to go a step further and remove any unnecessary CSS and JS files from being loaded on mobile devices.
The Pro version of Asset CleanUp will let you control which files load according to media queries. That means you decide for which screen sizes the file should load. So if you don’t want it on the mobile version of your site, you would use something like this:
only screen and (min-width: 540px)
That means the file will only load when the screen size is at least 540px, therefore excluding mobile phones.
You can use a site like this one to find the screen sizes of common devices so you can choose your media query.
As a proof of concept, I made a test page with a slider at the top, then some text followed by a YouTube video. I have caching activated but no other optimizations. This page, with the same content for both, scores between 4 – 9 on mobile and around 55 on desktop (scores can vary slightly on each test).
Using the Mobile Pages plugin, I created a mobile version of the page where I replaced the slider with a single, static image.
And using Asset CleanUp Pro I removed the related files from the slider for mobile and a couple of other plugin files not needed for the page.
The mobile score went up to 22 – 28 just with those changes.
Of course, 22 is still pretty bad, but this is also before I’ve further optimized the page with all the usual techniques like LazyLoad, minification etc.
Just this simple change in content gained 18-24 points.
|Original content||Mobile-specific content|
|Minimize main-thread work||7.3s||4.9s|
|Reduce JS execution time||5.3s||3.4s|
|Time to interactive||20.5s||11.9s|
You can do this with a plugin like WP Rocket or with Flying Scripts.
Fundamental optimizations still apply
All the other standard optimizations like GZIP compression, minification, LazyLoad etc apply for mobile just as they will for desktop.
But if you really want to have a great performing mobile page, you will have to optimize the content too.
With both mobile-first indexing and Core Web Vitals becoming reality, now is the time to start working on the mobile performance of your site. Make it a priority, not an afterthought!