Tuesday, 15 January 2019

How to Test Web Performance with Lighthouse

Performance testing is the process of determining and verify an application's speed, robustness, reliability, and correct sizing. It examines several indicators such as a browser, page and network response times, server query processing time, number of acceptable concurrent users architect, CPU memory consumption, and number/type of errors which may be encountered when using an application.

Why should you test the performance of your system?

It will help you and your team to know deeply about your system's levels expected in production, as well as deliver a positive user experience. Application performance is a key determinant of adoption, success, and productivity.
As it can be cost prohibitive to have to solve a production performance problem, continuous performance testing strategy optimization is the key to the success of an effective digital strategy.

When should it be test?

You will always need to check your performance exactly before and after you have updated your system. Its help you to know and analysis what code that have impact to your performance. If the deployment makes performance slower, then you have an option to revert it (if performance is your concern area). 
But, how if you want to make sure that it always on the right score? and how to know how is your page score? 

What is the tools?
Have you heard about Lighthouse? This is an open source tools from Google which help user to audit their web performance by analyze the page and give the score. 
You can install it by add chrome extension here and just one click to know your page score. It will help to see the score, asset size, first meaningful pain and etc. Here, we will talk about this tools.

How to use Lighthouse?


  1. Make sure you already enable your extension to work on incognito mode by setting the extension.
  2. Open your pages on Chrome browser with incognito mode, for example amazon.com
  3. Click on Lighthouse icon on the right corner, and wait it done.
    Generate Report
  4. After it done, it will show you the result of the audit, like this
    Audit Result by Lighthouse
  5. Now, we just need to analyzed the score from the result. 
To do this automatically everyday, or whenever you want, you can get the code from open source library here. They make some configuration to schedule an automation, and you can store it on your database to make a great data of your performance result day by day.

This audit will be great for you that implement PWA (Progressive Web App) .

How to read the score ?
Each Performance audit that contributes to your score has its own scoring methodology. Lighthouse maps each raw score to a number between 0 and 100. The scoring distribution is a log normal distribution derived from the performance metrics of real website performance data on HTTPArchive.

First Meaningful Paint (FMP) audit measures when a user perceives that the primary content of a page is visible.

Speed Index is a page loading performance metric that shows how quickly the page material is filled. The lower the value, the better.

First Contentful Paint (FCP) measures the time from navigation to the time when the browser renders the first bit of content from the DOM. This is an important milestone for users because it provides feedback that the page is actually loading.

Time to Interactive , Page loading is a key aspect of how users perceive the performance of your page. This audit identifies the time when the page seems to be quite ready so users can interact with it.

How the Performance score is weighted

The metrics that contribute to the Performance score are not equally weighted. See Scoring Details to see how each Performance audit is weighted. The heaver-weighted audits have a larger impact on your overall Performance score. 
The overall Performance score is a weighted average of these audits. See Weighted Averages Without Percentages to learn how weighted averages work. 

How the Performance score is color-coded
The color-coding maps to these Performance score ranges:
0 to 49 (slow): Red
50 to 89 (average): Orange
90 to 100 (fast): Green


Note:
Still working on making this article better


Source:
Lighthouse Scoring Guide
Performance testing
Performance Testing Tutorial: What is, Types, Metrics & Example
Performance Testing: Test Types, Automation, and Agility

No comments:

Post a Comment