- 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
2️⃣ Reload
ctrl(cmd on Mac) + r
3️⃣ Check Network
Finish
How long it takes to show this pageDOMContentLoaded
reading and parsing HTML file time (not CSS, images)Load
Finish loading time completelyRequests
number of downloaded filesTransferred
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
📕 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 👍
Top comments (0)