블로그 또는 웹사이트를 잘 운영하기 위해서는, 우리 페이지를 방문하는 사용자의 경험을 충족시키는 것이 매우 중요합니다.
사용자의 경험을 올리려면 웹사이트 성능 최적화는 필수입니다. 오늘은 웹사이트 최적화에 큰 도움이 되는 지표와 정보를 제공하는 Google PageSpeed Insights의 장점과 활용법에 대해 알아보도록 하겠습니다.
Google PageSpeed Insights란?
구글에서 제공하는 도구로 웹사이트의 속도와 성능을 분석하고 개선 방안을 제시합니다. PSI는 데스크톱과 모바일 환경에서 각각의 페이지 성능을 점수화하여, 더 나은 웹사이트 품질과 속도를 유지할 수 있도록 돕습니다.
웹사이트 최적화에 영향을 주는 지표를 제공하여, 웹사이트를 더 개선할 수 있는 조언을 얻을 수 있습니다.
특징
1.사용자 경험 기반 분석
웹사이트 방문자가 느끼는 실제 성능(First Contentful Paint, Largest Contentful Paint)을 측정합니다.
2.모바일 & 데스크톱 성능 점수 제공
PC뿐 아니라, 모바일에서의 성능이 어떤지 점수를 파악할 수 있습니다.
3.구체적인 개선 조언
렌더링 차단 리소스 제거, 이미지 최적화, 캐싱 활성화 등 웹사이트 성능 개선을 위한 디테일한 제안을 받을 수 있습니다.
4.무료 이용 가능
회원가입없이 내 사이트의 URL만 입력하면, 손쉽게 웹사이트 성능에 관한 지표를 확인할 수 있습니다.
장점
일단 PageSpeed Insights 도구를 이용하여 웹사이트 성능 최적화에 심혈을 기울이게 되면 얻을 수 있는 여러 가지 장점이 있습니다.
1.SEO(검색 최적화) 향상
빠른 속도를 가진 웹사이트는 검색 엔진으로부터 SEO에 좋은 점수를 받을 수 있습니다. 높은 SEO 점수는 검색 엔진에서의 웹사이트 순위 상승으로 이어집니다.
2.사용자 만족도 증가
웹사이트 속도는 사용자의 사이트 이탈 유무를 결정하는 중요한 요소이므로, 빠르게 페이지가 로드된다면 사용자는 더 오래 페이지에 머무를 확률이 올라갑니다.
3.핵심 웹 지표(Core Web Vitals) 제공
LCP(Largest Contentful Paint), FID(First Input Delay), CLS(Cumulative Layout Shift)와 같은 웹사이트 성능에 영향을 주는 중요 데이터를 직관적으로 확인해볼 수 있습니다.
Google PageSpeed Insight 도구를 통한 웹사이트 성능 개선 방법
그러면 Google PageSpeed Insights 도구에서 제공하는 여러 웹사이트 성능 지표에 대해 알아보고 그에 따른 웹사이트 성능 개선 전략에 대해 알아보도록 하겠습니다.
1.점수 시스템
해당 도구는 웹사이트의 PC, 모바일 버전 각각에 대하여 0~100 범위의 점수를 생성합니다. 이 점수는 웹사이트 전반의 성능과 속도, 사용자 경험을 종합하여 반영하여 웹사이트 성능의 최적화 상태를 보여줍니다.
- 0~49점: 웹사이트 성능이 현재 매우 좋지 않음을 나타냅니다. 상당한 최적화가 필요한 상태입니다.
- 50~89점: 웹사이트 상태가 어느 정도 양호하지만, 개선의 여지가 있어 추가적인 최적화가 필요합니다.
- 90~100점: 탁월한 웹사이트 성능을 보여주고 있습니다. 99점, 100점이라고 완벽한 웹사이트 최적화가 되었다는 뜻은 아닙니다.
성능(Performance): 웹사이트의 속도와 효율성을 측정하는 점수로, 페이지 로드 시간 및 사용자 경험과 관련된 다양한 요소를 평가합니다.
접근성(Accessibility): 웹사이트가 모든 사용자, 특히 장애를 가진 사람들에게 얼마나 접근 가능한지를 평가합니다. 대비, 버튼 크기, 키보드 네비게이션 등이 그 고려사항들입니다.
권장사항(Best Practices): 웹사이트가 보안, 최신 기술 사용, 사용자 데이터 보호 등과 같은 보안 및 안정성을 잘 따르고 있는지 평가합니다.
검색엔진 최적화(SEO): 홈페이지 내에 SEO 관련 설정과 메타 정보가 잘 들어가 있는지, 해당 페이지가 얼마나 쉽게 크롤링하고 색인화하기 쉽게 되어있는지 평가합니다.
2.핵심 웹 바이탈
구글은 웹사이트 평가에서 핵심 웹 바이탈이라는 3가지 주요항목을 체크하고 있습니다.
- LCP(Latest Content Paint):
페이지 주요 콘텐츠가 표시되는 시간을 말합니다. 2.5초 이하를 목표로 하는 것이 좋습니다.
개선방법: 이미지 크기 최적화, 서버 응답 시간 단축
- FID(First Input Delay)
사용자가 첫 상호 작용 시 지연되는 시간을 말합니다. 100밀리초 이하를 목표로 합니다.
개선방법: Javascript 실행 시간을 단축합니다.
- CLS(Cumulative Layout Shift)
누적 레이아웃 변경 시간을 의미하는데요. 레이아웃이 표시되는 도중에 누적된 콘텐츠가 중간에서 표시되어 레이아웃이 변경되는 것을 말합니다. 이 수치가 너무 커지면 사용자 경험을 저해합니다.
개선방법: 이미지와 광고 영역에 고정 크기를 설정합니다.
3.렌더링 차단 리소스
페이지 렌더링을 지연시키는 요소는 복잡한 CSS 또는 Javascript 코드 파일에서 발생하는 경우가 많습니다.
CSS 및 JS 파일을 축소 및 간결화하는 작업을 합니다. 브라우저 캐싱을 통한 반복 요청을 줄입니다.
4.이미지 최적화
이미지는 페이지 로딩에 영향을 미치는 큰 요인 중 하나입니다.
품질 저하가 적은 이미지 압축을 실행하거나, 반응형 이미지 사용, 이미지 로드 지연 활성화(Lazy Loading)를 합니다.
이미지 파일 확장자는 JPG나 PNG가 아닌 WebP로 변환합니다.
이미지 최적화 프로그램 Caesium Image Compressor 설치 및 사용방법 보러가기5.서버 응답 시간(TTFB)
이것은 서버 자체의 속도과 품질에 영향을 많이 받습니다.
따라서, 호스팅을 통해 웹사이트를 운영하고 있다면 신뢰할 수 있는 품질이 좋은 호스팅 업체를 선택하는 것이 중요합니다.
패스트코멧 호스팅 가성비와 서버 성능을 모두 갖춘 호스팅 업체 추천6.캐싱 전략
브라우저 캐싱 또는 CDN(콘텐츠 전송 네트워크)를 이용하는 것은 웹사이트가 데이터 전송에 쓰는 용량 부담을 줄입니다.
워드프레스 사이트의 경우 캐시 플러그인 사용을 통해, 캐싱 최적화를 할 수 있습니다.
7.모바일 최적화
구글은 웹사이트의 모바일 버전의 성능 또한 매우 중요시 여깁니다.
가독성이 높은 폰트 설정, 반응형 디자인, 터치 버튼 위치 조정 등을 사용자 친화적으로 최적화합니다.
Chrome DevTools와 같은 다양한 기기에서 사이트를 테스트하면 좋습니다.
Chrome DevTools 사이트 바로가기마무리 결론
이상으로 Google PageSpeed Insights 도구를 통해 알 수 있는 웹사이트 성능 요소와 개선 방법에 대해 알아보았는데요. 처음 해당 내용들은 접한다면, 분명 이해하기 쉽지 않기도 하고 최적화 방법을 적용하는 것도 매우 어려울 수 있습니다.
저 또한, 효과적이고 빠른 웹사이트 블로그를 구축하기 위해 많은 시행착오와 어려움을 겪었는데요. 각 웹사이트 성능 요소에 대한 최적화 방법을 손쉽게 적용하기 위한 글들을 참고하셔서 좀 더 수월하고 빠르게 훌륭한 성능을 내는 웹사이트 구축을 하시길 바랍니다.
<추가로 볼만한 글>
LiteSpeed Cache 플러그인으로 5분만에 웹사이트 속도 향상시키기웹페이지 로딩 속도 중요성과 개선 방법 보러가기
