What's the performance metrics of your app?

[ArfatSalman]

Instructions

In this issue, you are going to benchmark your website for performance using a couple of tools. The metrics generated by the tools can be used to focus your efforts towards the most affected areas. The metrics and whether they measure real-world user-based performance are subject to some debate. However, we are going to assume for now that the metrics generated by these tools are reliable.

The idea is to optimize metrics that are low.

Requirements

• [x] Benchmark your website using the Chrome's Lighthouse developer tool. Screenshot the results and comment below.
  • Score of 95-100 in all categories is considered good.
• [x] Benchmark your website using PageSpeed Insights Screenshot the results and comment below.
  • What's the difference between PageSpeed and Lighthouse?
• [x] What's the web vitals? Report your times as comments below.
• [x] Benchmark your website using WebPageTest. Screenshot the relevant results and comment below.
  • The device config to select is the default one and Moto G4 - Chrome

Resources

• How To Use WebPageTest and its API
• Google PageSpeed Insights: The Truth About Scoring 100/100
• Recipes for Performance Testing Single Page Applications in WebPageTest
• React Performance Improvements
• Google Lighthouse Performance Audits

[tusharlanger]

• Lighthouse Benchmark | Report Screenshot:

• PageSpeedInsights Benchmark | Report Screenshot:

• WebVitals Screenshot:

• WebPageTest | Report Screenshot:

[ArfatSalman]

This looks good. You should see why the Lighthouse benchmark is low.