This tutorial covers mobile caching, mobile-adaptive images, and AMP (accelerated mobile pages). Most optimizations made on your desktop site carry over to your mobile site. That’s why doing things like upgrading PHP versions and reducing server response times also help.
How To Speed Up WordPress On Mobile in 2020
PageSpeed Checker JasaSEO.be
Enable Mobile Caching
Use Adaptive Images
Enable Cloudflare Mirage
Use Responsive Themes And Plugins
Fix Mobile Redirects
Reduce Server Response Time
Don’t Use AMP
Desktop Optimizations Carry Over To Mobile
Run PHP 7.3+
Setup A CDN
Optimize External Scripts
Preconnect And Prefetch
Use A Better Cache Plugin
Clean Your Database
Disable pingbacks and trackbacks
The homepage of a website is usually used as a benchmark to test the load time. In order to check the speed of a website, the following three tools are used extensively across the web:
PageSpeed Insights (this doesn’t really report the page loading time, but does highlight the elements that you can tweak to speed up WordPress)
Okay, it’s about time to start talking some business! Here are the 11 ways to speed up WordPress:
How To Test Your WordPress Site’s Mobile Speed
I recommend GTmetrix’s mobile test or Pagespeed checker since it gives you completely new PageSpeed recommendations specifically for mobile site speed, it measures load times, and you can expand each item to see exactly which elements need to be optimized on your mobile site.
1. GTmetrix Mobile Test
With a free GTmetrix account, you can test your site on Android. The PageSpeed tab is unique to mobile while YSlow is the same as desktop. The PageSpeed tab shows serve scaled image errors if you’re not using adaptive images, as well as redirect errors and your mobile load time.
2. Google PageSpeed Insights
Google PageSpeed Insights has a “mobile” tab which tells you mobile-specific optimizations. However, you shouldn’t use PageSpeed Insights anyway since there’s an emphasis on scores (and not load times) which it doesn’t even measure, so use GTmetrix or another tool instead.
3. Think With Google Think With Google isn’t great either. Just like PageSpeed Insights, the recommendations are somewhat broad (with GTmetrix you can actually expand recommendations to see which plugins, scripts, and images are slowing down your site). Think With Google doesn’t do that.
If your cache plugin doesn’t come with mobile caching, find out if it at least supports it. If not, consider using a cache plugin that does. Some also have an option to create separate cache files for mobile devices which makes sure mobile-specific elements are cached (mainly helpful if you’re using a mobile plugin like WP Touch, WP Mobile Detect, or JetPack’s mobile theme).
Preloading Mobile Cache Instead Of Desktop
Cache plugins have a choice of preloading desktop or mobile cache, but not both. If most of your visitors are viewing your site from mobile and you have many mobile-specific design elements you want loaded faster, you can choose to preload mobile cache instead of desktop. You can enable mobile preloading with WP Rocket’s helper plugin. For other cache plugins, Google to see if they an option to enable mobile preloading instead of standard preloading.
JasaSEO.be teams says:
“The plugin will “preload mobile cache files instead of standard cache files. It’s not currently possible to preload both.”
2. Use Adaptive Images
If serve scaled images is not 100% when you test your site on GTmetrix’s mobile test, using adaptive images should fix these errors.
“Adaptive images detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embedded HTML images.”
Step 1: Test your site on GTmetrix (Android) to see serve scaled image errors on mobile.
Step 2: Find the recommended image width in GTmetrix.
Step 3: In your plugin settings, set the background maximum width to the dimensions provided by GTmetrix (in the serve scaled images section). Save changes. There are a few other settings for WebP support, lazy loading images, smart cropping, and removing EXIF data.
Step 4: Retest your site in GTmetrix (Android) and serve scaled images should be 100%.
3. Enable Cloudflare Mirage
JasaSEO.be team says:
Mirage was designed to make the loading of images faster in two primary ways: 1) deliver smaller images for devices with smaller screens; and 2) “lazy load” images only when they appeared in the viewport. Both of these optimizations were designed primarily to accelerate web performance on mobile devices.
This is a pro feature of Cloudflare, but you shouldn’t need it since there are free lazy loading and adaptive image plugins out there which do the same thing. Mirage is an alternative though.
4. Use Responsive Themes And Plugins
Responsive themes and plugins naturally adapt to mobile devices.
Why is this important? Because just like adaptive images, other elements on your website will be resized automatically to fit mobile screens, making them load faster than a desktop version.
If using Cloudflare, you can use their mobile redirect option which they say “automatically redirects mobile device visitors to a mobile-optimized subdomain. The redirect is done at the edge of Cloudflare’s network, improving load time by eliminating a roundtrip to the origin server – this is especially valuable on mobile networks, which serves content slower than wifi.”
Setup Redirects At Server Level
If you have a mobile subdomain (or any redirect for that matter), it’s best to setup it up at a server level so it’s doesn’t ever hit WordPress. Server-level redirects are faster than plugins.
AMP (accelerated mobile pages) are a Google project that make mobile pages load faster while giving you an AMP stamp in mobile search results.
But, AMP also completely changes your mobile design.
Kinsta’s conversions dropped 58% when adding AMP, and they have since reverted back to their normal mobile pages. I have also decided against AMP since the design doesn’t look great. There are AMP plugins to help with design, but it’s still pretty limited and you may be disappointed with the result. And if you decided to add AMP then remove it, it’s extra work as you’ll need to setup redirects and take other measures to revert back to normal mobile pages.
You’re sacrificing design and conversions for speed. Is AMP worth it? I don’t use it.
If You Decide To Use AMP, Use The AMP For WP Plugin
If you’re going to add AMP, you should probably use the AMP for WP plugin. It has the most customization options out of any AMP plugin I’ve seen (even the AMP plugin supported by Google and Automattic).
Cloudflare AMP Real URL
Cloudflare says AMP Real URLs “means a page can be stored in an AMP cache and served quickly from it while showing the original site URL in the browser’s nav bar.”
You can find this in Cloudflare’s speed settings:
8. Desktop Optimizations Carry Over To Mobile
Most desktop speed optimizations will carry over to your mobile website.
I’m talking about:
Adding a CDN
Cleaning your database
Upgrading PHP versions
Upgrading your server/hosting
Configuring a good cache plugin
Optimizing external scripts (eg. Google Fonts)
If your mobile and desktop need work in GTmetrix, I wouldn’t worry so much about your mobile site at first. Enable mobile caching (in your cache plugin)
If you search “mobile speed” in the WordPress plugin library, hardly anything comes up to optimize WordPress sites specifically for mobile devices. Start with desktop optimizations!
9. Run PHP 7.3+
This is super easy and can make your site 2-3x faster.
First, login to your hosting account and go to the PHP Version manager, then make sure you’re running the latest PHP version supported by your host. Some hosting companies are quicker to release newer PHP versions than others, but you should ideally be running PHP 7.3 or higher. You can also use the Display PHP Version plugin see which version you’re currently on.
Sometimes, incompatible plugins can cause errors when upgrading PHP versions. This means they aren’t maintained well and you should consider deleting or replacing those plugins. As always, take a backup before upgrading, but you can always revert to an earlier PHP version.
They have 190+ data centers around the world. By using these data centers to host heavy files on your website, you’re reducing the geographic distance between your server and visitors (a recommendation in the WordPress optimization guide). You’re also offloading bandwidth consumption to Cloudflare, which can save CPU consumption and money on your hosting bill.
To setup Cloudflare, sign up for a free account, grab the 2 nameservers from Cloudflare, then change nameservers in your domain registrar. This will take about 24 hours for propagation.
Serve scaled images: resizing large images to be smaller
Optimize images (lossless compression): try ShortPixel, Imagify, or Smush
Specify image dimensions: adding a width + height in the image’s HTML or CSS
GTmetrix only shows errors for a single page. That’s why it’s best to optimize images that appear on multiple pages first (logo, sidebar and footer images), then work you way through your most important pages. It’s also best to start with scaling images since that requires cropping/resizing images and reuploading them. GTmetrix will tell you the correct dimensions for unscaled images and for those that have no specified width + height in the HTML or CSS.
Create An Image Dimensions Cheat Sheet
I recommend creating an “image dimension cheat sheet” for the dimensions of your sliders, full width blog images, featured images, etc. That way, you can crop + resize them to the correct dimensions before uploading them, and you shouldn’t have serve scaled image errors again.
12. Optimize Plugins
Too many plugins or any high CPU plugins (especially those using external scripts) can slow down your site, even on mobile. I’m very picky about which plugins I use and test my GTmetrix report after installing a new plugin. Always use the fastest, most lightweight, reliable plugins.
Asset CleanUp is great for speeding up plugins. It lets you see which plugins, scripts, and styles are loading on certain pages, then selectively disable them on content where they don’t need to be loaded. If you’re not doing this already, I would 100% recommend using Asset CleanUp.
Avoid high CPU plugins: avoid this list of slow plugins. Common slow plugins include social sharing plugins, portfolios, slider, statistics, backups, and others.
Replace high CPU plugins with faster plugins: some research will be required, but replace any of your high CPU plugins with faster, more lightweight plugins.
Delete plugins you don’t need: can you replace plugins with code (eg. insert GA tracking code directly, use Facebook widgets instead of plugins, or create a table of contents in HTML + CSS? Any plugins you can replace with code, do it.
Don’t use JetPack for a couple modules: first, disable all modules you’re not currently using in the debug settings. Next, do you really need JetPack if you’re only using it for a couple things? It’s infamous for slowing down sites. You’re betting off finding a non-bloated plugin that only does the same functionality.
Find your slowest plugins: use the GTmetrix Waterfall tab or Query Monitor (the queries by components tab) to see your slowest plugins. If a plugin shows multiple times in your PageSpeed + YSlow report, that may also be an indictor.
“DNS requests are very small in terms of bandwidth, but latency can be quite high, especially on mobile networks. By speculatively prefetching DNS results, latency can be reduced at certain times, such as when a user clicks the link. In some cases, latency can be reduced by 1s.”
How To Prefetch DNS Requests Pre* Party Resource Hints has the following features: DNS prefetch, prerender, preconnect, prefetch, and preload. These are helpful if you have third party scripts on your site (Google Fonts, Analytics, YouTube videos, Gravatars, etc). Copy this list of common external domains (or add your own) and add them to either Pre* Party or WP Rocket.
15. Use A Better Cache Plugin
Not all cache plugins are equal.
W3 total cache is usually rated #1 in Facebook polls and yields the best desktop and mobile load times (and GTmetrix scores). That’s because w3 total cache comes with more features than other cache plugins. If you were to use another cache plugin that didn’t have these features, you would need to install about 6-7 extra plugins, while w3 total cache has all these features built-in.
Less plugins on your site, yet more speed optimization features and better results.
W3 total cache Features Not Included With Most Cache Plugins:
Database Cleanup: built-in to w3 total cache, or use WP-Optimize.
Lazy Loading: built-in to w3 total cache, or use WP YouTube Lyte.
Heartbeat Control: built-in to w3 total cache, or use Heartbeat Control.
Local Google Analytics: built-in to w3 total cache, or use CAOS Analytics.
Local Google Fonts: built-in to w3 total cache, or use either OMGF or SHGF.
Prefetch DNS Requests: built-in to w3 total cache, or use Pre* Party Resource Hints.
Facebook Pixel Browser Caching: built-in to w3 total cache (no other plugin does this).
CDNs: built-in to w3 total cache (both Cloudflare + multiple CDNs), or use CDN Enabler.
Frequently cleaning your database prevents it from getting bloated.
You can use WP-Optimize or WP Rocket to schedule weekly or biweekly database cleanups (but taking a backup is recommended). Typically, everything in the settings should be deleted except for unapproved comments. Database tables are often left by plugins you deleted, a post revision is created every time you edit a post, you should empty your trash folder, and so forth.
18. Disable pingbacks and trackbacks
Pingbacks and trackbacks are two core WordPress components that alert you whenever your blog or page receives a link. It might sound useful, but you also have things such as Google Webmaster Tools and other services to check the links of your website.
Keeping pingbacks and trackbacks on can also put an undesirable amount of strain on your server resources. This is so because whenever anyone tries to link up to your site, it generates requests from WordPress back and forth. This functionality is also widely abused when targeting a website with DDoS attacks.
You can turn it all off in WP-Admin → Settings → Discussion. Just deselect “Allow link notifications from other blogs (pingbacks and trackbacks).” This will help you speed up WordPress some more.
The biggest advantage of lowering your website’s loading time is that it will help tremendously in improving the experience of your visitors. The case remains the same whether they are using mobile devices or PCs. Furthermore, it will also improve your rankings in the SERPs. After all, reduced bandwidth usage of your hosting and faster site-loading speed on the client side will only benefit you both in the short as well as the long run.
We offers the best professional search engine optimization (SEO) services and Best SMM Panel. Contact us to learn how we can increase your online visibility!