구글 PageSpeed Insights 를 사용하여 웹사이트 성능 문제 진단하기

구글 PageSpeed Insights 를 사용하여 웹사이트 성능 문제 진단하기

1)구글의 PageSpeed Insights 웹페이지로 이동합니다.
https://pagespeed.web.dev/

PageSpeed Insights

 

 

2)성능을 진단하려는 웹페이지 URL를 입력하고 분석하기를 클릭합니다.

3)휴대전화 또는 데스크톱을 선택하고 분석 결과를 확인합니다.

성능 (Performance)

여러가지 지표를 종합하여 페이지 로딩 속도와 안정성을 평가합니다.
FCP (First Contentful Paint) -  사용자가 페이지에 접속한 후 브라우저가 텍스트 또는 이미지 등 첫 번째 콘텐츠를 렌더링하기 시작할 때까지 걸린 시간
LCP (Largest Contentful Paint, 최대 콘텐츠 렌더링 시간) - 웹페이지 내에서 가장 크기가 큰 주요 콘텐츠(메인 이미지 또는 큰 텍스트 블록 등)가 화면에 완전히 로딩될 때까지 걸린 시간. 사용자 체감 페이지 로딩 완료 시간

Speed Index (속도 색)인 - 페이지가 로드되는 동안 콘텐츠가 화면에 시각적으로 채워지는 속도를 측정하는 지표
TBT (Total Blocking Time, 총 차단 시간), CLS (Cumulative Layout Shift, 누적 레이아웃 이동) 등

인사이트 및 진단에서는 개발자가 페이지를 어떻게 수정 및 개선 할수있는지 구체적인 피드백을 제공합니다. 성능에 대한 인사이트 및 진단에서는 페이지 로딩 속도와 안정성을 직접적으로 개선할 수 있는 팁을 제공

 

예를들어 사용하지 않는 자바스크립트 줄이기를 선택하면 해당 진단에 대한 구체적인 방법 및 피드백을 확인할수있습니다.

https://developer.chrome.com/docs/devtools/coverage?utm_source=lighthouse&utm_medium=lr&hl=ko

 

 

접근성 (Accessibility)

사이트의 접근성을 개선하기위한 사항들을 표시합니다. 예를들어 텍스트와 배경의 색상 대비가 명확한지 여부 등

권장사항

웹사이트가 현대적인 웹 표준을 잘 따르고 있는지, 보안 취약점은 없는지, 사용자에게 안전하고 신뢰할 수 있는 환경을 제공하는지 등을 평가합니다.

검색엔진 최적화 점수

사이트가 검색엔진 최적화 권장사항을 따르는지 평가합니다. 

https://developers.google.com/search/docs/appearance/structured-data?utm_source=lighthouse&utm_medium=lr&hl=ko

 

같은 방법으로 데스크톱에 대해서도 성능 문제에 대해 진단하고 인사이트를 얻을수있습니다.

https://developers.google.com/speed/docs/insights/v5/about