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.
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.
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.
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 details, along with specific fixes.
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.
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.
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.”