Acing Google의 PageSpeed ​​Insights 평가

게시 됨: 2022-07-22

귀하가 비즈니스 소유자라면 귀하의 웹사이트에 대한 더 나은 검색 순위를 얻는 데 관심이 있을 것입니다. 개발자라면 클라이언트의 요구 사항을 충족하고 순위를 매길 수 있는 사이트를 만들어야 합니다. Google은 검색 엔진 순위 페이지(SERP)에서 웹사이트의 순서를 결정할 때 수백 가지 특성을 고려합니다.

페이지 속도는 2018년 중반에 공식적으로 중요한 순위 속성으로 인용되었습니다. 이 기사에서는 비즈니스 소유자가 주의를 기울여야 하는 성능 점수인 PageSpeed ​​Insights에 대해 설명합니다. 우리는 소프트웨어 개발자가 단일 페이지 애플리케이션과 관련된 것과 같은 복잡한 경우를 개선하는 데 도움이 되는 몇 가지 기술적인 세부 사항에 대해 더 깊이 파고들 것입니다.

Acing Google의 PageSpeed ​​Insights 테스트가 중요한 이유

Google이 2010년에 PageSpeed ​​도구를 도입했을 때 대부분의 웹사이트 소유자는 이 도구를 알게 되었습니다. 사이트를 확인하기 위해 PageSpeed ​​Insights를 열어보지 않은 사람들은 해야 합니다.

이 서비스는 웹사이트가 데스크톱 및 모바일 브라우저에서 어떻게 작동하는지에 대한 세부정보를 제공합니다. 분석 상단에 있는 모바일 및 데스크톱 탭을 사용하여 전환할 수 있다는 사실을 놓치기 쉽습니다.

검색창 아래 중앙에 두 개의 탭이 표시된 Google PageSpeed ​​Insights의 스크린샷. "실제 사용자가 경험한 것을 발견하십시오" 및 "전 세계 실제 사용자의 데이터를 기반으로 사이트 실적을 알아보십시오"라는 두 줄의 추가 텍스트 위에 있습니다.

모바일 장치는 소형이고 배터리 수명을 보존하는 것을 목표로 하기 때문에 웹 브라우저는 데스크톱 운영 체제를 실행하는 장치보다 성능이 낮은 경향이 있으므로 데스크톱 점수가 더 높을 것으로 예상합니다.

큰 기술 회사는 모든 영역에서 적자 점수를 얻지 못하지만 더 적은 예산으로 운영되는 소규모 사이트는 그럴 수 있습니다. 비즈니스 소유자는 경쟁업체 사이트에서 PageSpeed ​​Insights를 실행하고 결과를 자신의 사이트와 비교하여 실적 개선에 투자해야 하는지 확인할 수도 있습니다.

PageSpeed ​​평가를 통과하기에 충분한 점수는 무엇입니까?

PageSpeed는 Core Web Vitals의 지표를 사용하여 합격/불합격 평가를 제공합니다.

이 도구에는 세 가지 점수가 있습니다.

  1. PageSpeed는 성능 문제 진단 섹션에서 색상 원으로 성능 점수를 눈에 띄게 표시합니다. 평균 모바일 또는 데스크톱 장치와 일치하는 특성을 가진 PageSpeed의 내장 가상 머신을 사용하여 계산됩니다. 이 값은 페이지 로드 및 PageSpeed의 가상 머신용이며 Google 검색 엔진에서 고려 되지 않습니다 .

    녹색 원 안에 100점을 표시하는 성능 문제 진단 섹션의 스크린샷.

    이 수치는 개발자가 웹사이트에 변경 사항을 구현할 때 유용합니다. 변경 사항이 성능에 미치는 영향을 확인할 수 있기 때문입니다. 그러나 Google의 검색 엔진은 세부 점수만 고려합니다.

  2. 특정 페이지 및 PageSpeed가 분석한 페이지와 유사하다고 간주하는 페이지에 대한 세부 점수는 Chrome 브라우저가 실제 컴퓨터에서 수집하여 Google에 보내는 통계에서 계산됩니다. 즉, Firefox, Safari 및 기타 Chromium이 아닌 브라우저에서의 성능은 고려되지 않습니다.

    이 URL 탭 아래의 특정 페이지에 대한 세부 점수를 보여주는 스크린샷. 스크린샷은 실패한 Core Web Vitals 평가와 첫 번째 콘텐츠가 포함된 페인트(FCP), 첫 번째 입력 지연(FID), 가장 큰 콘텐츠가 포함된 페인트(LCP) 및 누적 레이아웃 변경(CLS)에 대한 점수를 보여줍니다. CLS 점수는 빨간색 값이고 FCP, FID 및 LCP는 녹색입니다.

  3. 웹사이트의 모든 페이지 에 대한 요약은 단일 페이지 점수와 동일한 방식으로 얻습니다. 액세스하려면 이 URL 탭 대신 출처 탭을 선택하십시오. Origin은 사이트의 메인 페이지(도메인만 해당)를 표시하므로 탭 표시줄 아래에 나열된 URL은 다를 것입니다.

    Origin 탭에서 웹사이트의 모든 페이지에 대한 자세한 점수를 보여주는 스크린샷. 스크린샷은 실패한 Core Web Vitals 평가와 첫 번째 콘텐츠가 포함된 페인트(FCP), 첫 번째 입력 지연(FID), 가장 큰 콘텐츠가 포함된 페인트(LCP) 및 누적 레이아웃 변경(CLS)에 대한 점수를 보여줍니다. FCP 점수는 노란색, FID 및 LCP 점수는 녹색, CLS 점수는 빨간색입니다.

Google은 PageSpeed에서 고려하는 측정항목 목록을 지속적으로 업데이트하므로 웹사이트를 이미 추가했다고 가정할 때 Google Search Console의 경험/핵심 웹 바이탈 섹션에서 가장 중요한 정보를 얻을 수 있습니다.

핵심 핵심 성능 평가를 통과하려면 모든 점수가 녹색이어야 합니다.

스크린샷은 통과된 핵심 웹 바이탈 평가와 첫 번째 FCP(콘텐츠 포함 페인트), FID(첫 입력 지연), LCP(최대 콘텐츠 페인트) 및 CLS(누적 레이아웃 변경)에 대한 점수를 보여줍니다. 네 가지 점수 모두 녹색 값을 갖습니다.

값이 녹색이 ​​되려면 페이지가 테스트에서 75% 이상의 점수를 받아야 하며 많은 사용자가 같거나 더 나은 값을 경험해야 합니다. 임계값은 점수마다 다르며 FID의 경우 훨씬 더 높습니다.

값을 더 잘 이해하려면 점수 제목을 클릭하세요.

제목이 빨간색 상자로 강조 표시된 First Contentful Paint(FCP) 점수의 스크린샷.

주어진 카테고리에 대한 임계값을 더 자세히 설명하는 블로그 게시물로 연결됩니다.

데이터는 28일 동안 누적되며 실제 사용자가 경험할 수 있는 것과는 다른 두 가지 주요 차이점이 있습니다.

  1. 실제 장치의 성능과 인터넷 속도는 다양하므로 이 테스트는 PageSpeed의 가상 머신 결과와 다른 결과를 생성합니다.
  2. 상세 등급은 페이지가 열리는 각 5초 간격에서 최악의 값을 취하여 전체 페이지 수명 동안 계산됩니다.

사이트 사용자 중 많은 수가 인터넷 액세스가 느린 지역에 거주하고 오래되거나 성능이 떨어지는 장치를 사용하는 경우 그 차이가 놀라울 수 있습니다. 이것은 PageSpeed ​​Insights의 개선 권장 사항 중 하나가 아닙니다. 언뜻 보기에는 이 문제를 어떻게 처리해야 하는지 명확하지 않지만 나중에 설명하려고 합니다.

PageSpeed ​​Insights 권장 사항을 사용하여 점수 향상

평가의 주요 부분은 대부분 의 사용자가 페이지를 여는 방식에서 비롯됩니다. 모든 사용자가 웹 사이트를 장기간 방문하는 것은 아니며 대부분이 가끔 웹 사이트를 방문한다는 사실에도 불구하고 모든 사용자가 등급에 고려되므로 모두에게 영향을 미치는 페이지 로드 속도를 개선하는 것이 좋은 출발점입니다.

평가 결과 아래의 기회 섹션에서 권장 사항을 찾을 수 있습니다.

기회 섹션의 스크린샷은 개선을 위한 여러 기회를 표시하며 오른쪽에 초 단위로 예상되는 페이지 로드 절감 효과가 표시됩니다. 이 예에서는 "여러 페이지 리디렉션 방지"로 시작하여 1.56초가 절약되는 것으로 시작하여 0.3초가 절약된 "레거시 JavaScript를 최신 브라우저에 제공하지 마십시오"까지 6가지 권장 사항이 있습니다.

각 항목을 확장하고 개선 사항에 대한 자세한 권장 사항을 얻을 수 있습니다. 많은 정보가 있지만 가장 기본적이고 중요한 팁은 다음과 같습니다.

  • 서버 응답 속도를 향상시킵니다. 예를 들어 공유 호스팅을 사용하는 경우 계획을 업그레이드하거나 가상 사설 서버(VPS) 또는 전용 서버로 마이그레이션하십시오. 또한 모든 호스트가 동일한 것은 아닙니다. 좋은 하드웨어와 가동 시간이 보장되는 안정적인 호스팅을 선택하십시오.
  • 사이트를 여는 데 필요한 트래픽 양을 줄이십시오. 이를 위해 이미지를 최적화된 이미지로 교체할 수 있습니다. 형식 변경, 해상도 및 압축 조정, 필요한 경우 애니메이션 이미지를 정적 이미지로 교체 등입니다. 인기 있는 콘텐츠 관리 시스템에는 이 프로세스를 간단하게 만드는 플러그인이 있습니다.
  • 더 많은 데이터를 캐시하십시오. 이를 수행하는 가장 간단한 방법은 정적 콘텐츠(이미지, 스타일, 스크립트, 변경되지 않는 페이지)에 Cloudflare와 같은 콘텐츠 전송 네트워크(CDN)를 사용하는 것입니다. 캐싱 규칙을 구성하여 성능을 최적화할 수 있습니다.

이제 숙련된 프로그래머가 도움을 줄 수 있는 더 복잡한 요소를 살펴보겠습니다.

페이지 수명 동안 점수를 디버그하는 방법

언급한 바와 같이 Google Search Console은 지난 28일 동안 Chromium 기반 브라우저에서 얻은 평균 점수를 고려하고 페이지의 전체 수명에 대한 값도 포함합니다.

페이지의 수명 동안 무슨 일이 일어나는지 알 수 없다는 것이 문제입니다. PageSpeed의 가상 머신은 페이지가 로드되고 사용자가 페이지와 상호 작용하면 페이지 성능을 설명할 수 없으므로 사이트 개발자는 개선을 위한 권장 사항에 액세스할 수 없습니다.

솔루션은 사용자가 페이지와 상호작용하는 동안 어떤 일이 일어나는지 확인하기 위해 사이트 프로젝트의 개발자 버전에 Google Chrome Web Vitals 라이브러리를 포함하는 것입니다.

이 라이브러리를 포함하는 방법에 대한 다양한 옵션은 GitHub의 README.md 파일에 있습니다. 가장 간단한 방법은 다음 스크립트를 추가하는 것입니다. 기본 템플릿의 <head> 에서 페이지 수명 동안 값을 표시하도록 조정되었습니다.

 <script> (function() { var script = document.createElement('script'); script.src = 'https://unpkg.com/web-vitals/dist/web-vitals.iife.js'; script.onload = function() { // When loading `web-vitals` using a classic script, all the public // methods can be found on the `webVitals` global namespace. webVitals.getCLS(console.log, true); // CLS supported only in Chromium. webVitals.getLCP(console.log, true); // LCP supported only in Chromium. webVitals.getFID(console.log, true); webVitals.getFCP(console.log, true); webVitals.getTTFB(console.log, true); } document.head.appendChild(script); }()) </script>

CLS(Cumulative Layout Shift) 및 LCP(Large Contentful Paint) 계산은 Chrome, Opera, Brave(라이브러리가 작동하도록 Brave Shields 비활성화) 및 Firefox를 제외한 대부분의 기타 최신 브라우저를 포함한 Chromium 기반 브라우저에서만 사용할 수 있습니다. , Mozilla 엔진 및 Apple의 Safari 브라우저를 기반으로 합니다.

스크립트를 추가하고 페이지를 다시 로드한 후 브라우저의 개발자 도구를 열고 콘솔 탭으로 전환합니다.

FCP, TTFB, FID 및 LCP 값을 각각 "name", "value", "delta", "entries" 속성이 있는 개체를 포함하는 콘솔 출력 행으로 표시하는 Google Chrome 브라우저의 콘솔 탭 스크린샷 "와 "아이디". "항목"의 값은 배열입니다.
Chrome 콘솔 탭의 Chrome Web Vitals 라이브러리에서 제공하는 값

모바일 버전에 대해 이러한 값이 계산되는 방식을 보려면 장치 도구 모음을 사용하여 모바일 장치로 전환하십시오. 액세스하려면 브라우저의 개발자 도구에서 Toggle Device Toolbar 버튼을 클릭하십시오.

Google 크롬 개발자 도구 상단의 '요소 검사' 버튼과 '요소' 탭 사이의 '기기 도구 모음 전환' ​​버튼 스크린샷.

이것은 문제를 정확히 찾아내는 데 도움이 될 것입니다. 콘솔에서 행을 확장하면 점수 변경을 유발한 원인에 대한 세부 정보가 표시됩니다.

대부분의 경우 다른 점수에 대한 자동 조언만으로도 점수를 향상시키는 방법에 대한 아이디어를 얻을 수 있습니다. 그러나 사용자 상호 작용으로 페이지가 로드된 후 CLS가 변경되며 특히 단일 페이지 응용 프로그램에 대한 권장 사항이 없을 수 있습니다. 페이지가 검색 엔진에서 고려하는 요소에 대한 평가를 통과하지 못하더라도 성능 문제 진단 섹션에서 완벽한 100점을 볼 수 있습니다.

CLS로 어려움을 겪고 있는 사람들에게 이것은 도움이 될 것입니다. 로그 레코드를 확장한 다음 항목, 특정 항목, 소스, 특정 소스를 확장하고 currentRect 를 previousRect 와 비교합니다.

강조 표시된 currentRect 및 previousRect 값이 있는 로그 레코드의 이미지입니다.

이제 변경된 사항을 확인할 수 있으므로 몇 가지 수정 방법을 식별할 수 있습니다.

누적 레이아웃 이동 줄이기

모든 점수 중에서 CLS는 파악하기 가장 어렵지만 사용자 경험에 매우 중요합니다. 레이아웃 이동은 DOM(문서 개체 모델)에 요소가 추가되거나 기존 요소의 크기나 위치가 변경될 때 발생합니다. 이는 해당 요소 아래에 있는 요소를 이동하게 하고 사용자는 진행 상황을 제어할 수 없는 것처럼 느껴 웹사이트를 떠나게 됩니다.

간단한 HTML 페이지에서 이것을 처리하는 것은 비교적 쉽습니다. 이미지 아래에 있는 텍스트가 로드되는 동안 이동되지 않도록 이미지의 너비 및 높이 속성을 설정합니다. 이렇게 하면 문제가 해결될 것입니다.

페이지가 동적이고 사용자가 애플리케이션과 같이 페이지를 사용하는 경우 다음 단계를 고려하여 CLS 문제를 해결하세요.

  1. 사용자가 버튼이나 링크를 클릭한 후 CLS가 트리거되지 않고 500밀리초 후에 콘텐츠를 표시하도록 페이지를 설정합니다.
  2. 배경, 색상 등 다른 DOM 요소를 이동시키지 않는 매개변수를 변경합니다.
  3. 요소의 크기나 위치를 변경할 때 다른 요소가 이동하지 않는지 확인하십시오.

더 자세한 권장 사항은 Google Developers Optimize CLS 페이지에서 확인할 수 있습니다.

500밀리초로 CLS를 줄이는 방법

500밀리초 임계값을 사용하는 방법을 설명하기 위해 이미지 업로드와 관련된 예를 사용합니다.

일반적으로 사용자가 파일을 업로드할 때 스크립트는 DOM에 <img> 요소를 추가하고 클라이언트 브라우저는 서버에서 이미지를 다운로드합니다. 서버에서 이미지를 가져오는 데 500밀리초 이상이 소요될 수 있으며 레이아웃이 변경될 수 있습니다.

그러나 이미 클라이언트 컴퓨터에 있는 이미지를 더 빨리 얻을 수 있는 방법이 있으므로 500밀리초의 기한이 끝나기 전에 <img> 요소를 만듭니다.

다음은 대부분의 최신 브라우저에서 작동하는 라이브러리가 없는 순수 ECMAScript에 대한 보편적인 예입니다.

 <!DOCTYPE html> <html> <head></head> <body> <input type="file"> <img> <script> document.getElementById('input').addEventListener('change', function() { var imageInput = document.getElementById('input'); if (imageInput.files && imageInput.files[0]) { var fileReader = new FileReader(); fileReader.onload = function (event) { var imageElement = document.getElementById('image'); imageElement.setAttribute('src', event.target.result); } fileReader.readAsDataURL(imageInput.files[0]); } }); </script> </body> </html>

앞에서 보았듯이 이러한 종류의 문제를 해결하려면 정신적 민첩성이 필요할 수 있습니다. 모바일 장치, 특히 저렴한 장치와 느린 모바일 인터넷을 사용하면 성능 최적화의 90년대 기술이 유용해지고 구식 웹 프로그래밍 접근 방식이 우리 기술에 영감을 줄 수 있습니다. 최신 브라우저 디버그 도구가 도움이 될 것입니다.

Google 검색 콘솔 업데이트

문제를 찾아 제거한 후 Google 검색 엔진이 변경 사항을 등록하는 데 시간이 걸릴 수 있습니다. 결과를 조금 더 빠르게 업데이트하려면 Google Search Console에 문제가 해결되었음을 알리세요.

왼쪽 상단 모서리에 있는 검색 속성 상자를 사용하여 작업 중인 페이지를 선택합니다. 그런 다음 왼쪽 햄버거 메뉴에서 Core Web Vitals로 이동합니다.

Google Search Console의 왼쪽 상단 모서리에 있는 검색 속성 드롭다운 상자를 통해 Core Web Vitals 옵션을 표시하는 스크린샷.

모바일 또는 데스크톱 보고서의 오른쪽 상단에 있는 보고서 열기 버튼을 클릭합니다. (두 가지 모두에 문제가 발생한 경우 나중에 두 번째 보고서에 대해 동일한 작업을 반복하는 것을 잊지 마십시오.)

기본 헤더 아래 타임스탬프 아래의 '모바일' 표시줄 오른쪽에 보고서 열기 라벨이 표시된 Google Search Console 핵심 성능 평가 섹션의 스크린샷.

그런 다음 차트 아래의 세부 정보 섹션으로 이동하여 검증 실패 경고가 있는 행을 클릭합니다.

휴대기기에 대한 좋지 않은 결과를 보여주는 Google Search Console 핵심 성능 향상의 세부정보 섹션 스크린샷 점수는 17이고 CLS 문제("0.25 이상(모바일)")로 인해 유효성 검사에 실패했습니다.

그런 다음 이 문제에 대한 세부 정보 보기 버튼을 클릭합니다.

사용자가 "검증 실패" 표시줄 오른쪽에 있는 세부 정보 보기 버튼을 클릭한 후 어떻게 되는지 보여주는 스크린샷. 이 도구는 17개의 영향을 받는 URL을 보고합니다.

마지막으로 새 유효성 검사 시작을 클릭합니다.

기본 Google Search Console 헤더 아래에 있는 '검증 세부정보' 표시줄 아래의 '검증 실패' 표시줄 오른쪽에 있는 새 확인 시작 버튼을 보여주는 Google Search Console의 스크린샷.

즉각적인 결과를 기대하지 마십시오. 확인에는 최대 28일이 소요될 수 있습니다.

유효성 검사 프로세스가 시작되었으며 28일 이내에 완료될 것임을 보여주는 Google Search Console 스크린샷

최적화는 지속적인 투쟁입니다

SEO 최적화는 지속적인 프로세스이며 성능 최적화도 마찬가지입니다. 청중이 늘어남에 따라 서버는 더 많은 요청을 수신하고 응답은 느려집니다. 수요 증가는 일반적으로 사이트에 새로운 기능이 추가되고 성능에 영향을 미칠 수 있음을 의미합니다.

성능 최적화의 비용/편익 측면에서 적절한 균형을 유지하는 것이 필요합니다. 개발자는 모든 사이트에서 항상 최고의 가치를 달성할 필요가 없습니다. 가장 중요한 성능 문제를 일으키는 원인에 집중하십시오. 더 빠르고 적은 노력으로 결과를 얻을 수 있습니다. 주요 기업은 많은 자원을 투자하고 모든 점수를 에이스할 여유가 있지만 중소기업의 경우는 그렇지 않습니다. 실제로 소규모 비즈니스는 Amazon과 같은 업계 거물이 아닌 경쟁업체의 실적과 일치하거나 능가하기만 하면 됩니다.

비즈니스 소유자는 사이트 최적화가 중요한 이유, 작업의 어떤 측면이 가장 중요한지, 작업을 수행하기 위해 고용한 사람들에게서 어떤 기술을 찾아야 하는지 이해해야 합니다. 개발자는 항상 성능을 염두에 두고 고객이 최종 사용자에게 빠르게 느껴질 뿐만 아니라 PageSpeed ​​Insights에서 좋은 점수를 받는 사이트를 만들 수 있도록 도와야 합니다.