Test your website performance with Google

, by

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 :

the test gives you three note out of 100

Mobile friendliness

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

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.

source

Avoid plugins

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 :

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

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

Learn more : 16 Pixels: For Body Copy. Anything Less Is A Costly Mistake

Mobile and desktop speed

This test checks the following points :

Eliminate render-blocking JavaScript and CSS in above-the-fold content

This rule triggers when PageSpeed Insights detects that your HTML references a blocking external JavaScript file in the above-the-fold portion of your page.

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
  • Compress Text Files (CSS, Javascript)

Learn more : A Guide to HTTP Cache Headers

Minify CSS, HTML and JavaScript

Minification of resources means removing unnecessary characters from your HTML, Javascript, and CSS that are not required to load, such as:

  • White space characters
  • New line characters
  • HTML, CSS or JS Comments
  • Block delimiters

Learn more : Minify CSS, HTML and JavaScript

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.

Learn more : Google’s Redirects and User-Agent Detection guidelines

Enable compression

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
  • frameworks
  • libraries
  • etc.

Learn more : Server response time

Optimize images

“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

Now test how mobile-friendly your site is

https://testmysite.thinkwithgoogle.com