DEV Community

Kaziu
Kaziu

Posted on

⏰ How to measure frontend performance?

📕 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


network

2️⃣ Reload

ctrl(cmd on Mac) + r

3️⃣ Check Network

inspect bottom

  • 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
waterfall
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!
Enter fullscreen mode Exit fullscreen mode

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
page speed insight

▼ reasons
opportunity

📕 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 👍

Discussion (0)