⏰ How to measure frontend performance?

• Chrome dev tools
• PageSpeed Insight
• Web page test

📕 Chrome dev tools

on browser right click -> inspect.
maybe you have used already it before, it's useful to measure performance as well actually

1️⃣ Setting disable cache

What is cache? I wrote about cache by banana

🍌 Cache. React performance with react-query

Kaziu ・ Mar 14 '22

#javascript #beginners #react #frontend

2️⃣ Reload

ctrl(cmd on Mac) + r

3️⃣ Check Network

• Finish
  How long it takes to show this page

• DOMContentLoaded
  reading and parsing HTML file time (not CSS, images)

• Load
  Finish loading time completely

• Requests
  number of downloaded files

• Transferred
  Sum of all downloaded files

⭐ If transferred value is like dozens of MB or hundreds of MB, you should reduce files.

4️⃣ Check server's speed

click waterfall of some file, then modal will be appeared

TTBB(not PPAP) is important, it means Time To First Byte.
-> Time to get first Byte from server, so less is better.
-> large number of TTBB = server or Network is slow

(Here I omit explanations of other panels like Memory,Performance because it will be so complicated in your brain)

📕 PageSpeed Insight

🤷‍♀️ client - Kaziu sensei, score of our website is 62 in PageSpeed Insight... 
could you do something?
😎 me - Yes sir!

Basically start of conversation with client is like that, so it's important what is PageSpeed Insight.

▼ You can get score of performance
I will write solutions in other article

▼ reasons

📕 Web page test

it's like pagespeed insight, but differences are

• Choose location and network status and so on

  -> measure on cloud environment

• Video clip of problem part

  -> it's easy to get clearly which part should I fix

• Share url of test result

  ->If you have client, it's easy to communicate

and more options exists, so I recommend you to use it 👍