If you want to keep mobile page speed issues from standing in the way of attracting visitors and turning them into avid customers, use the following methods to improve your mobile loading times ASAP.
How to improve your mobile page speed in 10 steps or less
If you want to keep:
- Mobile click-through rates in search results high…
- Mobile website bounce rates low…
- Mobile conversion rates always on the up and up…
Then, mobile page speed isn’t something to take lightly.
Here are the steps to take in order to improve page loading times on mobile:
Step 1: Choose fast web hosting
It won’t matter how much work you do to improve your mobile page speed if you have unreliable web hosting sitting behind it.
To be fair, you can’t totally blame a web hosting company if its servers take too long to process and serve your website to mobile visitors. It’s up to you to research the provider, its infrastructure, and make sure you’ve chosen a plan that will help speed up loading times on your website.
Here are some things to think about:
Where are the web host’s servers located?
If there aren’t enough servers near you or your target audience, loading times will lag.
A good idea is to look for hosts that offer top service in your country or area. Here are some good places to start:
If you’ve already purchased a web hosting plan and you’re unhappy with where the servers are located, you can always supplement your hosting with a CDN. One of these leading CDN providers can help close the physical gap between your website and its visitors.
You should also think about using a CDN on top of your web hosting if your website will serve a global audience.
Does the web host offer niche hosting?
For instance, if you’re building a WordPress website, then it would be a good idea to research the best WordPress hosts that have servers optimized for the CMS.
The same goes for eCommerce websites, which need more processing power as inventories and traffic grow larger. Top eCommerce hosting solutions will ensure that mobile traffic and transactions can be processed quickly.
Did you purchase managed hosting?
With managed WordPress hosting, you not only benefit from working with a provider that knows your CMS inside and out, but you also get help maintaining your website.
Website maintenance is an important part of the upkeep of a website and is really useful for maintaining healthy website loading times. If you can outsource some of this to a managed host, it’ll be less you have to worry about.
If you don’t end up going with managed hosting, though, don’t sweat it. We have tips below that’ll show you how to do these performance optimizations on your own.
Is the web host known for technology stacks optimized for mobile page speed?
Another thing to look at is the host’s technology stack.
- Do they use NGINX?
- Are the servers equipped with caching?
- Are CDN upgrades available?
- Do servers run on the latest versions of software?
There are a variety of ways to make servers run fast, so it’s important to look for these speed-ups before signing up for a plan. If you want some help narrowing down your choices, start with these fast WordPress hosts.
Is your hosting plan scalable?
One last thing to think about is the scalability of your hosting plan.
If you can really wow mobile visitors straight out the gate, you can expect traffic numbers to increase rapidly. So, having a web host that can scale server resources alongside that traffic is critical.
The following hosting companies have been known for their scalable offers: Kinsta, Cloudways, WP Engine, InMotion Hosting.
Step 2: Update to the latest version of PHP
PHP is the open-source scripting language we use to form the backbone of a WordPress website and its functions. It doesn’t matter if you do any hands-on coding with PHP, it always exists at the server level and can have an impact on mobile page speed if it’s not updated.
This benchmarking study from Cloudways explains the importance of using the latest version of PHP:
Notice how many more HTTP requests can simultaneously be processed per second with the latest versions of PHP.
Now, when you set up a WordPress website for the first time, your web host should automatically select the latest version of PHP. But unless you have managed PHP updates enabled, this is something you’ll have to keep tabs on.
Luckily enough, it’s easy to update PHP on your own.
Log into your web hosting account
Every host’s control panel is organized differently, so what you see here won’t be identical to what you see on your end.
That said, all you need to do is locate the PHP manager, like in this example from SiteGround:
Review the current PHP version
Look for the current PHP version used.
In the example above, SiteGround automatically updates the server to the latest version, but still lets users know which version is being used.
If you need to make any changes, open the list of available PHP versions and select the one you want to use:
⚠️ Remember to back up your site before going through with any upgrades of your server software.
Step 3: Implement caching at all levels
As users, we’re familiar with caching at the browser level. It’s usually when we can’t see updated content on a web page that we turn to these settings:
This enables users to delete the stored copy of the site from their browser so that the latest version will appear the next time they visit it.
There are huge performance benefits to using caching on a website. Obviously, we don’t want outdated information getting “stuck” in the browser, but we do want to keep servers from having to re-process the same page over and over again.
By enabling caching and creating static copies of pages that are unchanged, servers work much more efficiently.
You can use two resources to enable caching.
Enable server caching (benefits both desktop and mobile page speed)
This isn’t something you should have to manage. As mentioned earlier, a web host that takes performance seriously will have server caching built into your web hosting plan.
To make sure you have all the server-side caching that you need, look it up in your hosting control panel. Like PHP, it should be easy to find:
If you feel like you need to upgrade your caching (if available), you can do so here.
Enable website, database, and object caching
Using a WordPress caching plugin, you’ll be able to activate all of the other caching you need.
I’ll use WP Fastest Cache as the example here.
With this plugin, you can quickly enable or disable a caching system:
This makes it so you don’t have to get bogged down in which kinds of caching you want to enable (e.g. website, browser, database, opcode, memcache, etc.)
In addition, caching plugins such as this one usually give you other speed-up settings (which we’ll address in the next tip).
Upgrading gives you additional performance optimization features, too, like image optimization, CDN configuration, and mobile caching.
Step 4: Optimize the way your code and resources are handled
It isn’t just your website and the content on it that slow down how quickly your mobile pages load. The code and files behind it can cause issues, too.
Let’s take a closer look at the bottom half of WP Fastest Cache’s settings:
You should definitely take advantage of these performance optimizations and here’s why:
When developers write code, they often do so in a way that makes it human-readable with extra spaces, comments, and other formatting. But all they do for your server is give it extra characters to process.
According to HTTP Archive, servers process an average of 69 HTTP requests (i.e. files) for every mobile page. To make this process more efficient, you should combine files when possible.
You’re familiar with .zip files and why we use them to deliver large quantities of files as well as to reduce the size of bigger ones. Gzip compression works similarly, but at the server level.
Gzip compresses your HTML and style sheets. Again, cutting down on the number and size of files your server has to deal with.
Eliminate render-blocking resources
In many cases, this is a premium feature in caching plugins. That said, it’s an important one to use as you’ll see from this Google PageSpeed Insights report:
Of all the issues this mobile site has with performance, the biggest problem is render-blocking resources.
But by enabling this performance optimization feature, you can defer the non-critical code to load afterwards and allow your above-the-fold content and data to appear much more quickly.
Step 5: Clean up your database files
Think of your WordPress database like a file folder (like the one you keep on your desk or on your computer). You store your important information in a dedicated and secure location because you think: “I’ll need that someday.”
But then you get around to cleaning up your workspace and realize how many of those documents you didn’t need to hold onto. Plugins are uninstalled, but leave files behind. Blog post revisions are saved, even though you’ll never need the seventh version again. Spam comments stack up.
Needless to say, there are many ways your database can be overrun by old and unnecessary files and data.
You could comb through the database yourself, but that’s a time-consuming task that can easily be offloaded to a database optimization plugin.
The WordPress Codex recommends WP-Optimize for this task. Just be mindful that this plugin does a number of other things, including caching and image optimization.
There are other plugins that handle these tasks more efficiently and completely, so there’s no need to activate them with this plugin. Just focus on the database optimizations provided:
This list of optimizations will actually tell you when there are spots in your database that need cleaning — like the “51 post revisions in your database”. So long as you know that those older versions aren’t needed, you can go ahead and “Run optimization”.
WP-Optimize now offers scheduled cleanup, so be sure to give that a go so your database will automatically be cleaned on a regular basis:
These might seem like simple things, but it’s easy to lose sight of all the files that get tucked away in your WordPress database. But anything you can do to reduce the number of files your server has to look at, the better.
Step 6: Get a lean design
It’s easy getting swept up in the latest web design trends telling you to use certain elements or functionality to boost engagement and conversions. But if you look at a lot of these design components, they were built with the larger desktop screen in mind.
Take, for instance, the pop-up. While it was a great way to grab user attention at just the right moment on desktop, a modal pop-up can be really intrusive on a mobile screen.
That’s why Google enforced a penalty on mobile pop-ups a few years back. So, when designing a mobile website (or any website, really), include only what’s necessary.
Use a lightweight and responsive WordPress theme
Many WordPress themes come with extra features these days:
- Pre-installed plugin packages
- Pre-built widgets, blocks, and other page templates
- Images and videos automatically installed when you import a demo
- Custom font packages
- And more
But just because these elements are present, that doesn’t automatically make a theme load slowly. It’s all a matter of how well those features have been implemented.
That’s why choosing a WordPress theme can often feel like a game of Russian roulette, especially if you have to pay for it and take the time to configure it to find out how fast it really is.
What you can do instead is use the data available to find a WordPress theme that is lightweight at its core.
CodeinWP conducted speed tests of popular WordPress themes and presented some useful findings. The post shows the loading times of some popular themes so that you can decide for yourself which one you want to use (since no one theme can serve everyone).
Three seconds seems to be the threshold for testing mobile users’ patience, so stick to themes that loaded more quickly.
Keep resource-hogging elements to a minimum
Another good thing about starting your website with a lightweight theme is that these themes generally encourage design best practices.
You won’t see data-hogging or distracting elements like live chat widgets, pop-ups, or auto-rotating carousels. Instead, you can focus on enhancing what’s there in terms of design, images, and messaging.
The only thing you may want to be cautious of is the number of images and videos included in your theme.
Just because there’s a placeholder for an image banner with an inspirational quote or the template comes with a background video, doesn’t mean you need to use every single one of those elements. If you don’t have something worth sharing within the given space, don’t force it. And here’s why:
According to HTTP Archive, images are one of the biggest stressors on web servers:
- Of the total 1791.9 KB of a mobile site, images usually take up 879.5 KB of it.
- Of the 69 HTTP requests that a server has to deal with, images are responsible for 27 of them.
So, only use the images (and videos) you need. Not only will this bootstrapping approach enable you to build a lean mobile design, but it’ll help you keep the length of mobile pages on the shorter side. As it takes more swipes to get to the bottom of a mobile page than desktop, this is an important consideration to keep in mind.
Remember mobile user intent
Another thing you can do to keep mobile designs leaner is to build your website around mobile user intent.
Google’s micro-moments are the perfect example of how and why you should do this.
Basically, what Google says is this:
Consumer behavior is changing, thanks to the growing usage of mobile devices. So, they’re not searching for brands, experiences, or products the way they used to nor are they engaging with websites the same way as before.
Mobile users, in particular, are searching for information and websites based on the following four “moments”:
Knowing this, you should really think about how you can serve that information to mobile users right away. For example, rather than hide a “Reservation” button or scheduling widget deeper down the homepage or on its own page, put a button for it above-the-fold (or, better yet, in the header).
This kind of micro-moment-focused design will certainly improve the mobile user experience, but think about what it’ll do for your mobile page speed as well.
If you can more quickly get mobile visitors the answers they need or direct them to the actions they want to take, they’ll spend less time trying to figure it out on their own. This will minimize their need to use your website’s search bar, scroll through every page, or sift through the menu.
Time-on-site might be shorter, but your conversion rates should be higher and your server much more capable of handling each new request.
Step 7: Make images as lightweight as possible
As we’ve already seen, images tend to take up a lot of space on a web server (about half of the weight of a mobile site comes from them).
Since mobile websites already load more slowly than their desktop counterparts, it’s critical to make your images be as light as they possibly can be before using them on your WordPress site.
There are a number of things you can do to make this happen:
Use WebP and next-gen JPG when possible
Whether you’re downloading images from stock photo websites or you’re using your own, you might not be giving much thought to the file format you save them in. However, image formats can have a significant impact on a mobile website.
Take, for instance, this PageSpeed Insights test:
The desktop version of the site scored a 97 out of 100 and had barely any recommendations from Google on how to speed things up. The mobile version, on the other hand, only scored a 75 out of 100 and the above suggestion was presented as a way to get loading speeds down.
According to Google, the following three image formats can improve mobile page speed:
There’s just one problem with this:
WordPress doesn’t accept these formats out of the box. In order to use these lightweight, next-gen image formats, you’ll need the help of a plugin. Thankfully, there are a number of image optimization plugins that can help with this.
Run all images through a WordPress image optimization plugin
There are two things you can do to manipulate an image file and make it lighter in size:
- Resize it.
- Compress it.
Now, there are plenty of free tools you can use online to do this. However, when you’re working on designing a website — an already time-consuming task — the last thing you want is to introduce another tool and chore to your workflow.
Instead, what you can do is install one of the popular WordPress image optimization plugins and automate the process so it’s one last thing you have to worry about.
For instance, this is how you would set-it-and-forget-it with Optimole.
First, you’d apply image compression at a quality you’re comfortable with (as close to “High” is best):
Then, you’d set a maximum image size so that oversized images don’t get a chance to weigh down your site:
You can also apply lazy loading, so that images further down on the page only load when a visitor scrolls to them:
This’ll help conserve server resources for when they’re actually needed.
Optimole will also serve WebP images to compatible browsers automatically. So that’s one less thing to think about as well.
Want help getting started? Use this step-by-step guide to image optimization to walk you through the process.
Step 8: Use only the plugins you need
It’s not necessarily the quantity of WordPress plugins that can cause issues with mobile page speed. But poorly coded plugins can lead to performance issues as can ones that chew up a lot of data (like ones that use live tracking or regularly call on your database).
So, you have to be very mindful of which plugins you install.
While there are essential plugins (most) websites should use, there’s no golden rule about the perfect number of plugins. The kind of website you build will dictate that. However, there are a couple of things you should look for when trying to figure out: “Do I really need this plugin?”
Reviews left by users in the WordPress plugin repository are useful in vetting the quality of a plugin.
But it’s not just “broke my site” or “doesn’t work” that you should be looking for to rule out a plugin.
Look for keywords like “fast”, “slow”, and “lightweight” as you read the reviews. See enough of them within the last year that claim issues with mobile page speed and you should move onto the next plugin immediately.
Check with your web hosting company
Most web hosting companies have a list of banned, blacklisted, or disavowed plugins they don’t want their customers using. Just do a search for your host’s name plus “banned plugins” and you’ll find the list.
There are a number of reasons why a plugin might be banned. Performance is one of the most common ones though.
Let’s use HostGator’s disallowed plugins as an example:
Here you’ll find plugins that:
- Have duplicate functionality as the web host.
- Overdo it with calling on the database or external APIs.
- Are poorly coded or no longer supported and don’t work well.
- Are overloaded with features users don’t really need.
So, if you’re unsure of where to start trimming the fat from your WordPress plugin list, check your host’s banned plugins list. It’ll give you some tips for paring back.
Step 9: Decrease the number and size of font files
Over time, the size of our font files have grown much larger on mobile websites.
According to HTTP Archive, the average size of fonts on mobile:
- Was 75.2 KB in 2017.
- Is 104.2 KB in 2020.
Granted, we have bigger fish to fry when it comes to minimizing how much weight we add to a site, but reducing the number and size of your font files could still be helpful.
Use fewer fonts
There was a time not too long ago when designers were having a lot of fun with decorative fonts and layouts. But as more users flock to the web on mobile devices, we’ve had to scale back when it comes to font design.
It’s impractical to use oversized fonts or irregular layouts when there’s much less screen to work with.
More than just paring back the decorative nature of mobile text, it’s also important to keep font variations minimized too. Really, there should be no more than two font types used on a website — one for header text and one for the body. This allows for a much easier and consistent reading experience across the site.
Pick fast fonts
A couple years back, KeyCDN did a case study on the fastest fonts.
However, the test wasn’t as simple as “Which Google fonts load the quickest?” If that were the case, these would be the results:
But these are web fonts that run through the Google API and CDN. When the fastest web font (Open Sans) was compared to the fastest web-safe font (Arial), this is what they got:
It’s similar to other performance issues our websites face. The more layers you force your data and resources to go through, the longer it’s going to take your web server to process them.
So, as far as web fonts are concerned, try to host fonts locally (on your own CDN) when possible. If you can find a web-safe font you like, go with that. And if all else fails, one of the top 10 fastest Google web fonts will work.
Compress your font files
If we’re talking about font formats, WOFF or WOFF2 are going to be your best bet. For starters, they’re the most widely accepted font format across browsers:
The only current browser that doesn’t accept it is Opera Mini (in purple above).
In addition to widespread acceptance, WOFF automatically comes compressed. According to Google, WOFF2 file sizes can be up to 30% smaller than other font formats.
This isn’t just a Google suggestion either. The W3C recommends that websites use the WOFF 2.0 font format because of its compression efficiency.
Step 10: Convert your mobile website to faster formats
There are two website and web page formats that have been introduced to help us better deal with slow-loading times on mobile.
Both have been covered extensively on this blog, so I don’t want to spend too much time talking about them here. However, I do want to quickly summarize why it might be beneficial to move your mobile site over to one (or both) of these formats:
AMP is short for “Accelerated Mobile Pages”. There are a number of things that make this page format fast:
- It relies mostly on lightweight HTML.
- It uses lazy loading.
- Page content is cached in Google Cloud.
While you can use this for any website, it’s especially great for digital publications and blogs that want to provide speedy reading experiences. Also, it’s easy to implement — all you need is a WordPress plugin to convert your pages.
PWA is short for “Progressive Web App”. It takes the best of the mobile web (i.e. searchability and convenience) and combines it with the mobile app (i.e. more mobile-friendly design as well as telephony features). It’s also much faster than a traditional mobile website.
Another thing to note is that PWAs can be accessed offline just like mobile apps, which makes this a great option if your website is targeting people who live in low- or no-coverage zones.
Because a PWA puts a website into an app-like shell, there’s no picking and choosing which pages of your site to convert. Build (or convert your site) as a PWA if you want to create a much better and faster experience from start to finish.
While there are some WordPress plugins that can help turn your website into a sort of PWA, you’d be better off coding this one from scratch.
Ready to improve your mobile page speed?
As more visitors flock to websites on their smartphones, our websites need to be prepared to provide them with the very best experience. The only problem is, some of the old ways of designing and optimizing a website for desktop just don’t do much in terms of mobile page speed.
By using the steps above, however, you can improve your mobile page speed in no time.
Just make sure not to stop there. It’s important to regularly revisit your mobile website to make sure it’s running as fast as possible. With the help of one of these website speed testing tools, you can easily keep tabs on it while receiving clear guidance on what needs to be fixed.