Even if site owners have created mobile-optimized sites with pages that render in less than one second, what happens when a user lands on that page is just as important as how fast that page was delivered.
With that in mind, Google updated its PageSpeed Insights tool with new user experience rules to help site owners create a mobile environment that users can navigate with ease.
“Suppose your fast mobile site loads in just two seconds instead of seven seconds. If mobile users still have to spend another five seconds once the page loads to pinch-zoom and scroll the screen before they can start reading the text and interacting with the page, then that site isn’t really fast to use after all,” Google says in its announcement.
Now, new recommendations can be found in the PageSpeed Insights tool:
1. Configure and Size Content to the Viewport
“A viewport controls how a webpage is displayed on a mobile device,” Google states in its help files here. “Without a viewport, mobile devices will render the page at a typical desktop screen width, scaled to fit the screen. Setting a viewport gives control over the page’s width and scaling on different devices.”
2. Use Legible Font Sizes
Google recommends websites use a base font of 16 CSS pixels and adjust as needed for the font used, to use appropriate vertical space between text characters (suggesting the browser default line-height of 1.2em is good),and to restrict the number of fonts used.
“Too many fonts and font sizes lead to messy and overly complex page layouts,” Google says in its help files here.
3. Size Tap Targets
“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,” Google says in its announcement.
So, Google recommends you size the tap targets to the average adult finger pad size, which is about 10mm wide (approximately a half-inch).
“The Android UI guidelines recommend a minimum tap target size of roughly 7mm, or 48 CSS pixels on a site with a properly-set mobile viewport,” Google says in its help files here.
Other PageSpeed Insights Tool Updates
In addition to the new features within the PageSpeed Insights tool, Google says it updated the tool to a mobile-friendly design, and translated the documents into additional languages.