핵심 성능 보고서: 페이지 경험을 위해 웹사이트를 최적화하는 이유와 방법

게시 됨: 2022-12-08

페이지 성능이 중요하고 웹 사이트에 대해서도 알려주므로 페이지 성능에 주의를 기울여야 합니다. 웹사이트의 예를 들어보겠습니다. 페이지를 로드하는 데 필요한 시간보다 몇 초만 더 걸리면 독자는 다른 웹사이트를 선택할 것입니다.

연구 및 기타 연구에 따르면 페이지 성능이 웹 사이트 순위 지정의 필수 요소가 됨에 따라 Core Web Vitals가 중요한 역할을 하는 것으로 나타났습니다.

따라서 귀하의 웹사이트 또는 웹사이트 페이지의 성능이 좋지 않으면 귀하의 웹사이트 순위가 낮아지고 귀하의 웹사이트가 Google 검색 페이지의 상단에 올 가능성이 없습니다.

여기서는 Core Web Vitals와 관련된 중요한 사항과 더 나은 페이지 경험을 위해 웹 사이트를 최적화하는 데 도움이 되는 방법에 대해 설명합니다. 자, 알아봅시다.

핵심 성능 보고서

Core Web Vitals를 확인하는 것이 왜 중요한가요?

웹사이트에 문제가 발생하여 원하는 잠재고객을 확보하지 못한 경우 핵심 성능 보고서가 문제가 되므로 즉시 확인해야 합니다. 웹 사이트가 부족한 부분과 웹 사이트 페이지에 왜 그런 일이 발생하는지 확인하는 것이 중요합니다.

따라서 SEO 성공을 추적해야 합니다. 수행에 실패하면 페널티를 받아야 합니다.

알고리즘과 순위 요소가 있기 때문에 Google이 웹사이트 순위를 매길 때 고려하는 사항이 많습니다.

검색 엔진이 반응형 웹사이트를 홍보하면 모바일 친화적이지 않은 웹사이트에 불리한 점이 됩니다.

또한 웹사이트 최적화에 노력을 기울이지 않으면 경쟁사 웹사이트를 따라잡기 어려울 것입니다.

따라서 Core Web Vital이 무엇인지 알아보도록 하겠습니다. 자, 알아봅시다.

핵심 성능 보고서는 무엇입니까?

웹 바이탈은 웹사이트 소유자가 웹사이트에서 가장 중요한 사항과 웹사이트를 개선할 수 있는 방법에 집중할 수 있도록 UX 디자인 성능의 혼란스러운 환경에서 일을 단순화하는 것을 목표로 하는 프로세스입니다.

웹 사이트 소유자가 웹 페이지 성능에 대해 알 수 있도록 인터넷의 모든 웹 페이지에 적용되는 웹 바이탈의 하위 집합과 같습니다. 다음은 웹 페이지의 핵심 성능 보고서를 측정하는 데 사용되는 몇 가지 솔루션입니다.

  • 등대
  • PageSpeed ​​통계
  • Chrome 개발자 도구
  • 구글 서치 콘솔
  • Web.Dev의 측정 도구
  • 성능 보고서 Chrome 확장 프로그램
  • Chrome UX 보고서 API

도구는 기능이 다르지만 웹 사이트에서 사용되는 플러그인을 측정하고 작업을 확인하는 데 도움이 되기 때문에 유용합니다. 반면에 다른 도구는 웹 사이트의 성능을 실행하고 웹 사이트의 성능을 확인하는 데 도움이 됩니다.

Google 플랫폼에는 쉬운 도구부터 가장 기술적인 도구까지 다양한 도구가 있습니다. 웹사이트용 도구를 사용하는 방법에 대한 지식과 기술에 따라 다릅니다. 도구와 관련된 지식이 있으면 문제를 해결하기 위해 외부의 도움이 필요하지 않습니다.

Page Speed ​​Insights는 웹 페이지를 확인하고 계산 방법을 볼 수 있으므로 시작하기에 좋은 도구입니다. Page Speed ​​Insight는 Chrome 사용자 경험 보고서의 도움으로 실제 속도 데이터를 사용하여 테스트를 실행했습니다.

Core Web Vitals는 다중 장치 응답성, HTTPS, 팝업 및 기타 여러 기능과 같은 기능을 수행하는 Google의 페이지 경험 지표를 보완합니다.

그러나 핵심 웹 바이탈이 이러한 메트릭을 대체하지 않는다는 점을 기억해야 합니다. 기술 및 응용 프로그램의 발전에 따라 시간이 지남에 따라 변경됩니다.

현재 핵심 vitals에는 다음이 포함됩니다.

  • LCP(Largest Contentful Paint): 로딩 페이지의 성능을 측정하는 데 도움이 됩니다. (로딩 페이지의 시간이 2.5초 미만이면 좋은 페이지로 간주됩니다.)
  • FID(First Input Delay): 메트릭은 웹 사이트와 처음 상호 작용하는 사용자의 로드 응답성을 측정합니다. 100ms 미만이어야 합니다.
  • CLS(Cumulative Layout Shifts)는 페이지의 가시성을 보장하며 우수한 사용자 경험을 위해 웹 사이트의 점수는 0.1 미만이어야 합니다.

핵심 성능 보고서를 위해 웹 사이트를 최적화하는 방법은 무엇입니까?

Core Web Vitals에 맞게 웹 사이트를 최적화하기 전에 웹 사이트 및 웹 사이트의 모든 웹 페이지의 현재 성능을 아는 것이 중요합니다. 따라서 최적화의 첫 번째 단계는 핵심 웹 바이탈 점수를 확인하는 것입니다. 명심해야 할 사항은 다음과 같습니다.

  • Google Page Speed ​​Insights의 도움을 받아 웹사이트의 로딩 속도 및 핵심 웹 바이탈과 같은 필수 항목을 다루는 웹사이트 작업에 대한 보고서를 작성합니다.
  • 핵심 웹 바이탈과 관련된 Google 검색 콘솔의 문제를 추적하고 솔루션이 작동하는지 확인합니다.
  • 사이트의 지표를 확인하고 측정하기 위해 Web Vitals Chrome Extensions로 이동할 수도 있으며 가장 좋은 점은 표준 웹 API를 사용하여 Javascript에서 측정할 수 있다는 것입니다.

핵심 성능 보고서를 향상시키는 방법은 무엇입니까?

Core Web Vitals 측정항목을 실행하면 웹사이트가 어떻게 실행되는지 정확히 알 수 있습니다. 따라서 합격하면 시정 조치에 대해 걱정할 필요가 없습니다.

그러나 몇 가지 개선 사항을 발견하면 웹 사이트에서 고객에게 더 나은 서비스를 제공하는 데 도움이 될 수 있으므로 이를 살펴봐야 합니다. 체크아웃해야 하는 변경 사항 목록은 다음과 같습니다.

1. LCP 최적화

LCP는 간단히 말해서 웹사이트가 페이지를 클릭한 후 사용자에게 주요 콘텐츠를 표시하는 데 걸리는 시간을 말합니다. 시청자가 콘텐츠를 기다려야 하는 것처럼 고객을 웹사이트에 유지하는 데 도움이 됩니다. 그런 다음 그들은 다른 것으로 이동할 것입니다. 2.5초 미만이면 좋지만 웹사이트가 그보다 오래 걸리면 확인해야 합니다.

웹 페이지의 로딩 속도가 빠른 이유는 다음과 같습니다.

  • 느린 웹 호스팅 또는 웹 트래픽 증가로 인해 서버 응답 시간이 느려질 수 있습니다.
  • 렌더링 차단 Javascript 및 CSS(페이지가 완전히 로드될 때까지 콘텐츠를 차단하는 파일)
  • 클라이언트 측 렌더링(이러한 웹 사이트는 브라우저에서 직접 동적 경로를 생성함)
  • 그것을 고치는 방법:
    먼저 최적화되지 않을 수 있는 타사 스크립트(플러그인)를 제거해야 합니다. 이로 인해 웹 사이트 속도가 느려질 수 있습니다.

    • 웹호스팅 업그레이드.
    • 지연 로딩 설정 또는 콘텐츠 전달 시스템 사용.
    • 중요한 웹 페이지 요소 제거.
    • 초기 단계에서 타사 연결 설정.
    • CSS를 축소합니다.
    • 웹사이트 이미지 최적화 및 압축.
    • 웹 페이지가 AMP에 최적화되어 있는지 확인합니다.

    2. FID 최적화

    FID(First Input Delay)는 웹사이트의 페이지 상호작용 속도를 알려줍니다. 간단히 말하면 웹사이트의 클릭과 독자 앞에 콘텐츠가 표시되는 사이의 시간을 말합니다.

    대부분의 블로그와 뉴스 웹사이트는 FID를 심각하게 받아들이지 않지만 로그인 옵션이나 가입 페이지가 있는 웹사이트의 경우 고려해야 할 필수 요소입니다. FID에 대해 더 잘 알고 싶다면 웹사이트의 점수가 100ms 미만이어야 합니다.

    Javascript를 모르면 상황을 수정하는 것이 쉽지 않을 것입니다. 반면에 다음을 수행하여 웹사이트의 FID를 개선할 수 있습니다.

    • Javascript 팽창 최소화
    • 타사 스크립트를 제거하여
    • 웹 작업자의 도움으로

    3. CLS 최적화 상황을 해결하기 위해 적용할 수 있는 사항은 다음과 같습니다.

    • HTML 플랫폼에서 미디어 크기 속성을 정의해야 인터넷 브라우저가 미디어가 차지하는 공간을 알 수 있습니다.
    • 광고를 위해 예약된 공간이 있어야 합니다.
    • 새 UI를 추가할 수 있지만 콘텐츠를 아래로 누르지 않도록 스크롤 없이 볼 수 있는 부분에 유지하세요.
    • 항상 반응형 이미지로 작업하세요.
    • 일부 글꼴은 스타일로 콘텐츠를 숨길 수 있으므로 사용하기 전에 글꼴을 확인하세요. 따라서 텍스트를 테스트하고 적절하게 변경하는 것이 좋습니다.
    • 변환 애니메이션을 사용하는 것이 속성 애니메이션을 사용하는 것보다 항상 더 좋습니다. 레이아웃 변경을 트리거할 가능성이 높습니다.

    Google에서 최적화 제안

    이제 Google의 PageSpeed ​​Insight 도구가 웹사이트의 성능을 개선하기 위한 최상의 권장 사항을 제공하므로 Google의 권장 사항으로 웹 사이트의 페이지 성능을 향상시킬 수 있습니다.

    이러한 사례를 통해 웹 사이트의 로드 시간을 개선할 수 있으며 Core Web Vitals에도 영향을 미치지 않습니다. 따라서 다음 사항을 처리하기 시작하십시오.

    • 차세대 형식으로 이미지 저장
    • 텍스트 압축 활성화
    • 사용하지 않는 JavaScript 및 CSS 제거
    • 렌더링 차단 리소스 제거

    이러한 최적화를 구현하는 방법
    위의 문제를 해결하려면 해당 문제에 대해 알고 개발 방법에 익숙해야 합니다. 따라서 이러한 모든 문제를 해결하고 웹 사이트의 문제를 찾는 데 도움을 줄 개발자를 얻는 것이 좋습니다.

    최적화는 기억할 키워드 프로세스를 나타냅니다. 사이트를 재구축하는 것이 아니라 사이트를 개선하고 최적화하기를 원합니다.

    이와 함께 Google의 처벌도 피하고 싶습니다. 따라서 Core Web Vitals의 최적화를 구현하기 위해서는 전문가의 서비스를 받는 것이 최선의 선택입니다.

    그러나 모든 것을 구현하고 수정하기 전에 문제의 우선 순위를 빠르게 지정하는 것이 가장 좋습니다. 감사부터 시작한 다음 전문가의 조언을 받아 부족한 부분과 문제를 해결하는 방법을 알아보세요.

    결론
    이제 Google의 변경 사항과 웹사이트 순위를 알 수 있습니다. 따라서 상위 목록에 오르려면 Core Web Vitals를 확인하는 것이 필수적입니다. 이러한 빠른 확인은 예상치 못한 순위 하락으로부터 웹사이트를 보호하고 더 많은 고객을 모으는 데 도움이 되는 방식으로 웹사이트를 개선하는 데 도움이 됩니다.

    고객이 많을수록 웹사이트에서 더 많은 수익을 올릴 수 있으며 가장 좋은 점은 전문가를 고용하여 웹사이트를 살펴보고 Core Web Vitals가 올바른 위치에 있는지 여부를 확인할 수 있다는 것입니다.