Google PageSpeed ​​Insights의 결과를 분석하는 방법

Google이 속도가 빠른 웹사이트의 순위를 높일 예정이므로 Google PageSpeed ​​인사이트에 대해 더 알고 싶으십니까?

…그리고 혼란스럽기 때문에 나는 놀라지 않는다!

이 기사가 도움이 될 것입니다.

웹사이트 페이지 속도가 왜 중요한가요?

Google은 사용자에게 가능한 최고의 사용자 경험을 제공하고자 합니다.

웹 사이트가 느리면 사용자를 좌절시키고 나쁜 사용자 경험을 만듭니다. 간단합니다. 성능은 경험에 영향을 미칩니다.

구글은 최근 핵심 웹 바이탈이 2021년 순위 알고리즘의 일부로 사용될 것이라고 발표했습니다. 이러한 핵심 웹 바이탈은 속도와 사람들이 귀하의 페이지와 얼마나 빨리 상호작용할 수 있는지를 나타내는 지표입니다.

기본적으로 아래 표의 경우 '빨간색'일 수 없습니다.

Google PageSpeed ​​Insights란 무엇입니까?

웹페이지 URL을 입력하고 빠르게 테스트를 실행하여 성능과 관련된 다양한 측정항목을 확인할 수 있는 Google에서 제공하는 무료 도구입니다.

그런 다음 도구는 페이지에 0~100점 범위의 점수를 부여합니다. 점수는 실제로 속도에 관한 것이 아닙니다. 속도 향상에 대한 Google의 일반적인 권장 사항을 사용한 경우 점수를 높일 수 있습니다.

또한 페이지 속도를 늦추는 정확한 매개변수와 개선 방법에 대한 제안을 보여줍니다.

이것은 일이 기술적이고 이해하기 어려운 결과를 얻는 곳입니다.

결과를 어떻게 해석합니까?

테스트를 실행한 후 가장 먼저 보는 것은 분석된 페이지의 성능 점수(데스크톱 및 모바일)입니다.

0에서 100 사이의 숫자가 됩니다.

• 0 ~ 49 – 이것은 좋지 않습니다. 점수가 49 이하가 되는 것을 원하지 않습니다.
• 50~89 - 괜찮지만 개선의 여지가 있음
• 90에서 100 – 이 척도에 속한다면 좋은 책에 속합니다.

아래로 스크롤하면 높은 점수 또는 낮은 점수의 원인이 무엇인지 확인할 수 있습니다.

참고: 각 섹션 전에 색상 표시기를 참조하십시오.

• 녹색은 빠름을 의미합니다.
• 주황색은 보통을 의미
• 빨간색은 느림을 의미합니다.

각 섹션의 의미는 다음과 같습니다.

첫 번째 콘텐츠전체 페인트

이것은 브라우저에서 페이지로 이동한 후 콘텐츠가 렌더링되기 시작할 때까지 걸리는 시간입니다.

기본적으로 페이지가 로드되기 시작했음을 나타내는 표시기입니다.

예를 들어, 페이지의 배경색, 표시된 이미지 또는 텍스트 부분인 색상 변경일 수 있습니다.

이는 사용자가 어떤 작업을 볼 때 페이지가 완전히 로드될 때까지 기다릴 가능성이 더 높기 때문에 중요합니다.

지침:

대화형 시간

이 매개변수는 페이지가 대화형이 되는 속도를 보여줍니다.

이는 사용자가 메뉴 버튼을 클릭하는 것과 같이 사용자가 실제로 상호 작용할 수 있도록 화면에 충분한 요소를 표시하는 페이지를 의미합니다.

때때로 웹사이트는 가시성에 초점을 맞출 수 있습니다. 즉, 사용자에게 좌절감을 줄 수 있는 콘텐츠와 상호 작용하기 전에 모든 것을 표시하는 것입니다.

지침:

총 차단 시간

웹사이트 방문자가 화면에서 콘텐츠를 보는 시간과 콘텐츠와 상호작용할 수 있는 시간 사이에는 간격이 있습니다.

이것은 총 차단 시간입니다!

웹사이트가 상호작용하기 전에 사람들이 마우스 클릭, 화면 탭 또는 키워드 누르기와 같은 일을 할 수 없는지 아는 것이 좋습니다.

긴 작업은 50ms 이상 당신을 차단하는 작업입니다.

50ms 이상이면 차단 시간으로 간주됩니다.

긴 작업이 없으면 위의 통계에서 볼 수 있는 차단 시간이 0으로 표시됩니다.

누적 레이아웃 이동

레이아웃 전환은 시각적 요소가 화면에 표시된 후 이동하는 경우입니다.

예를 들어 뉴스를 읽고 있는데 레이아웃이 변경되어 뉴스 기사가 있는 위치가 변경되었습니다.

이는 사용자 관점에서 예상치 못한 동작입니다.

점수가 높을수록 나쁜 것입니다.

속도 지수

이것은 이해하기 어렵지만 귀중한 것입니다.

따라서 둘 다 1.5초 만에 로드되는 2개의 웹사이트를 상상해 보십시오.

위 이미지에 표시된 2개의 웹사이트를 탐색했다면 어느 웹사이트가 더 빨리 로드되나요?

둘 다 1.5초 만에 완전히 로드되었지만 첫 번째 사이트가 더 일찍 일부 요소를 표시하기 시작했기 때문에 사용자에게 더 빠른 것처럼 보였습니다.

로드 시간만 측정하면 동일합니다.

속도 지수는 웹사이트가 완전히 로드되는 '빠른' 정도에 따라 계산된 점수입니다.

로드의 비디오 녹화는 비트가 로드될 때 시각적으로 표시하는 데 사용됩니다.

다양한 간격으로 화면(스크롤 없이 볼 수 있는 부분)에 표시되는 콘텐츠의 양을 완전히 로드된 웹사이트에 표시되는 콘텐츠와 비교하여 특정 시간 동안 표시되는 콘텐츠의 비율을 계산합니다.

이 과정이 몇 번 반복됩니다.

시간은 사용자가 화면(뷰포트)에서 볼 수 있는 것만 기반으로 합니다. 스크롤 없이 볼 수 있는 부분은 중요하지 않습니다.

따라서... 다른 뷰포트로 시도하는 것이 좋습니다.

2개의 웹사이트가 있고 한 웹사이트가 다른 웹사이트보다 먼저 시각적 요소를 표시하는 경우 더 낮은 속도 지수 점수로 끝납니다.

낮을수록 좋습니다.

가장 큰 콘텐츠가 있는 페인트

페이지의 가장 큰 요소가 완전히 렌더링되는 데 걸리는 시간입니다.

페이지가 로드되면 첫 번째 요소가 가장 큰 요소가 되지만 더 큰 요소가 추가되면 이 요소가 대체됩니다.

페이지의 마지막 요소는 페이지의 가장 큰 요소(예: 큰 이미지)일 수도 있고 아닐 수도 있습니다.

참고: 화면에서 차지하는 공간을 말하는 것이 아닙니다.

다음은 2개의 예입니다.

웹사이트가 표시되기 시작한 시간부터 페이지의 마지막 이미지가 표시될 때까지의 시간은 가장 많은 콘텐츠가 포함된 페인트로 간주됩니다. 이미지가 페이지에서 가장 많은 공간을 차지하기 때문입니다!

하지만…

아래의 경우 '인스타그램' 이미지가 가장 큰 이미지로 표시되었으므로 가장 큰 콘텐츠가 있는 페인트는 마지막 두 번째 화면이 로드되었을 때입니다.

마지막 화면이 할인됩니다. 그 화면에 추가된 것은 '인스타그램'보다 작은 이미지인 '구글 플레이 버튼'뿐이었다.

Google에 따르면 좋은 사용자 경험을 제공하려면 페이지가 처음 로드되기 시작한 후 2.5초 이내에 LCP가 발생해야 합니다.

지침:

기회

기회 섹션에는 페이지 로드 시간을 개선하는 데 도움이 될 수 있는 제안 사항이 표시됩니다.

또한 각 제안은 권장 사항을 구현한 경우 페이지의 예상 로드 시간 감소를 보여줍니다.

진단

진단은 구현을 고려해야 하는 웹 개발의 모범 사례를 강조합니다.

그러나 이러한 개선 사항을 적용하더라도 페이지 성능 점수에 직접적인 영향을 미치지는 않습니다.

요약

웹사이트 속도를 향상시키는 것은 방문자에게 더 나은 경험을 제공하는 것입니다. 빠르게 로드되는 사이트는 사용자와 검색 엔진 모두를 행복하게 하지만 방문자를 고객으로 전환하는 능력에도 영향을 미칩니다.

Google PageSpeed ​​Insights와 같은 도구는 웹사이트 성능을 향상시키기 위해 어디서부터 시작하고 어떤 문제에 집중해야 하는지 보여주기 때문에 매우 유용합니다.

이 기사가 이 도구의 작동 방식과 테스트 결과가 실제로 의미하는 바를 이해하는 데 도움이 되었기를 바랍니다. 따라서 방문자에게 놀라운 경험을 제공하기 위해 웹 페이지 최적화를 시작할 수 있습니다.