Six fantastic WordPress mobile site optimization tricks to increase your google page-insight rating

Six fantastic WordPress mobile site optimization tricks to increase your google page-insight rating

  • 4
    Shares

Do you know about this fact that in the USA more than 50% of the traffic to the internet comes from mobile devices only? And if you believe in this statistic then you must also accept that almost 50% of the total visitors of your website are mobile users. This is the reason why you should always try to keep the focus on mobile site optimization.

Take the example of social media. When did you last checked your Facebook, Instagram or Twitter profile today? Most of us use social media at least one time per single day. This is the reason that these social media leaders choose the mobile platform for the people like us who always like to use mobile phones instead of a laptop or desktop.

There are more chances that you are reading this post from your personal phone. Maybe not everyone but I have got an average state of 67% mobile readers for the previous articles. Whatever the analytic, the primary subject I want to mention in this article is how to engage the more mobile user to your website by making the site mobile friendly.




As you are a website owner this is a high priority recommendation for you to set up and optimize your website for mobile responsiveness. Don’t get it wrong and install a new responsive theme. You have to optimize your current theme and make it mobile friendly. (Will be appearing nicely to the visitors). If you really want to establish your business and make money from your website, you are definitely going embrace the power of mobile.

So let’s start with the Google Page Insight tool and try to check your website score for both desktop and mobile. If your score is at least 80 /100 that’s pretty much good result for that specific platform. If you are having a bad score on the desktop platform then follow this category. And if you are having a bad score on the Mobile platform then keep reading this guide. Soon we will start with the core procedure. 🙂

So in this requirement of happy mobile reading experience, I have tested few WordPress plugins with one of my websites and here is the list of successor plugins that really makes your mobile website clean and awesome. Let’s get started,

1/ WordPress Mobile Pack

WordPress-Mobile-Pack
WordPress-Mobile-Pack

 

WordPress mobile pack is something very useful whenever you want to create a mobile version of your website. It can help you build your entire mobile application using the latest technology called HTML5. At the same very much compatible with Android, iOS and tablet also. It supports the most popular browsers like Chrome, Safari, and Android native browser. So there is no issue to reach the users easily.

Still no idea about a mobile site? Take the example of browsing Facebook light web app on your chrome browser. (In case of mobile phones only)

Some very useful features about WordPress mobile pack are,

  • Have a responsive UI means the application is sensitive to various screen size and orientation so that user can read the articles both in portrait and landscape mode on their phone.
  • The native app like theme will give the readers an exceptional reading experience.
  • Organized post, page and comment section gives the users a clear road to visit and see without being confused on one single busy page.
  • You can track the flow of people with the help of Google analytics code.
  • Apps load very quickly and are reliable, no matter what kind of network connection your user is on.
  • The web push notification system will help you re-engage the user easily with simple and clean notification.

2/ The Jetpack Mobile Theme Module

Looks like everyone who uses WordPress are familiar with Jetpack as this is one of the most useful plugins and recommended by WordPress too. This plugin was developed by the same folks that are behind WordPress. Having a number of good features is really great but we are going to talk about the mobile theme module of Jetpack.

When you enable the Mobile Theme Module in Jetpack it will override your active theme’s mobile version and instead show Jetpack optimized mobile theme to the viewer.

Jetpack mobile theme is built with the most optimized pieces of codes and also optimized for better SEO standard. This will give you a clean and beautiful look to the mobile website. Ah, also Jetpack is free for everyone.

I am using Jetpack for the mobile version of this website. Let’s see where to configure Jetpack mobile theme for your mobile site.

Traverse through Jetpack > Writing > Scroll Down and look for “Theme enhancement” tab.

Jetpack-setup-for-mobile-theme

Jetpack-setup-for-mobile-theme



3/ WPtouch mobile site plugin

Another great mobile plugin that will help you convert your entire mobile site into a fluid, elegant mobile template automatically upholding the recommended guidelines by Google. The mobile-friendly version of your website will help you pass the Google Mobile test, and also ensure your SEO rankings do not drop due to not having a mobile-friendly website.

The WPtouch administration panel and the default WordPress customizer will help you to build a stylish version of the mobile theme. As you don’t have to go with the coding part will allow you to freely test with the different setups to get the best design and optimization for your site. Meanwhile delivering the mobile responsive theme for mobile devices this plugins also ensure that your desktop theme is left intact and keep delivering the desktop view to the desktop users.

There is also a pro version of this theme which offers you different theme preset for blogs, woocommerce, and business. Using this plugin you will get control over the fonts, caching and lot more stuff to optimize your mobile site. The additional extensions have to be purchased separately depending on your need and cost is rang from $10 – $20.

Some people may argue with the price regarding the extensions of this plugin by mentioning as too high but some other thought might suggest that they vastly help to improve the quality of the plugin.

Anyway, do some research and try to find more recommendation on this plugin and decide your move.

Some better ways to configure wp touch plugin have shown below in the images.

Wptouch screenshot

Wptouch-screenshot-1

Wptouch-screenshot-2

Wptouch-screenshot-2

 

Heads up! Compress your images with the combination of cloudinary and Smush plugin. Make your images responsive so that it appears nicely with your mobile theme. WordPress supports responsive image by default from the 4.4 version. Use lazyload to defer image loading and improve your site loading time.

4/ WP mobile detector

Wp mobile detector
Wp mobile detector

If you are experiencing disturbance by extra large images, banners in front of the content especially for the mobile device then heads up! It can degrade the overall mobile site experience. To solve the issue with a widely visible image or banners you can either resize them or hide them from a mobile device. In any case, if you are not successful to solve it by resizing the image or banner size you need to install one plugin called WP mobile detector.

Using this plugin you can wrap those content in the editor which are not necessary for mobile view, with the help of shortcodes. Shortcodes make the process extremely easy without going through the coding part.

WP Mobile detect gives you the ability to wrap an infographic in a predefined shortcode so at the server level WordPress can decide to show that infographic only if the viewer is NOT using a phone or tablet. Alternatively, you can wrap a link and corresponding text to that infographic separately so that if the user wants to see that he can view it separately.

 

Related posts 

Why To Reduce Server Response Time In WordPress And How?

5/ AMP for WordPress mobile site

AMP stands for the accelerated mobile page. The is a recent project by Google which has the ability to make your mobile page loads faster and stick a beautiful “amp” stump on the Google snippets of your article. To enable amp for the mobile version of your website download the amp plugin from the WordPress repository.

Amp demo snippets Mobile site
Amp demo snippets

Enabling the AMP will have a direct effect on your mobile version as it will completely change the basic design and set up its own recommendation on the mobile theme. Anyway, you should give it a try and determine if the change is useful or not useful for your site. In case you find that not useful, there is always one option for you to rollback the installation.

The primary steps to configure the amp plugin with WordPress are the following,

    • Install the AMP plugin by Automattic.
    • Install the Glue For Yoast SEO AMP plugin if you are using Yoast (customizes the design)
    • Test add [/amp/] to any page on your website to see how it looks and make sure it works or not.
    • Go to the Yoast’s Settings → AMP to change your design and enable custom post setting.
    • Wait for Google to recrawl your site and add the AMP sign in mobile search results

Caution: There is a common issue with featured images appearing on the top of the posts when you might not want them too. An improvement needs to done by the plugin in future updates.

6/ Mobile site test drive and mobile smart combination

Now, this process is something different than others but one of the most effective one that worked for me. In less than 30 minutes you can set up the responsive mobile version that will dynamically work on all kind of mobile screen size providing more powerful controls on your hand.

This is actually a combination of two different plugins which will do the trick on your website.

The two required plugins are accordingly,

Before getting into the business make sure whatever theme you are currently using, allows for you to put custom CSS code directly into the theme options.

  • Install the theme test drive and mobile smart.
  • Choose any mobile theme from theme test drive for further customizations.
  • While you are in theme test drive mode and logged into your admin area, set up mobile menu and widgets and adjust CSS styling as required.
  • Now open your mobile smart settings and enable the settings available for optimization and look of your pre-setted theme by a test drive.
  • When you are all done with the settings disable the test drive and uninstall the plugin.
  • This process will ensure that you won’t lose any data or contents during designing your website and make the process safer to convert your default theme to mobile theme.

Recently tested amp plugin from WordPress repository

Recently we have tested another AMP plugin “AMP on WordPress” by weeblrpress. This plugin is seems to be new but it comes with some great features which make me to add the plugin in this list.  It allows you to create a complete amp version of your website fully featured with amp specifications.

Again the built in comment,  analytics, ads,  yoast SEO, schema and jetpack integration make it more beautiful to implement in your WordPress website. After using amp on WordPress plugin we achieved 87 rating on the google page insight, so it’s most likely to be useful for you and I hope it will give you the best result.

This plugin also provides an premium version with some more exciting features. So check them around whenever you like the free one a lot.

 

Conclusion: These are the few steps you can take to make your WordPress site mobile friendly. However, there are more plugins and tools are available for WordPress so consider trying them once and see the difference. If you find any plugin that should be included in this list please name that in the comment section below. I will always try to reach you as soon as I can.


  • 4
    Shares

Rupam Krishna Bharali

Rupam is founder of rankwordpress.in. He is a web developer, blogger, graphic designer and a well known game level designer from India. He also loves traveling, exploring new ideas and playing football.Let's connect on: twitter

This Post Has 4 Comments

  1. Great, the last option I would like try as it provides more secure options.

  2. Of course, you can. 😊

  3. Improved from 59 to 87 in google insight after using the wptouch. Thanks a lot for the info. I was exactly looking for this for few weeks.

  4. An adroit article, thanks to Rupam 😊

Comments are closed.

Close Menu