Quick answer: Phones usually load websites more slowly than desktops for three reasons: mobile networks have higher latency and less reliable bandwidth, phone processors take much longer to run JavaScript, and many sites send the same heavy images and scripts to phones as to large screens. To improve mobile page speed, measure on a real mid-range phone or with Google’s mobile tests, then cut image weight, reduce and delay JavaScript, limit third-party scripts, use caching and a CDN, and make sure the content at the top of the page loads first.
Why your site feels fast on your computer
Most site owners check their website on a fast office connection with a powerful laptop. That is the best case. Many of your visitors are on a phone, on a mobile network, sometimes with a weak signal, using a device that cost a fraction of a high-end model.
Google’s own testing tools assume this. PageSpeed Insights and Lighthouse run their mobile tests by simulating a mid-range phone on a slow 4G connection. A score that looks poor there is often a fair picture of what many real visitors experience.
The three main causes of slow mobile pages
1. Network latency
Bandwidth is how much data can flow at once. Latency is how long each request takes to make a round trip. Mobile networks often have reasonable bandwidth but much higher latency than broadband, especially when signal is weak or the network is busy.
Every file your page needs, whether a stylesheet, script, font or image, involves at least one round trip. A page that makes 100 requests pays that latency cost many times. Connection setup for HTTPS adds more round trips before the first byte arrives.
This is why reducing the number of requests and the number of different domains your page calls matters so much on mobile. HTTP/2 helps by sending many files over one connection. Our guide to HTTP/2 explains how.
2. Processing power
Downloading a file is only half the work. The phone then has to parse HTML and CSS, run JavaScript, calculate layouts and paint the screen. Phone processors are much slower than desktop processors at this work, and budget phones are slower still.
JavaScript is the biggest cost. A script that runs in a fraction of a second on a laptop can block a mid-range phone for several seconds, leaving the page visible but frozen. Lighthouse measures this as Time to Interactive: how long until the page responds reliably to taps.
3. Sending desktop-sized pages to phones
Many sites send the same 2,000-pixel hero image, the same slider scripts and the same set of tracking tags to every device. Responsive design changes the layout, but unless images and scripts are also adapted, the phone still downloads and processes everything.
How to measure mobile page speed
PageSpeed Insights
Google’s free tool shows two kinds of data:
- Field data from the Chrome User Experience Report, showing how real Chrome users experienced your pages, if your site has enough traffic.
- Lab data from a Lighthouse test run on a simulated mobile device.
Key lab metrics include First Contentful Paint (when the first text or image appears), Speed Index (how quickly the visible area fills in) and Time to Interactive. Look at the opportunities and diagnostics sections for specific fixes.
Chrome DevTools
In Chrome, the developer tools let you throttle the network and CPU to simulate a phone, and the Performance panel shows exactly which scripts take up time.
WebPageTest
WebPageTest lets you test on real mobile devices in different locations and shows a detailed waterfall of every request. It is very useful for spotting slow third-party scripts.
Test on a real phone
Borrow an older Android phone, switch off Wi-Fi and load your site. It is often more convincing than any score.
The fixes that matter most
Shrink and adapt images
Images are often the heaviest part of a page.
- Resize images to the size they are shown and serve smaller versions to phones using responsive image markup. WordPress does this automatically for images in content.
- Compress images well. Our guide to WordPress image optimization covers tools and settings.
- Use WebP where supported, with a fallback. See our WebP guide.
- Lazy load images below the first screen. See our lazy loading guide.
- Replace large background images and sliders on mobile with a single, smaller image.
Cut and delay JavaScript
- Remove plugins and features you do not need, especially sliders, animations and social widgets.
- Minify and combine where it helps. Our article on minifying CSS and JavaScript explains the trade-offs.
- Load scripts with
deferorasyncso they do not block the page from appearing. - Load scripts only on pages that need them. A contact form script does not need to run on every blog post.
- Be wary of heavy page builders and themes that load large script bundles on every page.
Limit third-party scripts
Chat widgets, ad tags, heatmaps, social embeds and multiple analytics tools each add requests and processing. Review them regularly and remove what you do not use. Our guide to third-party scripts and speed shows how to audit them.
Prioritise the top of the page
Make sure the content visible on the first screen can load without waiting for everything else. Inline the small amount of CSS needed for the top of the page, load the rest afterwards and avoid large web fonts blocking text. Use font-display: swap so text appears in a fallback font while custom fonts load.
Use caching and a CDN
- Page caching serves ready-made HTML instead of building each page on every visit. See our guide to website caching.
- Browser caching lets returning visitors reuse files.
- A CDN serves files from servers close to the visitor, reducing latency. Our Cloudflare for WordPress guide covers one popular option.
Improve server response time
If the server takes a long time to send the first byte, everything else waits. Good hosting, an up-to-date PHP version and caching all help.
Consider AMP carefully
Accelerated Mobile Pages can load very quickly from Google’s cache, but they add a second version of each page to maintain and limit design and features. Many sites get similar results by making their normal pages lighter. Our article on AMP pages weighs the pros and cons.
Why mobile speed matters for business
- Rankings: Google’s Speed Update made page speed a ranking factor for mobile searches in 2018, and Google now indexes most sites based on their mobile version. See our guide to mobile-first indexing.
- Visitors: people on phones are often in a hurry and leave slow pages.
- Conversions: slow forms and checkouts lose leads and sales. Our article on mobile conversion rate covers other mobile friction points.
FAQ
Why is my PageSpeed mobile score so much lower than desktop?
The mobile test simulates a slower network and a much slower processor. The same page has to work harder on a phone, so the score is lower.
Is a perfect score necessary?
No. Aim for a fast experience for real visitors, especially quick first content and a page that responds to taps promptly. Use the score as a guide to what to fix.
Will a faster theme fix everything?
A lightweight theme helps, but plugins, images and third-party scripts often matter just as much.
Does mobile speed affect WooCommerce stores more?
Stores tend to have heavier pages and more scripts, so they often have more to gain. See our guide to WooCommerce speed.
Build for the phone first
Mobile visitors are working with slower networks and less processing power, so every image, script and request costs more. Measure on realistic devices, cut what is not needed and load the important content first. If you want a site that loads fast on phones and turns those visits into enquiries, see our Turn visitors into customers service.
