Google Core Web Vitals 점수를 향상시키는 방법

(2020 년 8 월 23 일)

다음 시대의 웹 페이지 성능

몇 달 동안 일했습니다. 회사 소유 웹 사이트에서 웹 페이지 성능을 개선하기위한 전략에 대해 설명하고 솔직히 말해서 여러분과 공유 할 수있는 흥미로운 작업입니다.

웹 페이지 성능 작업이 새로운 것이 아니라는 점을 이해합니다. 페이지로드 속도를 높이기 위해 많은 아이디어와 요령을 생각해 냈습니다.하지만 이제는 “더 이상 충분하지 않은 것 같습니다. 다음 단계로 넘어 가야합니다 !!

As SEO (검색 엔진 최적화)의 중요성에 대해 알고 계시고, 구글 결과의 첫 페이지뿐만 아니라 같은 첫 페이지의 상단에 웹 페이지 결과를 가져 오는 것은 정말 대단한 일입니다! 짧게 설명하겠습니다. 앞으로 Google Core Web Vitals는 Google 검색 결과의 SEO 순위에 가장 큰 기여를 할 것입니다.

짧은 & Google Core Web Vitals에 대한 간단한 설명

올해 1 분기에 도입 된 Core Web Vitals는 웹 페이지의 속도, 응답 성 및 시각적 안정성과 관련된 일련의 측정 항목입니다.

Google은 다음을 핵심 웹 필수 요소로 정의했습니다.

  • 가장 큰 콘텐츠 페인트 : 페이지의 기본 콘텐츠를로드하는 데 걸리는 시간입니다. 이상적인 LCP 측정은 2.5 초 이상입니다.
  • 첫 입력 지연 : 페이지가 대화 형이되는 데 걸리는 시간입니다. 이상적인 측정 값은 100ms 미만입니다.
  • 누적 레이아웃 이동 : 시각적 페이지 콘텐츠의 예상치 못한 레이아웃 이동 정도입니다. 이상적인 측정 값은 0.1 미만 입니다.

이 측정 항목 집합은 사이트 소유자가로드, 상호 작용 및 시각적 안정성과 관련하여 제공하는 사용자 경험을 측정 할 수 있도록 도와주세요.

전체적으로, 이후 페이지 실적은 아래와 같이 순위가 매겨집니다.

페이지 성능 측정 항목에 고려되는 전체 측정 항목 목록입니다.

다음 섹션에서는 기본적으로 페이지로드 성능 및 CWV 점수를 개선하기위한 아이디어 또는 방법에 대해 설명합니다.

핵심 웹 필수 점수를 향상시키기위한 팁

다음은 몇 가지 방법입니다. 핵심 Web Vitals 점수를 획기적으로 개선하고 전체 페이지 성능도 개선하는 데 도움이되었습니다.

  1. 브라우저 및 CDN 캐시를 효과적으로 활용합니다. (FID 및 LCP 향상)
    매우 간단한 방법입니다. ch를 통해 FID 및 LCP 점수를 향상시킬 수 있습니다. 정적 자산 이 CDN에서 제공되는지 확인합니다 (AWS의 경우 Cloudfront에서 캐시 할 수 있음). 따라서 리소스를 브라우저로 빠르게 가져옵니다. 두 번째로드 시간을 개선하려면 클라이언트 측에 도달 한 애셋이 브라우저에 캐시되었는지 확인하세요.
    cache-control: max-age=120 — 반환 된 리소스가 120 년 동안 유효 함을 의미합니다. 브라우저가 최신 버전을 요청해야합니다.
    또한 동적 페이지 를 캐시 할 수 있습니다. 애플리케이션 동작에 따라 적절한 TTL 값으로 CDN을 만듭니다.
  2. 미디어 및 광고에 정확한 크기 속성 또는 크기 설정 (CLS 개선)
    이것은 CLS 점수를 향상시키는 데 매우 중요한 사항입니다. 이미지 또는 미디어 태그에 적절한 height:XXpx; width: YYpx가 설정되어 있는지 확인하세요. 다시 말하지만 이것은 적어도 접힌 부분 위에있는 구성 요소에 대해 매우 중요합니다. 이에 대한 지름길은 이미지의 정확한 높이를 얻기위한 아이디어가 부족한 경우 height:auto;로 설정할 수 있다는 것입니다. 미디어와 별도로 사이트에 광고가 표시되는 경우 페이지의 구성 요소를 위아래로 밀어 CLS 점수가 확실히 낮아 지므로 적절한 크기로 적절한 광고 슬롯을 설정했는지 확인하십시오. 따라서 광고도 주시하십시오!
  3. 기기 유형에 따라 적절한 해상도 이미지 지연로드 (LCP 개선)
    이것은 정말 빠른 승리입니다! 웹 페이지에서 페이지의 모든 이미지를 지연로드하는 데 사용할 수있는 지연로드 패키지가 세상에 많이 있습니다.이렇게하면 브라우저에서 페이지를 렌더링하기위한 전체 페이지 무게와로드 시간이 줄어 듭니다. 또 다른 중요한 부분은 장치 유형에 따라로드 할 이미지의 해상도를 미리 정의하는 것입니다. 다른 기기 유형에서 동일한 해상도 이미지를로드해서는 안됩니다.
  4. 웹 페이지에서 SSR 및 CSR을 효과적으로 사용합니다 (FID & LCP)
    Google은 좋은 SEO 가치를 얻기 위해 SSR (Server Side Rendered) 페이지를 홍보하고 장려한다는 것을 알고 있어야합니다.하지만 이상적으로는 SEO 대 페이지로드 성능과의 균형입니다. 페이지가 콘텐츠 측면에서 너무 크고 서버에서 전체 페이지를 렌더링하기로 결정한 경우 페이지뿐만 아니라 전체 페이지를로드하는 데 더 많은 시간이 소요됩니다. 간단히 말해서, 접힌 부분 위에 표시되는 페이지 구성 요소에 대해 SSR 렌더링을 수행하고 접힌 부분 아래에 표시되는 클라이언트 측에서 나머지 구성 요소를 렌더링하는 것이 좋습니다. 이러한 방식으로 사용자는 스크롤없이 볼 수있는 부분에 페이지가로드되고 페이지의 나머지 부분은 사용자 경험을 방해하지 않고 비동기 적으로 렌더링됩니다.
  5. 코드 사용 분할 & 자산을 청크로 분할 (FID & LCP 향상)
    애플리케이션에 거대한 자산 (특히 JS 파일)을 포함하는 것은 항상 좋은 생각이 아닙니다. 따라서 “webpack”과 같은 패키지를 사용하여 무거운 자산을 자산을 비동기 적으로로드하는 작은 덩어리로 분류하는 것이 좋습니다. (h2 프로토콜을 사용하도록 설정 한 경우) 코드 분할 기능을 활용하여 페이지 구성 요소를 단일 HTML 파일로 압축하는 대신 개별 파일로 분류 할 수도 있습니다.
  6. Brotli 압축으로 모든 정적 자산 압축 (LCP 개선)
    Brotli를 사용하여 정적 자산을 압축하여 훨씬 더 나은 공동 자산을 압축하는 것이 좋습니다. 시장에있는 다른 도서관과 비교되는 mpression 비율. 동시에 더 높은 압축률로 Brotli를 사용하면 DevOps 파이프 라인 여정에서 빌드 및 패키지 시간이 확실히 늘어날 것입니다. 저에게는 페이지로드 성능 측면에서 더 나은 가치를 얻고 있으므로 애플리케이션 빌드 시간을 희생해도 괜찮 았습니다.
  7. API 요청을 최적화하고 응답 콘텐츠 (FID & LCP 개선)
    여기에서 이야기 할 때 각 바이트가 중요하므로 고려하는 것이 매우 중요합니다. 페이지 성능. 뒤로 돌아가서 페이지 채우기에 대한 API 요청 & 응답을 확인하는 것을 후회하지 않으실 것이라고 믿습니다. 페이지에 필요한 데이터 만 다시 가져오고 있는지 확인하세요. 실수 할 수있는 또 하나의 어리석은 점은 API 호출이 공개 엔드 포인트를 사용하거나 인터넷을 통하지 않고 내부적으로 자체적으로 호출된다는 것입니다. 이는 항상 시간 측면에서 비싸기 때문입니다. API가 동일한 서브넷 또는 최소한 동일한 네트워크에 호스팅되어있을 때 인터넷을 통해 API를 호출하고 있습니다.
  8. 전체 페이지 / 문서를 줄입니다. 크기 (LCP 향상)
    이상적으로 방문 페이지가 무거 우면 (80Kb가 넘는 페이지를 무거움으로 분류) LCP 점수에 확실히 영향을 미칩니다. 페이지의 가져 오기 및 다운로드 속도가 비례 적으로 증가하기 때문입니다. 따라서 서버 측에서 사용하지 않는 큰 데이터를 가져 오지 않도록하고 페이지를 렌더링하는 데 필요한 데이터 만로드하세요.
  9. NEXT-GEN 이미지 형식 사용 (LCP 향상)
    JPEG 2000, JPEG XR 및 WebP는 이전 JPEG 및 PNG 대응. JPEG 또는 PNG가 아닌 이러한 형식으로 이미지를 인코딩하면 이미지가 더 빨리로드되고 셀룰러 데이터를 덜 소비하게됩니다. 시중의 모든 도구를 사용하여 이미지를 NEXT-GEN 형식의 이미지로 변환하거나 JPEG에서 WebP로 실시간 이미지 변환을 수행하고 브라우저에서 제공 할 수있는 런타임 이미지 서비스를 구축 할 수도 있습니다.
  10. 기본 브라우저 지원 글꼴로 대체 사용 (FID 향상)
    글꼴이 브라우저가 브라우저에서 지원하는 기본 글꼴이 아닌 경우 응용 프로그램에서 사용되는 사용자 지정 글꼴을로드하는 데 브라우저가 지연되면 성능 점수가 실제로 떨어질 수 있습니다.이 경우 빠른 방법은로드 할 때 폴백 방식을 사용하는 것입니다. 브라우저에서 기본적으로 지원하는 글꼴로 글꼴을 만듭니다. 다음은 다른 글꼴과의 대체 접근 방식에 대한 샘플 코드 스 니펫입니다.
@font-face { 
font-family: “Open Sans Regular” "Helvetica", "Arial", sans-serif;
font-weight: 400;
font-style: normal;
src: url(“fonts/OpenSans-Regular-BasicLatin.woff2”) format(“woff2”); font-display: swap;
}

위에 제공된 모든 팁은 애플리케이션에서 점진적으로 구현 될 수 있으며 Core Web Vitals 점수가 실제 사용자로부터 발전하기 전에 언급 한대로 다시 구현할 수 있습니다. 더 이상 “실험실”데이터가 아닙니다. 따라서 대부분 28 일이 소요되는 점수의 향상을 반영하는 데 시간이 걸립니다. Google의 PageSpeed 도구 — https://developers.google.com/speed/pagespeed/insights/ 를 사용하여 CWV 점수를 얻을 수 있습니다.

작품의 모든 성공을 돕고 기원합니다! 건배!

답글 남기기

이메일 주소를 발행하지 않을 것입니다. 필수 항목은 *(으)로 표시합니다