"How to Use Google Page Speed Test"

 

Introduction

Google Page speed test is an important test to determine  end user experience on website and different bottlenecks. This has also become an important parameter for the ranking of website pages by different search engines.  The report generated by Google page speed test is comprehensive and provide meaningful actions items for improving end-user experience

 

Step 1: Test Execution

 

1.   Go to URL:  https://developers.google.com/speed/pagespeed/insights. Enter the webpage inside the textbox below Step 1. In this example bestseoservicesdelhi.com/seo is used as reference for illustration purpose
2. The page may take approx. 30 seconds to 2 minutes to generate the result. The result will be divided into two separate tabs for Mobile and Desktop
3. By default, result will be displayed for Mobile device
4. Performance score: The scores are given out of 100. Please note this score does not indicate speed, rather this is an indication for the optimization which can be done for improving end user experience. A lower score will indicate more scope for optimization. The objective should be always to score 90+. However, the optimization is dependent on the type of website. Hence, a comparison can be done with similar websites

Step 2: Analyze results/Corrective Actions

 

5.      The result will be displayed into 2 sections. The first section will be “Field Data”. This is the data which google gathers while end user is browsing the website. This is the real end user experience

6.      Google has identified three vital statistics to measure end user experience

First Contentful Paint (FCP):  This is the is measured by the time browser takes to start the paint process for the first element of HTML

a.      Images: A important strategy in case of image display is to ensure the usage of progressive and optimized (size) images. For e.g. refer  https://bestseoservicesdelhi.com and review the display of image to understand the usability of progressive images. Online website like https://miniimagesvideos.com can be used to generate progressive images and optimize the size

b.      Ensure that the scripts which are not useful for the initial page display are

First Input Delay: This is the delay in the response of the application which user interacts with the website. A good value should be below 100 milliseconds

a.      Reasons for high FID: The delay is mainly while device is busy trying to download/parse script from website. Generally, download of such script is an async operation. However, this will always hinder the user interaction of end user, since device is busy in operations related to script.  For e.g. many website display ads which download in the background/async. Avoid display of ads for end user with lower bandwidth. Chrome/IE provides API which can be used to measure bandwidth of end user (https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/downlink). A general thumb rule is to avoid display of ads for users with bandwidth less then 3 MBPS. The overall idea is to adapt content according to bandwidth

b.      Improvement: Script evaluation/parsing is a very expensive operation. As per observations parsing/evaluation are big bottlenecks for mobile devices. Ensure that the scripts are highly optimized

9.     Largest Contentful Paint (LCP): This is the time taken page’s main content has likely loaded. This means it does not include content like ads which are loaded async manner.  Fast LCP gives the impression to the user that the page is useful. A good value should be below 2.5 seconds. The following are the important attributes which could help with fast LCP

a.      Ensure website server response time is optimized

b.      Ensure content delivery over network is compressed. For e.g. webservers like Apache or Tomact or nginx can be configured to deliver gzip compressed content.  This will reduce the bytes to be delivered across network by 50% to 70%.

c.      Ensure to use content delivery network (CDN). This will ensure that static content like images/videos are delivered to end user from a near by location, which will reduce the network latency. May content delivery network also provide the option to cache and compress the static content for fast response. Ensure to check the same with CDN

Cumulative Layout Shift: A layout shift occurs any time a visible element changes its position.  Refer https://web.dev/cls/ to understand details

a.      Reasons/Corrective actions: The primary reason for shift is asyc download of stylesheet. Browser will initially paint the content with some default attributes. However, once stylesheet is parsed then it may try to repaint which can produce the shift of html elements or change. The stylesheet can also change the font of the content which can result into shift of the content. Ensure to complete the download of the stylesheet before browser start the process to paint. The quick solution is to download stylesheet inline and before the html content display start

b.      Third Party HTML blocks: Many developers use Google ads on the website. The size provisioned for such blocks is not fixed. Hence, such division tends to be dynamic which can shift the screen. A shift on the screen is not considered good for end user experience. A creative solution will be to provide fixed space for third party HTML DOM elements

11.   Click on “Show Origin Summary”. This will provide an average for the field data for the entire website. For e.g. in this example we have used https://bestseoservicesdelhi.com/seo as an example. The option for “Show Origin Summary” will provide average of the pages from domain https://bestseoservicesdelhi.com. This can be useful metrics for comparison of individual pages with the average across the domain

 

12.   Lab Data: This will provide the data for the site with some simulation test which google lighthouse tool will run against the website. Please note the data for “Lab Data” will be different from “Field Data”.  This is due to condition in which both the tests are conducted. For e.g. field data which is collected the end user experience may have very slow internet connection

 

Step 3: Opportunity/Improvements

 

1.      Opportunity: This section will suggest some options which can be used to improve performance

2.      “Remove Unused Script”: This improvement can be very helpful in improving. However, please ensure to do appropriate analysis. This recommendation is limited till page is loaded completely. The script may be required for further user interaction with the site. Additionally, if third party script are called then there is no control on such scripts

3.      “Reduce Initial Server Response Time”:  This is the time taken by the server to provide response to the request from user. This will be dependent on the type of website. An appropriate metrics could be comparison with similar website

4.      “Minimize main thread work”:  This is the thread which will parse and load the main HTML page. The suggestion is to reduce the work for this thread by avoiding the work which can deferred for later. For e.g. Java Script which can be loaded in an asych manner without having any impact to loading of the page

5.       “Reduce the impact of third-party code”: If there are any third-party scripts then check if any optimization can be done while working with third party or an appropriate replacement can be done

6.       “Reduce Java Script execution time”: Determine if the script executing can be optimized

7.      “Server static content with efficient cache policy”:  A very good strategy could be caching the script, css, images for long duration. However, do not cache the base HTML document. If there is any change in the script or css or image or css, then change the name of the file and accordingly change the code in the base HTML document

8.      “Avoid Chaining Critical Request”: Chaining is created when different objects are retrieved online. Do not create dependency between different objects like image, css, scripts. If possible use async for images and scripts. However, do not use sync for CSS as this may increase CLS for page 

 

 

 

9.      “Passed Audits: Properly sized images”:  Images with high size reduce the performance of page. Online website like https://miniimagesvideos.com  can be used to optimize the size of images

10.   “Defer Offscreen Images”: The strategy will be to load the images when they are visible on the screen. This is called lazy loading. Include the script https://raw.githubusercontent.com/aFarkas/lazysizes/gh-pages/lazysizes.min.js in your page for implementation of lazy loading of images on the webpage

11.   Minify CSS: The strategy is to remove any comments, empty spaces from script, html, css. Online sites like https://www.minifier.org/ can be used. The gain is not expected to be significant, specially if gzip compression is used for content. However, any bytes saved is an improvement

  

 

 

 

 

 

12.    “Efficiently Encode Images”:  The best option for web enabled application is to use JPEG format. PNG can be heavy in size. If there is an option to deliver the images format according to browser then webp, JPEG XR format can be used for chrome and IE respectively. This will generally reduce the size of images by 10 – 20%

13.   “Efficient Encode Images”: JPEG 2000, JPEG XR, WebM are the next generation format of images and provides higher compression as compared to JPEG or PNG. However, these formats are not compatible with all the platforms. Please ensure to test the images format on different platforms like chrome, IE, firefox, android, IOS before using

13.   “Enable Text Compression”: Deliver the text content in the compressed format. For e.g. webservers like Apache or Tomact or nginx can be configured to deliver gzip compressed content.  This will reduce the bytes to be delivered across network by 50% to 70%. Another popular compression which can be used is brotli compression.  This will provide additional 10% compression as compared to gzip. However, please note brotli only works on chrome. A brotli plugin is available for nginx webserver. This means nginx can be configured to deliver compressed (gzip or brotli) content according to client compatibility

14.   “Avoid Multiple Redirects”: Too many redirects can reduce the load time of webpage. This will increase the bounce rate of the page. Hence, need to ensure that redirects are reduced to zero

 

 

 

15.   “Use video formats for animated content”:  Most of the times it will be appropriate to use MP4 as compared to GIF format

16.   “Avoids enormous network payloads”: For e.g. compress content for delivery over network, use next generation format images, optimize size of images

17.   “Avoids an excessive DOM size”: The root cause for excessive DOM size could be related to too many HTML elements. Look for opportunities to reduce/remove the elements