재미로 웹 사이트 속도 측정해보기, PageSpeed Insights

PageSpeed Insights

PSI(PageSpeedInsights)는 Chrome UX보고서에서 페이지의 실적을 나타내고 성능 최적화를 제안하는 도구입니다.

측정항목(FCP  및 DCL)의 중앙값은 CrUX 보고서에서 모니터링한 모든 페이지와 비교됩니다. 

• 빠름 : 측정항목의 중앙값이 로드되는 모든 페이지 중 가장 빠른 1/3입니다.
• 느림 : 측정항목의 중앙값이 로드되는 모든 페이지 중 가장 느린 1/3입니다.
• 평균 : 측정항목의 중앙값이 로드되는 모든 페이지 중 중간 1/3입니다.

전체 속도 점수는 각 측정항목의 카테고리에 따라 계산됩니다.

• 빠름 : 페이지의 모든 측정항목이 빠른 경우
• 느림 : 페이지의 측정항목 중 느린 것이 있는 경우
• 평균 : 기타 모든 경우

PSI(PageSpeed Insights)에서는 페이지가 일반적인 성능 권장사항을 얼마나 잘 따르는지 평가하고 0~100의 점수로 계산하여 성능 개선 여지를 추정합니다. 이를 통해 두 가지 영역에서 페이지의 성능을 개선할 수 있는지 평가합니다.

• 스크롤 없이 볼 수 있는 부분을 로드하는 데 걸리는 시간 :사용자가 새 페이지를 요청한 순간부터 브라우저에서 스크롤 없이 볼 수 있는 부분의 콘텐츠가 렌더링될 때까지 걸린 시간
• 전체 페이지를 로드하는데 걸리는 시간 : 사용자가 새 페이지를 요청한 순간부터 브라우저에서 페이지가 완전히 렌더링될 때까지 걸린 시간

페이지 통계

이 섹션에는 페이지에서 렌더링 차단 리소스를 로드하는 데 필요한 왕복 횟수, 페이지에서 사용하는 총 바이트수 및 왕복 횟수와 데이터세트에서 사용된 바이트의 중앙값을 비교하는 방법이 설명되어 있습니다. 이때 페이지의 스타일과 기능을 수정하면 페이지가 더 빨라질 수 있는지 나타낼 수 있습니다.

아래는 하나의 사이트를 분석한 결과 

이 페이지는 전체 페이지 중 중간 1/3에 속합니다. 느림 카테고리가 FCP는 30%, DCL은 40%에 해당됩니다.

최적화 권장사항

• 이미지 최적화
  이미지의 형식을 적절하게 지정하고 압축하면 데이터 용량을 크게 줄일 수 있습니다.
  
  

• 브라우저 캐싱 활용
  정적 리소스에 대한 HTTP 헤더에 만료일 또는 최대 수명을 설정하면 브라우저가 이전에 다운로드된 리소스를 네트워크를 통해서가 아닌 로컬 디스크로부터 로드합니다. 

• 자바스크립트 축소
  자바스크립트 코드를 압축하면 데이터 용량을 크게 줄여 다운로드 및 파싱 속도를 높일 수 있습니다.

• HTML 축소
  HTML 코드(본문 자바스크립트 및 그 안에 포함된 CSS 포함)를 압축하면 데이터 용량을 크게 줄여 다운로드 및 파싱 속도를 높일 수 있습니다.
  
  
• 서버 응답 시간 단축
  테스트 결과 서버가 응답하는 데 0.22초이(가) 걸렸습니다.
  서버 응답 시간이 느려지는 요인에는 여러 가지가 있습니다. 권장사항에서 서버가 어디에 가장 많은 시간을 소모하는지 모니터링하고 측정하는 방법을 자세히 알아보세요.

---

리소스(HTML, CSS, 자바스크립트) 압축

개요

압축은 브라우저에서 리소스를 처리하는 방식에 영향을 주지 않고 불필요하거나 중복된 데이터를 삭제하는 과정을 말합니다. 예를 들어 코드 주석 및 형식 지정, 사용되지 않는 코드 삭제, 더 짧은 변수와 함수 이름 사용하기 등의 과정이 있습니다.

자세한 내용은 사전 처리 및 상황별 최적화를 참조하세요.

다음과 같이 HTML, CSS, 자바스크립트 리소스를 압축합니다.

HTML을 압축하려면 HTMLMinifier를 사용해 보세요.

CSS를 압축하려면 CSSNano 및 csso를 사용해 보세요.

자바스크립트를 압축하려면 UglifyJS를 사용해 보세요. Closure Compiler도 매우 효과적입니다. 이러한 압축 도구를 사용하는 빌드 프로세스를 생성하여 개발 파일을 압축하고 이름을 변경한 다음 운영 디렉토리에 저장할 수 있습니다.

다른 방법으로 PageSpeed 모듈은 Apache나 Nginx 웹 서버와 통합되어 리소스를 압축하고 사이트를 자동으로 최적화합니다.

PageSpeed Insights는 사용자 환경 보고서 데이터를 분석해주는 도구입니다.

이번에 사이트 속도 이슈가 나와서 사이트 성능 향상을 위해 어떤 작업들이 있는가에 대해 알아보았습니다.