How to optimize WordPress website for mobile, tips for beginners

According to a survey, more than 50 percent of Google searches are being conducted on mobile devices. This shows us how important is a mobile-optimized website for your business/blog website. People are looking for products, articles, videos, and more using their mobile devices. Hence, you must also focus on creating a mobile-friendly website. Developers from all around the globe are charging thousands of dollars for doing that. But if you're using WordPress CMS, then you'll be able to get it done in few dollars or even free. In this article, I'll guide you through a straightforward way to mobile-optimize your WordPress website.
We'll talk about the things that we should take care of and then we'll discuss the plugin that you should use. As of now, you might have heard about AMP (Accelerated Mobile Project), if you haven't then it's a very important topic for you as well. It's a framework, developed by AMP open-source project. Google is even showing an AMP icon next to the search results on mobile devices. That's an indicator that they're preferring mobile-optimized websites over slow and laggy websites on mobile devices.




Still, it's not clear that they're ranking AMP websites above non-amp websites as there's no valid research on that. But ask any SEO expert, a mobile-optimized website helps businesses in many ways. That's because users can browse your website much faster like never before. AMP is open-source and is being used by e-commerce websites to load their product pages fast on mobile devices. Even most moviesstreaming services, e-mail services are moving towards the AMP so that their page can load faster.
A properly optimized AMP web page can even load in a blink of an eye on mobile devices. Yes, that's true and you might have experienced that while searching on Google. Google even caches AMP pages to load them more efficiently and fastly. They're doing so to provide good user experience and you should take advantage of that. In this article, we'll only cover the process to optimize Wordpress website as it's not very complex. It can be done using a WordPress plugin called AMP for WP and AMP. We'll talk about AMP for WP because it's more user friendly, offers flexibility, themes, and more.

Let's Know How To Optimize WordPress Website For Mobile Devices

As we discussed earlier, the straightforward option is using a WordPress  plugin. There are two of them in the market and we'll be showing you the process to use one of them. It's called AMP for WP and is rated more than AMP. Just don't be confused about them, AMP for WP is a freemium plugin that offers both paid and free versions. Whereas AMP is developed by the AMP open source community which is great but offers fewer features. As of a normal user, who doesn't want to mess up with coding or programming stuff, I recommend using AMP for WP because it offers compatibility with other WordPress plugins, Add-Ons, Themes, and more.


But all of that comes with an additional cost so it might not be way on everyone's pocket. Talking about myself, I'm happy with the free version and have never opted into plaid Add-Ons and whatever offered by the plugin authors. But you should check them out as there are many interesting things offered by the plugin authors.
Here are the steps to optimize the WordPress website for mobile devices. Follow the same steps to get started:

Step 1: Open your WordPress dashboard and search for the Plugin called AMP for WP. Install and Activate the plugin to use its features on your WP site.



Step 2: On the welcome screen, you'll see some options. Select Website Type and Pages where you need AMP support. I'll leave it to default as I have a simple blog website.



Step 3: Click on Settings option, in the branding section you can set your website logo. Click on Upload and browse your blog icon/logo image. Toggle the Resize button and resize the image so that it'll fit perfectly on screen. Use the slider to adjust the image more effectively.



Step 4: Under the AMP support section, you can choose where you would like to use the AMP support. If you have a blog website, select all of the options. It'll help users in browsing your entire website in a faster way on mobile devices. There's also an option known as AMP takeover, it'll overtake your current desktop theme and desktop users will see AMP version of your website.



Step 5: If you're using Adsense on your blog, this step is very important for you. AMP supports Adsense ads and you can set it using the plugin itself. Click on Advertisement option and toggle the Adoption to use it on your website. The plugin supports MGID and Adsense. For AdSense, one needs to enter his Publisher id and AD slot ID. Both this information is available in your Adsense ad code itself. The plugin can place Ads on different sections of the article.

Step 6: Now click on SEO settings and it's the most important part. Make sure the Meta Description option is checked. Scroll down and select the SEO plugin that you're using. Then you'll see multiple options and make sure you've checked all of them. It'll import all the settings from the Plugin and will set the Mets Description etc. accordingly.



Step 7: We'll now head towards the Analytics section directly. However, you can try the Performance, PWA, Page Builder settings to check their functionality. In the Analytics settings, one can choose what platform they're using to track the user. In my case, I'm using Google Analytics so I'll enter Google Analytics tracking id in there.



Step 8: If you're using Structured Data in your regularly HTML, then you should also check the Structured Data settings. In my case, I won't touch any of the settings offered by the plugin.

Step 9: Notifications and GDPR is for those who want to display a notification about cookie and GDPR policy to its users. in some countries, it's important to ask users if they comply with the website settings. You should use it if mandatory in your country.

Step 10: Those who're using Push Notifications on their websites to sent notifications and updates about their blog to the users should change Notification settings. AMP for WP currently supports Onesignal and iZooto. All you need to do is set the APP ID, select where, and in what position the Notification modal should appear.



Step 11: Now, we'll head towards the Advanced Settings. It's the most interesting part of the process. Here website owners can choose between many important features. It includes redirecting mobile users to AMP pages if they've requested a non-amp page on their mobile devices. We can add Header and Footer content using Advanced settings. Just make sure it's validated via AMP Project.

Step 12: Not let's head towards the Design options. Here you can choose the Theme and many design aspects of the AMP web page. It's similar to what we do while setting up a WordPress theme. There's nothing complex about it. AMP for WP provides four free themes. If you want more, you can purchase it as per your needs. I'll go with the Swift theme.



Step 13: In Global settings, we can choose the theme colors, typography, infinite-scroll, and more. It's all about making your website look interesting and as per your needs. It's just amazing as we're able to adjust the theme settings in the free version of the Plugin.

Step 14: Header settings is all about choosing the layout of your menu. It offers a wide range of features such as Header Type, Navigation Menu design, and so on. Under Homepage settings, one can choose some basic settings of homepage such as Excerpt length, post types, image size, etc. You can check out those settings if needed.

Step 15: Now lets head towards another important setting, the Single page setting. It's important to adjust the settings of the Single page because most users will land on your post page via Google. By default, AMP for WP plugin has enabled all the features and in most cases, you don't need all those features. I'm turning off features such as show Featured image on posts and also changing related post settings. It's for the good of users and also the way you want your post page to look like.
That's all folks, you've just optimized your WordPress website for mobile devices. I've tried to keep this guide as straight as possible. That's because most of you already know what those settings mean and their functionality. It's just like setting up a WordPress theme.



What I love about AMP for WP plugin is that they're offering top-notch features and flexibility to their themes and plugin. If you opt into their premium plan, they'll assist you in a much better way. If you're an e-commerce store owner, then you should check their premium services and it's cheap as compared to hiring a standalone AMP developer to design AMP support for your WordPress e-commerce blog. Those who're good with coding and PHP can even create additional functionality to the plugin itself.


Conclusion
Wordpress is indeed awesome CMS to build a website with. Thousands of useful plugins are always there to add more functionality to the website. In the case of AMP, with the help of the best AMP Wordpress plugins, we can convert our website to AMP and provides a much better user experience to mobile users.
If you're having some issues with the AMP for WP plugin, or have some questions, then drop a comment down below and we'll provide you all the required information.

Also Read - Input type file css

Post a Comment

0 Comments