Google has launched a new website to “test how mobile-friendly your site is.” Powered by PageSpeed Insights, the performance testing tool helps you “find out how well your site works across mobile and desktop devices.” Because the website itself lacks of helps and tips, here is some helps, tips and links :
Following google’s material design guideline, the design is pretty neat and the experience pleasant. Enter your URL to check and while waiting for the analysis to finish, read some useful tips about users behaviours on mobile.
Like Dareboost, the test gives you a note, three actually. Three numbers out of 100 regarding :
Initially a page gets the label “mobile-friendly”, invented by Google in 2014, if :
- There’s no Flash
- Content is readable without zooming
- Users don’t have to scroll horizontally or zoom
- Links are sufficiently distanced from each other
Based on PageSpeed, this new tester checks the following points :
- Size tap targets appropriately
- Avoid app install interstitials that hide content
- Avoid plugins
- Configure the viewport
- Size content to viewport
- Use legible font sizes
Size tap targets appropriately
This rule checks the ergonomy of the page and triggers if some tap targets (buttons, links, or form fields) are too small or too close together (principle of proximity) for a user to easily tap on a touchscreen.
Avoid app install interstitials that hide content
The Mobile-Friendly Test indicates that sites should avoid showing app install interstitials that hide a significant amount of content on the transition from the search result page.
It is recommended instead to use App install banners - supported by Safari as Smart Banners and Chrome as Native App Install Banners - which are less intrusive.
Because “most content that once required plugins can now be created using native web technologies”, it is better to use as much as possible features provided by HTML5 and CSS3. source
Configure the viewport
Your page must specify a viewport which adapt to different devices
To do so, add the following line between your
<head> tags :
Even they are available options, it is better to avoid minimum-scale, maximum-scale and user-scalable but these options impact accessibility.
Size content to viewport
This rule triggers when the content does not fit horizontally the viewport size.
It is recommended to :
- Avoid setting large absolute CSS widths (pixel), but you use relative width values (percentage) instead.
- Use Media Queries
- Use flexible images and medias.
Use legible font sizes
This rule triggers when text in the page is too small to be legible.
It is recommended to :
- Use a base font size of 16 CSS pixels
- Use sizes relative size (rem)
- Use a legible line-height (1.4 times the font-size minimum)
- Don’t use too many fonts and font sizes
Mobile and desktop speed
This test checks the following points :
- Leverage browser caching
- Avoid landing page redirects
- Enable compression
- Reduce server response time
- Optimize images
- Prioritize visible content
Learn more : See the recommandations from Google
Leverage browser caching
The response from your server must include caching headers or resources specified to be cached for only a short time. Some solutions are :
- Set a far future Expires header
- Controlling ETags
Learn more : A Guide to HTTP Cache Headers
- White space characters
- New line characters
- HTML, CSS or JS Comments
- Block delimiters
Avoid landing page redirects
“Redirections on landing pages add delays to the page load and while the redirections are occurring, nothing is shown to the client.” Source
It is recommended to perform the redirection server-side rather than client side to reduce client-side requests.
Reduce the size of files to increase the speed to which they are transferred to the browser. Doing it reduces sizes of pages by up to 70% and increase page speed (Source).
Learn more : Active Gzip Compression
Reduce server response time
This rule triggers when PageSpeed Insights detects that your server response time is above 200 ms.
Here is a list of potential factors which may slow down the response of server:
- slow database queries
- slow routing
Learn more : Server response time
“64% of a website’s page weight is made up of images. – HTTP Archive”
Optimizing images can save a large number of bytes and improves. “The fewer bytes the browser has to download, the less competition there is for the client’s bandwidth and the faster the browser can download and render useful content on the screen.” Source
Learn more : Image Optimization
Prioritize visible content
Visible content is the portion of a webpage users see on their screen before they scroll - referred to as “above the fold”. In order to reducing the size of the above the fold content, Google suggests two main strategies :
- Structure your HTML : load the critical above-the-fold content first
- Reduce the amount of data used by your resources
Learn more : Prioritize visible content