⏰ 프런트엔드 성능을 측정하는 방법은 무엇입니까?

Chrome 개발 도구

PageSpeed Insight

Web page test

📕 Chrome 개발 도구

브라우저에서 오른쪽 클릭 -> 검사.
이전에 이미 사용했을 수도 있지만 실제로 성능을 측정하는 데에도 유용합니다.

1️⃣ 캐시 비활성화 설정

캐시란 무엇입니까? 나는 바나나로 캐시에 대해 썼다

🍌 캐시 = 책상 위의 바나나. 반응 쿼리를 사용한 반응 성능

Kaziu ・ 3월 14일 ・ 2분 읽기

#javascript #beginners #react #frontend

2️⃣ 새로고침

ctrl(Mac에서는 cmd) + r

3️⃣ 네트워크 확인

마감
이 페이지를 표시하는 데 걸리는 시간

DOMContentLoaded
HTML 파일 시간 읽기 및 구문 분석(CSS, 이미지 아님)

로드
로딩 시간을 완전히 마칩니다

.

요청
다운로드한 파일 수

양도
다운로드한 모든 파일의 합계

⭐ 전달된 값이 수십 MB, 수백 MB 정도라면 파일을 줄여야 합니다.

4️⃣ 서버 속도 확인

일부 파일의 폭포수를 클릭하면 모달이 나타납니다.

TTBB(PPAP가 아님)가 중요하며 Time To First Byte를 의미합니다.
-> 서버에서 첫 번째 바이트를 가져오는 시간이므로 적을수록 좋습니다.
-> 많은 수의 TTBB = 서버 또는 네트워크가 느림

(Memory, Performance와 같은 다른 패널에 대한 설명은 뇌에서 너무 복잡하기 때문에 여기에서 생략합니다)

📕 PageSpeed ​​인사이트

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

기본적으로 고객과의 대화의 시작은 그러하므로 PageSpeed ​​Insight가 무엇인지가 중요합니다.

▼ 실적 점수를 얻을 수 있습니다
나는 다른 기사에서 해결책을 쓸 것이다


▼ 이유

📕 웹 페이지 테스트

페이지 속도 통계와 비슷하지만 차이점은

위치 및 네트워크 상태 등을 선택하십시오.

-> 클라우드 환경에서 측정

문제부분 동영상

-> 어느 부분을 고쳐야 하는지 명확하게 알기 쉽다

테스트 결과 URL 공유

->클라이언트가 있으면 소통하기 쉽다.

등등 더 많은 옵션이 있으니 이용하시는걸 추천드려요👍