This site uses cookies and other tracking technologies to make possible your usage of the website, assist with navigation and your ability to provide feedback, analyse your use of our products and services, assist with our promotional and marketing efforts, and provide better user experience.

By using the website, you agree to our Privacy policy

Accept and continue

Report a bug

Cancel
3175   7   4
SEO 12 min read April 4, 2018

How To Make Your WordPress Site Ready For The Mobile Speed Competition

How To Make Your WordPress Site Ready For The Mobile Speed Competition

Al Gomez
SEO consultant, the man behind Dlinkers.com, a company dedicated to complete digital marketing services. With more than ten years of experience, he enjoys supporting smartpreneurs like himself achieve online success.
In 2016, for the first time ever, mobile internet usage has exceeded desktop internet usage. StatCounter reported 51.3% mobile internet usage and 48.7% desktop internet usage in October 2016. And a month later Google announced that they started experimenting to make their index mobile-first. While it is no surprise, the bigger question is: Is this something we should worry about?

I personally believe that we should. With the staggering growth in mobile internet usage, it is about time for developers and digital marketers to take a look at the mobile aspects of websites to get into the race.

Speed testing

With more information laid on the table, users will not waste their time waiting for your mobile site to load to consume relevant content. Mobile consumers can transfer from one site to another. If you have a website with page speed that sucks, most of your site visitors will probably abandon your website long before you even got a chance to serve them your content.

So before you circle the drain, try to take a look at your mobile speed and improve your page performance. So let's start.
1
Google PageSpeed Tool
This tool is extremely easy to use. When you visit the website, you simply place your website, analyze and voila! You got assessments on your page speed and optimization. You can also check on some suggested fixes.
However, the PageSpeed Tool may not be available to all website as it just gradually rolling out. In our case, (as you can see below) we have our optimization data available but our speed is still unavailable. It also provides us with some recommended fixes.
2
Chrome Developer Tools
With Chrome Mobile connections when can check our page speed both in slow and fast 3G. This will allow us to know how fast our page loads using different connection speed.
In a 3G connection, the average loading time for a mobile site is about 19 seconds. If your website loads longer than that in a 3G connection, you may need to take necessary steps to improve your website.

So now that you have tested your mobile site speed, let to take a look at some things we can do to improve performance.

How to improve loading speed?

There are some easy to do quick fixes you can do to improve your mobile website speed. Here are some of them.

Image optimization

One of the common culprits that tremendously slow down a mobile website is large images. Luckily, they are also easy to fix. If you have uploaded too many images on your website in the past, go back to these previous images and get rid of any images that are no longer needed.

If you don't want to delete them as they are important to your website, you have an option to compress and optimize these images. You can compress images through Photoshop or you can simply use a plugin like Imagify to automatically optimize images.

Responsive images also help your website load faster. With Wordpress version 4.4, your images are automatically made responsive, so you don't have to worry about that.

To learn more about image optimization, check out this post↑

Optimize plugin and themes

Check your plugins and themes. Are they updated? If you are experiencing a very slow loading time on your website, you may want to take a look at the plugins and themes and update them. Outdated themes and plugin can be very risky in terms of security, and it can slow down your website. It is crucial that you update them and the deactivate unnecessary plugins.

You may also want to perform a series to test to figure out if the cause of your slow loading speed is indeed plugins or themes. Using a staging or clone website, you can deactivate plugin or switch themes until you can find the cause.

You may also want to use a caching plugin to minify and concatenate Javascript and CSS files. This allows your files to be stored locally in the user's browser and in the process reduce the amount of data to be downloaded and the the HTTP requests.

You can do this by either manually coding, or you can use WP Rocket as caching plugin to automatically create the coding for you.

Install and activate WP Rocket from their website and it will do the work for you. It will automatically set expiry date for your files and will modify your .htaccess file using the standard rules for caching, see example below. Hence, minimizing the time you have to spend when coding manually.

Your choice of web host matters

Just because you regularly upgrading your hosting account doesn't mean your host is great. Make sure to choose a web host that has a good server infrastructure and caching. Many great web hosts also allow new technologies which help your website load faster.

Set up an AMP

If you have an issue with a slow loading time of your articles or blog post, you can set up an AMP to help you speed up your blog posts.
AMP is a plugin which makes your articles loads faster. You could potentially increase traffic with AMP pages as they are more favored by Google. To enable the amp for your blog pages, go over the plugin "add new" tab on your Wordpress account, search and choose your AMP plugin and click the "install now" button.
There are several plugins you can choose from. Some of the most popular AMP plugins are:

  • AMP for WP – Accelerated Mobile Pages by Ahmed Kaludi, Mohammed Kaludi
  • AMP for WordPress by Automattic
  • Glue for Yoast SEO & AMP by Joost de Valk
  • Better AMP – WordPress Complete AMP by Better Studio

Once you have installed you AMP plugin, go to the AMP tab to customized the AMP settings including the design, onsite optimization, analytics and a lot more.

Particularly, we use AMP for WP – Accelerated Mobile Pages for our blogs. This plugin enables us to customize our AMP pages design. It allows the use of four different themes and also allows customization of CSS particularly for AMP pages only. In terms of structured data markup, this plugin automatically imposes the structured data as it creates the AMP pages.
However, you need to take note that AMP pages don't affect your website analytics. If you want to track traffic from mobile AMP pages, you need to set up a separate analytics tracking code.

Serve different mobile content

This is far more different the having a responsive content. In a responsive content, you just move around the content to make it appear more appealing to mobile viewers. This, on the other hand, uses a wp_is_mobile() function that detects devices so you can serve different content to mobile viewers.
Using a mobile detect shortcode, you can hide specific content that it is only available to desktop users. A plugin like WP Mobile Detect Plugin wraps certain content such as large images so it will appear as a link which mobile users have to click before seeing the full image.

Use a content delivery network

This is specifically critical for blog and news sites. The use of CDN can shave off seconds in your loading time as it allows your static content to be downloaded by visitors in various geographic locations in a faster manner.

With a content delivery network, you can avoid the delays in transversing the content across regions. CDN will cache your content on your visitor's location server and will serve them the content instead.

There are various ways to enable CDN depending on your CDN Network Services. Some of these are:

  • Cloudflare - Free/Paid
  • MAXCDN - Paid
  • Fastly - Paid
  • Akamai - Paid

In our case, we are using MAXCDN. To enable CDN, you need to create the pull zone. This will tell the system what files or assets will the system pull, cache and serve from the CDN network.
Once you already have the pullzone, you can log in to your Wordpress account, go to CDN tab under the Performance section, fill in the "Replace site's hostname with:" with your pull zone, save settings and you're done.
If you view your website source, you'll notice your pages URL have been replaced by your pull zone. This means that all files with that same URL as your pull zone are delivered to the end users from your CDN network service.

Restrict hotlinking and leeching

You may not be aware of this, but hotlinking and leeching can massively affect your page load time. This is a form of bandwidth theft where other sites are directly linking to the images on your website. Thus, increasing your loading time.

You can disable hotlinking and leeching by adding this code in your root.
/ Prevent image hotlinking in WordPress /
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourwebsite.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?facebook.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?twitter.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?other-websites-go-here.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ - [F]

Avoid SEO mistakes

There could be a lot of things going on in your mobile website that you often overlooked your mobile SEO. Common SEO mistakes could also be the cause why your mobile website is slowing down.

Go to the Google Search Console to find SEO issues you need to fix. Check your redirects, broken links or anything which could affect your mobile website performance. Also make sure that your website and its elements are legible on mobile and lastly, don't forget to track and update your progress.

To learn more about website audit, check out this post↑

Last words

Your mobile website speed is very crucial if you want to gain more traffic from mobile. Mobile user's attention is short, and you don't want to encounter high bounce rates and very low traffic just because your site isn't serving content fast enough. So try to get an in-depth look at your website and find out where you have to improve.

The rise of mobile usage seems to have no stop, and as it continues to grow, you don't have any other option to keep up with its pace. As more and more users shift to mobile, the competition is getting tougher and tougher. So if you want to stay in the race, you have no other choice but to speed up.

Rate the article on a five-point scale

(The article has already been rated by 0 people on average out of 5)
Found an error? Select it and press Ctrl + Enter to tell us

Recommended posts

Subscribe to our newsletter
Keep up to date with our latest news, events and blog posts!
Sign In Free Sign Up

You’ve reached your query limit.

Or email
Forgot password?
Or email
Back To Login

Don’t worry! Just fill in your email and we’ll send over your password.

Are you sure?
Please pick the project to work on

Personal demonstration

Serpstat is all about saving time, and we want to save yours! One of our specialists will contact you and discuss options going forward.

These may include a personal demonstration, a trial period, comprehensive training articles & webinar recordings, and custom advice from a Serpstat specialist. It is our goal to make you feel comfortable while using Serpstat.

Name
Email
Phone
We are glad of your comment

Upgrade your plan

Upgrade your plan

Export is not available for your account. Please upgrade to Plan A or higher to get access to the tool. Learn more

Sign Up Free

Спасибо, мы с вами свяжемся в ближайшее время

Invite
E-mail
Role
Message
Optional

You have run out of limits

You have reached the limit for the number of created projects. You cannot create new projects unless you increase the limits or delete existing projects.

I want more limits

Christmas is a time for miracles.

You are almost on the finish line of our Christmas quest. The last brick of your lego-promocode is left on the way up 55% discount.

Did not find previous lego-bricks? Fill the form anyway.

Name
Email
Phone