3 tips for optimizing your website for mobile users

According to GlobalWebIndex, the smartphone is the most important device for accessing the internet. But a lot of websites still don’t seem to be mobile-responsive.

A Mobile responsive website attracts more users, improves engagement, increases conversion rates, and boosts your Google ranking. But there has been a huge panic in the SEO industry because of Google’s mobile-first indexing. Google uses a bot to crawl websites as a desktop user would to add pages to its index. However, after launching mobile-first indexing, Google will crawl websites like a mobile user. This is because users are now searching more on mobile than on desktop, according to the search giant.

In this article, I will share the things my team and I learned in the following areas as we make our website mobile-optimized:

• The fundamentals of responsive design
• The role of a web page’s loading speed for mobile SEO
• Mobile user experience

Responsive design

First, you need to test your site to see how it performs on mobile and find out the issues that you need to solve. Google provides an amazing tool that can give you detailed information about your site’s mobile optimization. Just enter your website URL and click Test Now to get started.

Here are the test results for our website. As you see, it scored perfectly, which is great.

But how did we get this result? Luckily, we built our site on WordPress and picked a theme that’s already mobile-responsive.

But what should you do if you’re already on WordPress but your website isn’t still responsive? There are two ways to solve this problem: either make changes on your site’s scripts or install plugins that will do the job for you. Here are two plugins you can use:

• WPtouch: It makes a mobile-friendly version of your site, which passes the Google mobile test.
• Any Mobile Theme Switcher: This plugin is useful for converting to a mobile theme. You can select different mobile themes for different mobile browsers.

After making those changes, you can test your site again to see if the improvements work. You can also use the search console to get a mobile usability report on the page level. It looks at six mobile usability issues:

• Flash usage: Most mobile browsers do not render Flash and because of that, users might not be able to access your website properly.
• Viewport is not configured: The viewport meta tag helps browsers in scaling a page to fit any screens.
• Fixed-width viewport: This problem attempts to circumvent mobile design with fixed width pages. To shelve this issue, a responsive design has to be adopted.
• Content does not fit viewport: The page’s content does not fit the window and the user has to scroll to view the content. This can be fixed with relative and not fixed widths.
• Small font size: This is a scaling issue and requires users to pinch to zoom in on text.
• Touch elements are too close: This is a popular usability issue where it is too hard for the user to tap a button without also touching the other buttons close to it.
  Solving all the detected problems not only improves your website’s performance on search engines but also attracts more visitors.

Page speed

• According to Google’s research:
  53 percent of users will leave a mobile page if it takes longer than three seconds to load.
• 70 percent of pages take seven seconds for the visual content above the fold to load.
• On average, it takes 22 seconds to fully load a mobile landing page. Apparently, people want answers and results quickly and for that, your website’s loading time should be fast. Here’s our site’s speed score:

Google also lists the issues you need to solve to improve your website’s load speed. These are the recommendations for our website:

• Eliminate render-blocking JavaScript and CSS in above-the-fold content.
• Leverage browser caching.
• Reduce server response time.
• Minify HTML.
• Optimize images.

(You can also use the PageSpeed Insights tool, which we also used, to test your site’s speed.)

Since we built our site on WordPress, we can use plugins to solve these problems. Here’s a quick list of what we have used and are planning to use:

• W3 Total Cache: This increases our site performance and reduces the download time.
• WP-SmushIt: This plugin scans every image uploaded on the website to optimize it.
• WP-Optimize: It cleans up our database easily and safely.
  Also, we keep our home page as simple as possible by:
• Reducing the number of posts
• Removing unnecessary social media widgets
• Deleting inactive and unnecessary plugins and widgets
  We monitor the improvements by checking the page loading time overview report on Google Analytics under Behavior > Site Speed.

Here, we can see that the average page load time of our website is 3.34 seconds, which is higher than the ideal two-second loading time. You would also notice that the average server response time is 1.12 seconds, but this falls short of Google’s recommendation of 200 milliseconds or below server response time. In that case, it may help if we change our hosting.

Mobile user experience

While web design and page speed are important factors for mobile SEO, you should also pay attention to user experience. You should know how your users interact with your mobile website. Ask these questions:

• How long do they stay on your site?
• What pages do they visit?
• What are they looking for?
• Which pages do they leave instantly?

Users should be able to navigate through your site easily and find the information they need quickly without having to perform unnecessary gestures like pinching to zoom in on content. The touch elements should not also be too close to each other.

To learn more about how users interact with different mobile sites and the factors that affect their behavior, you can browse through the report created by Google and AnswerLab. It also discusses some best practices for mobile web design which you can use to improve your site’s engagement and increase its conversion rate.

Resource: https://www.techinasia.com/talk/lesson-optimize-mobile-website