8 best practices to make your mobile site faster

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:

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.

What’s a Good Mobile Page Load Time?

Google recommends the following as best practice for mobile pages:

Less than 500 KB: The total size of a mobile webpage, measured in bytes.

Google's recommendation for mobile pages

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.

Google’s Test your mobile speed page

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 an industry comparison. It will also tell you how much you could reduce your loading time by applying a few fixes.

Google Test My Mobile Site results

The site offers a free report, which you can use to help diagnose any issues. It recommends making optimizations across three general areas:

  1. Reduce page weight,
  2. Reduce number of requests,
  3. Make a quick first impression.

So let’s take a look at the three categories in more details, along with specific fixes.

How to Make Your Mobile Site Faster

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.

Google Analytics Site Content for Mobile

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:

  1. 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 forward to lazy load your images. You can enable this feature in WP Rocket.

  1. 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.

  1. 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.”

Minimize CSS files with WP Rocket

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:

  1. 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.

Cache for mobile pages 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.

  1. 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.

Optimize CSS Delivery with WP Rocket

When you enable “Load JavaScript deferred,” your JavaScript files, including any that have been minified, will be loaded using the defer attribute:

Deferred Files have a 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:

Load JavaScript File 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.

  1. 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:

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.

Varvy Redirect Mapper Tool

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:

  1. 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 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 11 Critical Website Performance Metrics Worth Monitoring.

  1. 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, it will also provide a better user experience for your site visitors.

In addition to what’s mentioned above, I’d also recommend upgrading to PHP 7+ for an immediate speed boost (both PHP 5.6 and PHP 7.0 reach end of life this month!), and also exploring prebrowsing techniques that could further improve the user experience of your mobile site.

Author's avatar

Raelene Morey is the Co-Founder of Words By Birds, a digital writing agency that helps busy WordPress with writing articles, content strategies, lead magnets and other word-related things. A former journalist and editor, Raelene has been developing WordPress sites for over 10 years.

2 comments
Hello, thanks for helpful post. I'll try it. Now, I think about plugins for titles and descriptions. I usually use Yoast SEO, but there is The SEO Framework - my friend told me, that is faster than Yoast. Did you try compare this two plugins in combination with WP Rocket. I used WP rocket and Yoast SEO, but I need to speed up the website.Thanks for reply.
    Hi Petr, thanks for the input. We could definitely work on some content about this :) Have a good day!
Add a comment
Your email address will not be published. All fields are required. Comment policy: We love comments and appreciate the time that readers spend to shader ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

Get a Faster Website in a Few Clicks

Setup Takes 3 Minutes Flat

Get WP Rocket Now What are you waiting for?

{"cart_token":"","hash":"","cart_data":""}