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

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.