PageSpeed Insights Help Part 2: User Experience

March 25, 2016 | 4 min read
By Geena Nazareth

In “PageSpeed Insights Help Part 1: The Speed ‘Fixes,'” I explained and simplified each of the Google Developers PageSpeed Insights speed improvement suggestions. While load time is important, a user’s ability to easily view and interact with a page is just as essential. Therefore, in this article, I am moving on to the mobile user experience fixes.

PageSpeed Insights - User Experience

Configure the Viewport

  • The viewport is the area of a webpage that is visible to users.
  • To “configure” a viewport is to specify how large that visible area should be.
  • If a viewport is not specified, mobile browsers will render the page so that the entire desktop version of the page is visible on the smaller smartphone/tablet screen, which requires the user to zoom in before being able to view the content or interact with the page.
  • In order to configure the viewport, you must add a meta viewport tag to the head of your html document.
    • Google recommends adding the following tag: <meta name=viewport content=”width=device-width, initial-scale=1″>
    • This piece of code is telling the browser that the width of the page should be the same as the screen it is being shown on, and if the device is turned sideways (landscape) the page’s width should adjust to that view.

Size Content to Viewport

  • Sometimes, page content is displayed at a larger width than the specified viewport, which causes the content to be cut off and requires the user to scroll horizontally to view it.
  • The most common cause of this is when the absolute width of an image or other page element it set. For example, the width of an image on the webpage is set to 400 pixels (<img src=example.png style=width:400px; >) but the width of the mobile device it is being displayed on is only 300 pixels.
  • To correct this issue, Google recommends using a relative percentage value for the width (<img src=example.png style=max-width:100%; >).

Size Tap Targets Appropriately

  • Tap targets are links, buttons or forms on a webpage that a user can click on/interact with.
  • It is much more difficult to click a link or button on your smartphone with your finger than on your computer with a cursor. It can be frustrating if a user tries to tap on link but accidentally clicks another because they are too close.
  • To combat this user frustration, Google recommends that your tap targets should be at least 7mm (48 CSS pixels) and should have additional spacing around them if smaller than 7mm.

Use Legible Font Sizes

  • Here, PageSpeed Insights is telling you that the text on your webpage is too small to be easily read on a mobile device.
  • First, Google recommends configuring the viewport (explained above), which will allow fonts to be scaled appropriately across all devices.
  • Additionally, adhere to the following rules to ensure your fonts are legible and sized correctly:
    • Specify your page’s base font size as 16 CSS pixels (body {font-size: 16px}).
    • Define font sizes relative to the base size so headers are larger than the 16-pixel base font. For example, if the H1 font size is specified as 200% (h1{font-size: 200%}), the H1 text will always be two times larger than 16 pixels regardless of the device size.
    • Use a line height of at least 1.2, which will make the space between the lines of text 1.2 times the size of the text itself (p{font-size:120%;line-height:1.2;}).
    • In order to maintain a simple page layout, limit the number fonts and font sizes used.

Avoid App Install Interstitials That Hide Content

  • An interstitial is an overlay that covers the content of a webpage. Specifically, app install interstitials are overlays that promote the website’s app and suggest that the user download it rather than use the mobile site.
  • Interstitials are distracting, can be difficult to dismiss, and can often lead to a poor user experience.
  • As of November 1, 2015, pages that display app install interstitials are not considered mobile-friendly and mobile ranking will likely be negatively impacted if your site uses these interstitials.
  • As alternatives to app install interstitials, Google recommends:

Avoid Plugins

  • Plugins process and allow certain types of media to be displayed on webpages (mostly commonly videos).
  • The most common plugins are Adobe Flash, Microsoft Silverlight and Java.
  • It is best to avoid plugins because:
    • Most mobile devices do not support them.
    • They are a leading cause of hangs, crashes, and security incidents in browsers that do provide support.
    • Most browsers restrict them.
  • Use HTML5 as an alternative to plugins.
    • Check out Google’s developer resource to learn more.

Have user experience improvements had an impact on your site’s traffic?  Find me on Twitter or continue the conversation below.

Share This Post

5 Ways to Avoid the Most Common Web Design Pitfalls
Could Comic Sans Be the Key to Mastering Search Engine Optimization AND Website User Experience?
Subscribe to the Digital Marketing Tip!
Get the latest insights and time-tested wisdom from veterans of the digital marketing industry.

PageSpeed Insights Help Part 2: User Experience

March 25, 2016 | 4 min read
By Geena Nazareth

In “PageSpeed Insights Help Part 1: The Speed ‘Fixes,'” I explained and simplified each of the Google Developers PageSpeed Insights speed improvement suggestions. While load time is important, a user’s ability to easily view and interact with a page is just as essential. Therefore, in this article, I am moving on to the mobile user experience fixes.

PageSpeed Insights - User Experience

Configure the Viewport

  • The viewport is the area of a webpage that is visible to users.
  • To “configure” a viewport is to specify how large that visible area should be.
  • If a viewport is not specified, mobile browsers will render the page so that the entire desktop version of the page is visible on the smaller smartphone/tablet screen, which requires the user to zoom in before being able to view the content or interact with the page.
  • In order to configure the viewport, you must add a meta viewport tag to the head of your html document.
    • Google recommends adding the following tag: <meta name=viewport content=”width=device-width, initial-scale=1″>
    • This piece of code is telling the browser that the width of the page should be the same as the screen it is being shown on, and if the device is turned sideways (landscape) the page’s width should adjust to that view.

Size Content to Viewport

  • Sometimes, page content is displayed at a larger width than the specified viewport, which causes the content to be cut off and requires the user to scroll horizontally to view it.
  • The most common cause of this is when the absolute width of an image or other page element it set. For example, the width of an image on the webpage is set to 400 pixels (<img src=example.png style=width:400px; >) but the width of the mobile device it is being displayed on is only 300 pixels.
  • To correct this issue, Google recommends using a relative percentage value for the width (<img src=example.png style=max-width:100%; >).

Size Tap Targets Appropriately

  • Tap targets are links, buttons or forms on a webpage that a user can click on/interact with.
  • It is much more difficult to click a link or button on your smartphone with your finger than on your computer with a cursor. It can be frustrating if a user tries to tap on link but accidentally clicks another because they are too close.
  • To combat this user frustration, Google recommends that your tap targets should be at least 7mm (48 CSS pixels) and should have additional spacing around them if smaller than 7mm.

Use Legible Font Sizes

  • Here, PageSpeed Insights is telling you that the text on your webpage is too small to be easily read on a mobile device.
  • First, Google recommends configuring the viewport (explained above), which will allow fonts to be scaled appropriately across all devices.
  • Additionally, adhere to the following rules to ensure your fonts are legible and sized correctly:
    • Specify your page’s base font size as 16 CSS pixels (body {font-size: 16px}).
    • Define font sizes relative to the base size so headers are larger than the 16-pixel base font. For example, if the H1 font size is specified as 200% (h1{font-size: 200%}), the H1 text will always be two times larger than 16 pixels regardless of the device size.
    • Use a line height of at least 1.2, which will make the space between the lines of text 1.2 times the size of the text itself (p{font-size:120%;line-height:1.2;}).
    • In order to maintain a simple page layout, limit the number fonts and font sizes used.

Avoid App Install Interstitials That Hide Content

  • An interstitial is an overlay that covers the content of a webpage. Specifically, app install interstitials are overlays that promote the website’s app and suggest that the user download it rather than use the mobile site.
  • Interstitials are distracting, can be difficult to dismiss, and can often lead to a poor user experience.
  • As of November 1, 2015, pages that display app install interstitials are not considered mobile-friendly and mobile ranking will likely be negatively impacted if your site uses these interstitials.
  • As alternatives to app install interstitials, Google recommends:

Avoid Plugins

  • Plugins process and allow certain types of media to be displayed on webpages (mostly commonly videos).
  • The most common plugins are Adobe Flash, Microsoft Silverlight and Java.
  • It is best to avoid plugins because:
    • Most mobile devices do not support them.
    • They are a leading cause of hangs, crashes, and security incidents in browsers that do provide support.
    • Most browsers restrict them.
  • Use HTML5 as an alternative to plugins.
    • Check out Google’s developer resource to learn more.

Have user experience improvements had an impact on your site’s traffic?  Find me on Twitter or continue the conversation below.

Share This Post
PREVIOUS POST

5 Ways to Avoid the Most Common Web Design Pitfalls
NEXT POST

Could Comic Sans Be the Key to Mastering Search Engine Optimization AND Website User Experience?
Subscribe to the Digital Marketing Tip!
Get the latest insights and time-tested wisdom from veterans of the digital marketing industry.