[12] 블로그 성능 분석 툴 구글 PSI 활용 방법

PageSpeed Insights(PSI)는 웹사이트의 성능을 분석하고 개선 방법을 제안하는 Google의 무료 도구입니다. 모바일과 데스크톱 환경 모두에서 페이지 로딩 속도를 평가하며, 특히 Google 검색 순위에 영향을 미치는 코어 웹 바이탈(Core Web Vitals) 지표를 중점적으로 다룹니다.

 

주요 데이터 구성

PSI는 두 가지 핵심 데이터를 결합하여 종합적인 리포트를 제공합니다.

• 실제 사용자 데이터 (Field Data): Chrome 사용자 경험 보고서(CrUX)를 기반으로 지난 28일 동안 실제 사용자가 겪은 성능을 보여줍니다. -> 이제 막 블로그를 생성하고, 인덱스 생성 요청 중인 우리는 자료가 없어서 아직 사용 못해요.
• 실험실 데이터 (Lab Data): Lighthouse를 사용하여 통제된 환경에서 페이지를 실시간으로 분석하며, 구체적인 디버깅 정보와 개선 제안을 제공합니다. -> 우리는 이 부분에 주목해 살펴 볼 겁니다.

 

핵심 성능 지표 (Core Web Vitals)

검색 엔진 최적화(SEO)와 사용자 경험을 결정 짓는 요소들은 다음과 같습니다. CWB를 측정하는 Lighthouse는 각 지표에 대해 모바일과 데스크톱PC에서의 성능 '양호' 기준을 다음과 같이 제시하고 있습니다. 특히 모바일 환경에서이 성능 개선을 강조합니다.  

지표	의미	모바일/PC 양호 기준
FCP (첫 콘텐츠 페인트)	첫 이미지 또는 텍스트가 나타나는 데 걸린 시간	3초/1.8초 이하
LCP (최대 콘텐츠 페인트)	가장 큰 이미지 또는 텍스 블록이 화면에 나타나는  데 걸린 시간	4초/2.4초 이하
TBT (총 차단 시간)	사용자 클릭/탭에 반응하는 데 걸린 시간	600ms/350ms이하
CLS (누적 레이아웃 이동)	로딩 중 화면 요소가 흔들리는 정도	0.25 이하
SI (색인 속도)	콘텐츠가 시각적으로 표시되는 데 걸린 시간	5.8초/2.3초 이하

 

성능 개선을 위한 주요 권장사항

리포트 하단의 '진단' 및 '통과한 감사' 섹션에서 구체적인 조치 방법을 확인할 수 있습니다.

• 이미지 최적화: WebP와 같은 차세대 포맷을 사용하고, 적절한 크기로 압축하여 전송량을 줄입니다. 테스트 해보니까 .jpg 포맷보다 .webp 포맷을 쓰면 파일 크기가 약 5% 정도 더 작아집니다. 참고로 셔터스톡 홈페이지에서 무료로 JPG 파일을 WEBP 포멧으로 변환할 수 있습니다.
• 렌더링 차단 리소스 제거: 페이지 초기 렌더링에 필요 없는 자바스크립트나 CSS는 defer나 async 속성을 사용하여 나중에 로드합니다.
• 서버 응답 시간 단축: 서버 로직 최적화나 CDN 활용을 통해 첫 바이트 소요 시간(TTFB)을 줄입니다.
• 브라우저 캐싱 활용: 정적 리소스에 캐시 정책을 설정하여 재방문 시 로딩 속도를 높입니다.

 

사용 팁

• 모바일 점수 우선: Google은 모바일 우선 인덱싱을 사용하므로, 일반적으로 더 낮게 나오는 모바일 점수를 먼저 개선하는 것이 SEO에 유리합니다.
• 종합 점수의 의미: 90~100점은 '양호', 50~89점은 '개선 필요', 50점 미만은 '나쁨'으로 분류됩니다. 구글 애드센스 관점에선 '양호' 이상이면 되지만, 가급적이면 점수가 높은게 좋습니다. 
• 데이터 부족 시: 트래픽이 적은 페이지는 실제 사용자 데이터가 표시되지 않을 수 있으며, 이 경우 '원본 요약(Origin Summary)'을 통해 사이트 전체의 평균 성능을 참고할 수 있습니다. 

분석하고 싶으신 특정 웹사이트의 URL이 있나요? 입력해 주시면 더 구체적인 최적화 방안을 도와드릴 수 있습니다.

 

 

나의 블로그 성능 분석하기

1. 구글 페이지 스피드 인사이트에 접속합니다.

 

2. 측정할 블로그 주소를 입력(예 - andanteai.kr)하고 [분석]을 클릭합니다. 측정 결과가 나오는 데 1~2분 걸릴 수 있습니다.

 

3. 성능 측정 결과는 모바일과 데스크톱으로 나뉘어 표시됩니다.

 

3. 화면을 아래로 스크롤 하면서 CWV 지펴의 결과값을 확인 하세요.

 

4. 현실적인 딜레마

결과 값에서 우리가 바꿀 수 있는 것은 이미지의 크기를 줄여서 FCP와 LCP를 줄이는 것이 전부입니다. 또 이것이 블로그 성능을 좌우하기도 합니다. 

 

현재 jpg 형식으로 이미지(썸네일)를 삽입 중이므로 대체로 양호하게 측정될 겁니다.

하비만 측정값이 표의 그준과 비교해 너무 크게(표의 값에 근접) 나오면, 이미지 크기를 좀 더 줄여 보세요.

방법 1. 사집 앱에서 이미지의 가로 크기(썸네일은 1:1 비율일 때 400~500픽셀 권장, 2:1 또는 16:9 등일 때는 500~600픽셀 권장))를 되도록이면 낮은 값(1:1은 400, 가로형은 500)으로 변경하여 파일 크기를 줄여 주세요.

 

방법 2. 셔터스톡 홈페이지에서 jpg를 webp 형식으로 바꿔 사용하세요.