Passing the Google Mobile Friendly Test

Mobile friendly website configuration and testing

Passing the Google Mobile Friendly Test
This support page includes help and some tips for checking and updating your website so it can pass the Google Mobile-Friendly Test as well as how to rate well at Google PageSpeed Insights.

Important point about mobile ranking
What may not be clear is that Google does not list a site higher if it is *more* mobile friendly then another site. Mobile compliance is not ranked on a scale. In other words, your site is either mobile friendly, or not mobile friendly, according to Google, and will then rank higher or lower in mobile search engine results according to the page text content, backlinks from other sites and other SEO ranking criteria.
Mobile Version Website Upgrade
Mobile Website Plugin
Custom Built Mobile

Getting a detailed report for your site
To see more specifically what the mobile friendliness problem may be, check your website at Google PageSpeed Insights. After you test, you may want to review the PageSpeed Insights section below on this page to better understand the results.

Getting the highest marks possible on every test is not really important (see section above), rather you are simply trying to find out why your site did not pass the friendly test. The speed of a website loading is a slight SEO factor, but reducing page speed, say for example, 10 to 20 percent, or even 50 percent, may have no effect on your rankings.

Updating older websites
If you have an older website that you would like to add mobile compliance to, see the following:

Templates that include a mobile sub-site   [ What is this? ]
When testing in the Google Mobile Friendly test you will not be testing your full website at the top level domain. Test the homepage for the mobile site in the "mobile" folder using the link:

Your top level website at your domain is a desktop website and your sub-site inside the "mobile" folder is the mobile friendly website. Once Google lists your mobile webpages in their search, if you then search on a smartphone you will see that your mobile pages will list much higher than your full site pages. In desktop searches your normal site will list higher.

See: Improving Your Mobile Version Google Listing

Be sure to link to the sub-site for SEO!
In the default template download there are links to your mobile site included on the full site home page and site map pages that link to "mobile/index.html" (index page in the "mobile" folder). These links are important to make sure Google can find and list all your html web pages in their search.

See: Improving Your Mobile Version Google Listing

If you have a mobile sub-site upgrade addon   [ What is this? ]
Works the same as the sub-site section above. Also review all instructions included with the addon download, particularly about linking.

Responsive and mobi-Hybrid® web templates   [ What is this? ]
If you have one of these types of templates and it is not passing the Google mobile friendly test, in most cases this means that you have added something to the html webpages that is too wide. This may be a large image, a table of text, or a Youtube video. The maximum width for any item you add should be 300 pixels or less.

To fix this you will need to either make your page element less than 300 pixels wide, or you will need to make it responsive or have it hide on mobile using css code "display:none;". There is a ".hidemobile" class in most templates. If you add this class to your element it will then not display on small mobile devices. Example:

<img src="picts/your-image.jpg" class="hidemobile img-borders" alt="Image">

See Testing Responsiveness and you may want to also check your website using Google PageSpeed Insights for a comprehensive report.

Understanding the PageSpeed Insights Test Results
After you test at Google PageSpeed Insights you will see a number of "fix" and "consider fixing" suggestions, however, the important numbers are the summation for "User Experience". If this number is greater than 90 you are doing extremely well, and scores as low as 70 can still pass the Google Mobile Friendly test. Here is a breakdown of the "fix" issues.
  • Be aware that PageSpeed insights is only a tool to help you make your website mobile friendly. It is not an SEO checker and even poor scores in this testing utility may have little or no SEO impact. See "The Bottom Line" at the end of this section.

  • Eliminate render-blocking JavaScript: This fix is referring to the .css file and .js file "calls" in the header section of your webpages. This is generally not a big concern for mobile friendliness unless you have 20 or more "calls" on a single webpage.

    If you want to address this issue see PageSpeed Server Module and review the 3rd party article How to score 100/100 with the Google PageSpeed Insights tool.

  • Leverage browser caching: This fix concerns a server side script rather than anything you can edit in the webpages. See links in above paragraph.

  • Minify & enable compression: To "minify" your css, HTML and js files basically means to take all the spaces and tabs out. If you minify your files it will make them difficult to edit using a plain text editor. Compression indicates to use a gzip type utility on your server to compress the web files. These 2 fixes are best done by using a server utility that does both the minify and compression automatically when you upload. If you usually edit your files directly on your website you will not want to minify them. See links in paragraph above and also search at Google for "website minify utility".

    See also: Website Planet JS & CSS Minifier

  • Optimize images: Be sure to "size" your images to the size used on the webpages and save them at lower quality. This is not a big concern in most cases unless you have a large number of images, or very large images on your webpage. You may need to remove some images or hide them using css Media Queries.

    Optionally, you can use a utility to compress your images, however this will take extra time each time you create a new image and they will lose some quality. For a program to automatically compress images directly on your website, you can search "lossless compression utility" at Google or Bing for available programs. Again, your images may lose some quality with this type of utility.

  • Size tap targets: These are buttons, links and linked images and icons that may be "clicked" on mobile devices. You can make these elements larger and add more whitespace around them, however, when designing for mobile, in many cases, this may not be possible. You may need to hide (using css Media Queries) or remove elements to allow the other elements to display larger.

  • The Bottom Line - You can spend considerable time tweaking to get a 100/100 at PageSpeed insights, however, the "User Experience" rating is all you really need to rate well. Trying to achieve a 100/100 rather than being satisfied with a 90 to 99 out of 100 may take time that could be better spent on improving your website content or getting more quality backlinks. For optimal SEO and ranking, the webpages only need to pass the Google Mobile-Friendly Test. A higher Insights rating will not improve your mobile SEO.

    PageSpeed Insights results display how well your webpage files and website files are speed optimized, not SEO optimized, and does not indicate overall how well your website is setup for mobile SEO. It is a misconception that a site will rank higher because it is "more" mobile compatible. Your website either passes the Google Friendly test, or it does not. There are no grades of mobile compliance.

  • Check the competition: Before you attempt to get a 100/100 rating you may want to run a few of your competitor's websites through the Google checkers and see how they rate. In most cases, they may be ranking higher due to website content and quality backlinks rather than mobile compatibility.

Mobile Website Template Plugin