[ 마케팅 ] 웹 사이트 속도 확인 및 분석 - Page Speed Insight

포스트 코로나 시대에 접어들면서 웹 사용자가 점점 늘어나고 있습니다. 비대면으로 교육이 이루어지고 점차 웹을 이용해서 쇼핑을 하는 사람들이 늘어나고 있습니다. 이제 인터넷 사용자는 5억 명을 바라보고 있습니다. 물론 북미와 유럽을 중점으로 인터넷이 보급되고 있지만 이제 아시아 및 중국에도 많은 사람들이 인터넷을 사용합니다. 그렇다면 어떻게 홈페이지에 차별화를 두어 운영해야 할까요? 물론 상품과 기능도 중요하지만 우수한 품질이 필요하다고 생각합니다. 실제 로딩 시간이 1초 이상 지연되면 상당수의 고객은 방문한 홈페이지를 떠난다는 보고가 있습니다. 구글은 준비라도 한 것처럼 이런 웹 사이트에 다양한 분석도구를 내놓습니다. 오늘은 그중에 Page Speed Insight라는 도구로 본인의 웹사이트에 문제점이 어떤 건지 파악하는 방법을 알아볼게요.

 

developers.google.com/speed/pagespeed/insights/

PageSpeed Insights

 페이지 분석 

 

▼ 1. Page Speed Insight 웹 사이트로 이동해서 분석에 사용할 웹 사이트 주소를 입력하고 분석 버튼을 누릅니다. 저는 테스트로 네이버 웹 URL을 입력했습니다.

1. Page Speed Insight

---

 

▼ 2. 다음과 같이 웹 사이트 속도 분석 시간이 조금 걸려요. 수 초가 지나면 분석 결과가 나옵니다.

2. 웹 사이트 속도 분석

---

 

 웹 페이지 분석 내용 

 

▼ 3. 웹 사이트 분석이 끝나면 모바일 속도 부터 표시됩니다. 데스크톱 탭을 누르면 화면이 전환됩니다. 각 측정 요소에 따라서 로딩 속도를 개선할 수 있는 방법을 표시해줍니다. 네이버 메인화면은 콘텐츠가 많아서 그런지 품질이 그다지 좋아 보이지는 않습니다.

3. 모바일 속도 분석

---

 

 용어 정리 

 

FID (First Input Delay) - 사용자가 링크를 클릭하거나 버튼을 탭했을 때 최초 입력 지연되는 시간을 나타냅니다. 웹 페이지가 동작하고 어떤 이벤트에 처음 반응하는 상호작용에 대한 속도를 계산합니다.

 

LCP (Largest Contentful Paint) - 사용자가 최초 요청 시점에 표시 영역이 가장 큰 콘텐츠 요소를 그리는데 걸린 시간을 나타냅니다. 이미지가 될 수도 있고 동영상이 될 수도 있습니다. 이 부분 속도에 따라서 최초 반응 속도가 크게 달라질 수 있습니다. 적절한 이미지와 동영상을 사용해야 합니다.

 

FCP (First Contentful Paint) - 최초에 사용자가 화면이 로드되고 있다고 인지하는 상태의 피드백 속도입니다. 일단 사용자가 화면이 로드되고 있다는 것을 알게 되면 이탈률이 줄어듭니다.

 

CLS (Cumulative Layout Shift) - 화면이 다시 그려지는 경우와 그에 따른 평가입니다. 0부터 1까지 적용되며 화면이 여러번 렌더링 될수록 좋지 않은 웹 페이지가 될 수 있습니다.

 

---

 

▼ 4. 아무래도 이미지 용량이나 개선이 사이트 품질을 높일 때 바로 효과가 날 것 같습니다. 웹 사이트에서 어떤 큰 이미지를 사용하는지 한눈에 볼 수가 있습니다. 예전에는 섬네일 이미지를 표시하지 않았는데 지금은 섬네일도 보여주니 바로 직관적으로 알 수 있습니다.

4. 이미지 용량 분석

---

 

▼ 5. 사용하지 않는 자바스크립트나 CSS는 제거하는 것이 좋겠습니다. 그 밖에 속도를 절감할 수 있는 여러 요소를 제안합니다.

5. 속도 개선 요소

---

 

▼ 6. 마지막으로 데스크톱으로 이동해 볼게요. 모바일에 비해서 속도가 좋습니다. 아무래도 보편적인 성능 때문일 것 같은데요. 모바일 서비스는 다양한 환경의 편차를 종합해서 보여줘 그런 것 같습니다.

6. 데스크톱 분석 결과

---

 

아주 자세히 웹 사이트를 개선할 수는 없겠지만 어떤 커다란 문제가 있는지 는 확인할 수 있습니다. 예를 들면 정말 용량이 큰 이미지나 동영상을 로드하고 있는 것은 아닌지 불필요한 리다이렉션이 계속 일어나고 있지는 않는지 등을 확인할 수 있습니다.

 

 Light House 

 

이 구글 속도 분석툴은 라이트 하우스라는 오픈 소스로 만들어졌는데요 다음 웹사이트에 가면 더 자세한 내용을 확인하 실 수 있습니다. 구글 I/O 동영상을 한 번 보시는 것도 추천합니다.

 

developers.google.com/web/tools/lighthouse/

Lighthouse  |  Tools for Web Developers  |  Google Developers