How To Use PageSpeed Insights To Make Your Site Mobile Friendly?

It doesn't take a genius to figure out that going mobile is the new norm these days. A mobile-friendly site is no longer a luxury, but a necessity. If you're working on making your website mobile-friendly, and haven't heard of PageSpeed Insights, then you know nothing! Google has put together (and now updated) a great tool -PageSpeed Insights - to help developers and webmasters make their pages mobile-friendly, with recommendations on mobile usability, and more.

It is the goal of any webmaster to optimize their website so as to minimize its loading time. A fast-loading page goes a long way in improving your website's user experience. But suppose you manage a very fast ~1 second load time for your website. If that comes at the cost of usability, then it's really not an improvement.

For example, a user might need to zoom out, or scroll down quite a bit in order to read the content on your site. The time wasted between the page loading, and up until the moment the user can start interacting with your website counts as much as the initial loading time. Well, this is where the PageSpeed Insights come in.

The PageSpeed Insights Tool provides valuable information regarding your website, and how you can optimize it for better effect. It's new user-experience rules can help you find and fix the usability issues found on your website.

Usability recommendations

Google has recently updated the tool with some new recommendations, a summary of which is given below.

1. Viewport

Without a meta-viewport tag, modern mobile browsers will assume your page is not mobile-friendly, and will fall back to a desktop viewport and possibly apply font-boosting, interfering with your intended page layout. Configuring the viewport to width=device-width should be your first step in mobilizing your site. (More on the topic coming up, so stay tuned!)

Size content to the viewport: Users expect mobile sites to scroll vertically, not horizontally. Once you've configured your viewport, make sure your page content fits the width of that viewport, keeping in mind that not all mobile devices are the same width.

2. Font sizes

Use legible font sizes: If users have to zoom in just to be able read your article text on their smartphone screen, then your site isn't mobile-friendly. PageSpeed Insights checks that your site’s text is large enough for most users to read comfortably.

3. Scale objects

Size tap targets appropriately: Nothing’s more frustrating than trying to tap a button or link on a phone or tablet touchscreen, and accidentally hitting the wrong one because your finger pad is much bigger than a desktop mouse cursor. Make sure that your mobile site’s touchscreen tap targets are large enough to press easily.

4. Avoid third-party plugins

Avoid plugins: Most smartphones don’t support Flash or other browser plugins, so make sure your mobile site doesn't rely on plugins.

You can read more about these rules in Google help sections. If you have questions, feel free to ask them in the comments section below. Also, we'll be covering some of these topics in detail, such as the viewport settings. So stay tuned :)