Table of Contents
Last update on
Last Update: August 2019
I recently got an email from Google informing me that mobile-first indexing had been enabled for my website. After initially panicking (“Gah! My traffic is going to drop!”), it prompted me to do three things:
- Open my site on my iPhone to double-check everything was loading fine (it was);
- Check Google Analytics for a breakdown of desktop versus mobile users; and
- Run my site through GTmetrix with 3G enabled.
The results were okay… My site loaded in 6 seconds. Not fast, not slow, and not “just right” since Google recommends that mobile pages load in under 3 seconds as best practice.
Do you know how fast the mobile version of your site loads?
According to Google, more than half of all web traffic comes from mobile devices, yet, on average, it takes about 15 seconds for mobile sites to load. It’s far too slow when you consider that 53% of mobile site visits will leave a page that takes longer than 3 seconds to load.
So in this post, we’ll look at Google’s recommended page load times for mobile, along with best practice techniques to help you speed up your mobile site on WordPress.
What’s a Good Mobile Page Load Time?
Google recommends the following as best practice for mobile pages:
- Under 3 seconds: How quickly the mobile page displays content to users.
- Under 1.3 seconds: How fast and responsive a mobile web server is (i.e. time to first byte).
- Fewer than 50: The number of individual pieces of content needed to display the entire mobile page.
Less than 500 KB: The total size of a mobile webpage, measured in bytes.
How Fast Does Your Mobile Site Load?
First thing’s first: let’s find out how fast your site is.
Go to Think With Google’s Test your mobile speed page and enter your URL to scan your site.
The test will analyze your site using a standard 3G connection and check your HTML and CSS, JavaScript, compression, usability on mobile, and also compare your mobile page speed to other sites in your industry.
Once the scan is done, you’ll see your mobile page loading time, estimated visitor loss, and industry comparison. It will also tell you how much you could reduce your loading time by applying a few fixes.
The site offers a free report, which you can use to help diagnose any issues. It recommends making optimizations across three general areas:
- Reduce page weight,
- Reduce number of requests,
- Make a quick first impression.
So let’s take a look at the three categories in more detail, along with specific fixes.
How to Make Your Mobile Site Faster on WordPress
Before we dive into the fixes below, open your site on your mobile device and tap around. What do you think of your own mobile experience? Is it enjoyable? Or maybe cumbersome?
Often, responsive design isn’t enough. All it does is move your content around for smaller screens without taking into account that mobile users usually have different needs to desktop users.
For example, say you run a restaurant website. Mobile users probably want to see your menu and opening hours, and maybe make a reservation. Similarly, depending on your industry, you might want to think about what content you need to display on mobile devices, rather than just displaying everything.
To help you make an informed decision, use Google Analytics to find out which pages your mobile visitors are visiting. To do this, go to Behavior > Site Content > All Pages and then click on “Add Segment.” Select “Mobile Traffic” and click “Apply.” The page will refresh to display your top pages together with their mobile traffic.
1. Reduce Page Weight
We’ve looked at how to reduce page weight on the WP Rocket blog before and I recommend reading this guide to make your site as lean as possible. After all, the leaner your site is, the less there is to load and the faster your page speed will be.
Google recommends the following three fixes for reducing page weight:
Compress Images
Images usually take the longest to load on most web pages but are relatively easy to optimize.
Start by taking the time to review the images on your site and remove any that you don’t need. Then compress them with an image optimization plugin like Imagify. This handy tool will scan your site’s images and reduce their total size without any noticeable loss in quality.
For visually simplistic images such as logos, consider using SVG. SVG images are smaller in size than raster images because their dimensions are defined by mathematical calculations and not by millions of pixels.
This means they carry a lot of information in a relatively small file size format. To further reduce the file size of an SVG image, use a tool like SVG-Optimizer.
Don’t forget to lazy load your images. You can enable this feature in WP Rocket.
Compress Resources with GZIP
GZIP compression is a popular method for speeding up WordPress. When enabled on your site, it can reduce the total size of your pages and improve the time to first paint.
This ensures your content is delivered to your visitors faster and reduces their data usage.
Check out What is GZIP Compression for WordPress? for a comprehensive guide to GZIP compression and how you can enable it on your site.
Minify resources
Every HTML, CSS and JavaScript file on your site adds to the numbers of HTTP requests it takes to load your pages. By combining and minifying these files, you can reduce the overall number of files that need to be loaded and also reduce the total file size of your site.
Minification refers to the removal of any unnecessary characters in your files, such as comments, formatting, white space, and new files, which aren’t required for the code to execute.
Combining files means merging two or more CSS files into one file, and doing the same for HTML and JavaScript files. This can help reduce the number of HTTP requests needed to load your site by streamlining your files.
With WP Rocket, you can minify and combine your files under the “File Optimization” tab. Check the file types that you can to minify and combine and then hit “Save Changes.”
Note: If you’re using HTTP/2, it means that several requests can happen at the same time and combining files will have less of an impact on your mobile page loading time.
2. Reduce Number of Requests
The second category of fixes Google recommends relates to reducing the number of HTTP requests for your site. Google recommends the following three fixes for reducing requests:
Leverage Browser Caching
If visitors to your site are using browsers that can cache static files, they won’t necessarily need to download your site’s static content the next time they visit. To help this process, make sure you enable browser caching for your mobile site in WP Rocket.
Browser caching is automatically applied for Apache servers, so there’s no need for users to carry out any extra steps. But if you’re using NGINX, you can use Rocket-Nginx, an NGINX configuration that makes WP Rocket even faster by serving static pages directly without loading WordPress or PHP.
Eliminate Render-Blocking JavaScript and CSS in Above-the-Fold Content
If you’ve ever run your site through Google PageSpeed Insights, you’re no doubt familiar with this recommendation.
Essentially, it means there are JavaScript and/or CSS files that are preventing your page from loading quickly because the browser has to stop each time it encounters these files, download them, and fully load them before proceeding to load the rest of the content on your site.
To ensure your CSS and scripts load quickly you can optimize CSS delivery and defer the loading of JavaScript files in WP Rocket.
When you enable the “Optimize CSS delivery” setting, critical CSS will be generated for your site in the background and added upon the next page load. After that, CSS will be loaded asynchronously on your site.
When you enable “Load JavaScript deferred,” your JavaScript files, including any that have been minified, will be loaded using the defer attribute:
If you run into any issues on your site after activating this setting, you may need to enable “Safe Mode”, which excludes jQuery from being deferred:
When you enable this option, all the JavaScript files on your page, including those minified by WP Rocket, will be loaded with the defer attribute.
Avoid Landing Page Redirects
When you have redirects on your site, they trigger an additional HTTP request-response cycle and delay page rendering.
Basically, when you click a link, the server provides content for the page found at that link. But when there’s a redirect, there’s no document at the link, so the server has to go to the page where the document lives and retrieve it.
This process has to happen for each file on a page, which means every image, CSS file and script has to go through the redirect.
Here are some examples of redirect patterns:
- example.com uses responsive web design, no redirects are needed = fast and optimal!
- example.com → m.example.com/home = multi-roundtrip penalty for mobile users.
- example.com → www.example.com → m.example.com = very slow mobile experience.
Varvy’s Redirect Mapper can help you see how many redirects you have for any given page on your site. Once you’ve worked out what redirects are in place on your page, you can trace them back and change any that aren’t necessary.
3. Make a Quick First Impression
You want to start displaying content as quickly as possible because the faster your pages load, the less likely visitors will bounce—and the less likely they will get distracted and close the page, or think the slow loading of your page is because it’s broken.
Google recommends these steps for making a quick first impression:
Load Visible Content Before CSS and JavaScript Files
Visible content refers to the portion of the page that users see on their screen before they start scrolling, aka “above-the-fold.”
Google’s RAIL Performance Model recommends delivering the first meaningful paint in 1 second and achieving time to interactive in under 5 seconds.
To achieve this, focus on optimizing the critical rendering path for your site to unblock rendering and use idle time to your advantage. Google recommends pages should load and be interactive in 5 seconds or less on mid-range mobile devices using slow 3G connections. For subsequent loads, aim for 2 seconds or less.
For more on metrics such as first meaningful paint and time to interactive, check out our post on Critical Website Performance Metrics Worth Monitoring.
Reduce Server Response Time
As I covered on the WP Rocket blog recently, time to first byte—aka TTFB—is a measurement used as an indication of the responsiveness of a web server or other network resource.
Google recommends a TTFB under 200ms to ensure your site visitors spend less time waiting for pages to start loading, improving the user experience.
I’d encourage you to read How to Reduce Time to First Byte and Load Your WordPress Site Faster for more on TTFB and how you can reduce if for your site.
Wrapping Up
After implementing each of the fixes above, you should be able to reduce the loading time of your site by several seconds. Not only will this improve your SEO, but it will also provide a better user experience for your site visitors.
Don’t forget that user experience and SEO are getting even closer with the Core Web Vitals rolling out as part of a new ranking factor. By making your mobile site faster, you’ll optimize the three metrics: LCP, FID, and CLS.
In addition to what’s mentioned above, I’d also recommend upgrading to PHP 7+ for an immediate speed boost and also exploring prebrowsing techniques that could further improve the user experience of your mobile site.
