핵심 Web Vitals - 무엇이며 어떻게 개선할 수 있습니까?

Google은 2020년에 Web Vitals라는 새로운 프로그램을 도입했습니다. 이것은 품질 신호에 대한 지침을 제공하는 기술을 나타냅니다. Google에 따르면 이러한 측정항목은 웹에서 우수한 사용자 경험을 제공하는 데 매우 중요합니다. 2021년 5월, Google은 핵심 웹 바이탈을 플랫폼의 검색 순위 측정 기준으로 사용하기 시작했습니다.

핵심 웹 바이탈이란 무엇입니까?

핵심 성능 평가는 사이트에서 사용자 경험을 측정하기 위한 메트릭입니다. 사용자가 웹 사이트와 상호 작용하는 속도와 검색을 기반으로 얻는 결과를 측정합니다. Core Web Vitals는 사이트 방문자가 사이트를 탐색하는 것이 얼마나 쉽고 원활하게 이루어지는지를 평가하는 신호 역할을 합니다.

사이트와 사용자 경험을 개선하면 핵심 성능 평가 지표를 사용하여 페이지 경험 점수가 더 높아집니다. Google은 사이트 소유자가 알고 통합해야 하는 세 가지 핵심 성능 평가 측정항목을 식별합니다. 이것들은 아래에 열거되어 있습니다:

로딩: LCP(Large Contentful Paint)라고도 하는 로딩은 가장 큰 요소가 사이트에 로드되고 표시되는 속도를 측정합니다. 이러한 요소에는 애니메이션, 비디오, 텍스트, 이미지 등이 포함됩니다.

상호 작용: Google은 이를 CLS(누적 레이아웃 이동)라고 하며 웹 사이트의 콘텐츠를 사용할 때 사용자의 주의를 산만하게 하거나 방해할 수 있는 예기치 않은 기능이나 혼란스러운 움직임이 웹 사이트의 페이지에 없도록 합니다.

시각적 안정성: 이는 기술적으로 FID(First Input Delay)라고 하며 사이트 방문자가 처음으로 상호 작용할 때 사이트 페이지의 응답 수준을 반영합니다. FID는 또한 브라우저가 사이트의 사용자에 대한 결과를 생성할 수 있는 속도를 측정합니다.

웹사이트에서 핵심 Web Vital을 개선하는 방법

가장 먼저 해야 할 일은 빠른 웹사이트 성능 분석을 실행하여 핵심 웹 바이탈 메트릭에서 웹사이트가 어떻게 운영되는지 확인하는 것입니다. 이 분석에는 Google Search Console 및 Page Speed ​​Insights 등 다양한 도구를 사용할 수 있습니다. 분석을 실행한 후 사이트를 개선하는 데 도움이 되는 다음 팁 중 일부를 구현해야 함을 발견할 수 있습니다.

• JavaScript 실행 감소

FID 등급이 낮다는 것은 웹사이트 페이지가 방문자와 300밀리초 이상 상호작용한다는 것을 의미합니다. JavaScript 실행을 줄이고 최적화하면 브라우저가 JavaScript 코드를 실행하는 시간 간격이 줄어듭니다. 그 결과 실행 시간이 단축됩니다. 실행을 줄이기 위해 사용하지 않는 JavaScript를 연기하는 것이 좋습니다. 사이트에 사용되지 않은 JS가 있는지 확인하려면 다음 단계를 따르세요.

• 사이트로 이동하여 아무 쪽이나 마우스 오른쪽 버튼으로 클릭한 다음 "검사"를 선택합니다.

• "출처" 탭을 클릭하고 하단에 있는 세 개의 점을 확인합니다. "Coverage" 도구를 추가하고 로드 기능을 클릭합니다. 로드가 완료될 때까지 기다리면 페이지에서 사용되지 않은 JS의 양을 볼 수 있습니다.

이 지식을 바탕으로 JS 실행을 줄일 수 있습니다. 실행을 줄일 수 있는 한 가지 방법은 코드 분할을 사용하는 것입니다. 어떻게 작동합니까? JavaScript 번들을 더 작은 비트로 나눕니다. 번들 JS는 웹 페이지를 로드하는 데 필요한 너무 많은 HTTP 요청을 방지하기 위해 번들로 제공되는 결합된 파일입니다.

이미지 압축 및 최적화

많은 웹사이트에서 이미지는 페이지에서 가장 큰 요소입니다. 웹사이트가 로딩 측정항목을 통과하도록 하려면 사이트의 이미지 최적화를 고려해야 합니다. 이를 통해 웹 페이지가 가벼워지고 로딩 속도가 크게 빨라집니다.

페이지가 더 가벼워지면 사용자 경험, LCP 점수 및 검색 엔진 결과의 순위도 향상됩니다. 페이지 크기를 줄이려면 Tiny JPG와 같은 도구를 사용하여 이미지를 압축하십시오. 페이지의 전체 크기를 줄여도 해상도와 품질에는 영향을 미치지 않지만 사이트의 LCP 결과는 향상됩니다.

그래픽의 경우 PNG 형식을 사용하고 풍경 이미지의 경우 JPG를 사용하는 것이 좋습니다. 이미지 압축 외에도 사이트 이미지에 대해 CDN(콘텐츠 전송 네트워크)을 활성화할 수도 있습니다.

Content Delivery Network는 웹의 콘텐츠를 저장하는 전 세계 서버 그룹입니다. 이러한 서버는 여러 위치에 분산되어 있습니다. 사용자에게 가장 가까운 서버에서 더 빠르게 이미지를 전달할 수 있습니다.

지연 로딩 구현

지연 로딩을 구현하는 것은 사이트에 이미지를 표시할 때 매우 중요합니다. 이 기술을 사용하면 핵심 웹 바이탈 점수와 사이트의 사용자 경험이 부정적인 영향을 받지 않습니다. 그렇다면 지연 로딩은 무엇일까요? 지연 로드를 사용하면 사용자가 페이지를 아래로 스크롤하는 동시에 사이트에서 이미지를 로드할 수 있습니다. 이렇게 하면 사이트의 로딩 속도가 저하되지 않고 최고의 LCP 점수 수준을 달성할 수 있습니다. 지연 로딩과 관련된 많은 이점이 있습니다. 여기에는 다음이 포함됩니다.

• 사이트 성능 향상

• 대역폭 사용 제한

• 사이트의 SEO 개선

• 사이트 방문자 유지 및 이탈률 최소화

많은 동영상, 애니메이션, 이미지 및 기타 무거운 요소가 포함된 페이지로 웹사이트를 운영하는 경우 지연 로딩을 사용하는 것이 중요합니다. 이 팁을 구현한 후 이전 LCP 점수를 지연 로딩을 구현한 후 얻은 새 점수와 비교할 수 있습니다.

삽입 및 이미지에 적절한 치수 사용

0.1보다 높은 CLS 점수는 불량으로 간주됩니다. 이러한 낮은 점수의 주요 원인은 임베드, 광고 및 차원이 없는 이미지와 같은 무거운 요소입니다. 사이트의 CLS 점수를 높이려면 치수에 주의하십시오. 이미지와 임베드에 정확한 너비와 높이를 사용하면 브라우저가 로딩 과정에서 페이지에 적절한 양의 공간을 할당하기가 더 쉬워집니다. 웹사이트에 YouTube 동영상을 삽입할 때 이미지와 임베드의 크기를 적절하게 설정했는지 확인하세요. YouTube의 동영상 크기를 조정하여 사이트에 표시하는 방법은 다음과 같습니다.

• YouTube로 이동하여 사이트에 포함할 비디오를 엽니다.

• 공유 버튼을 찾아 <> 포함 옵션을 선택합니다.

• 차원을 포함하여 비디오에 대한 모든 세부 정보를 볼 수 있습니다. 코드를 복사하여 사이트의 백엔드에 붙여넣습니다. 이렇게 하면 사이트에 올바르게 맞도록 올바른 너비와 높이로 변경됩니다.

마지막 생각들

다음은 웹사이트의 핵심 웹 바이탈을 개선하는 데 사용할 수 있는 최고의 팁입니다. 이 게시물에서는 핵심 웹 바이탈의 기본 사항과 점수 향상에 사용할 수 있는 팁을 살펴보았습니다. 점수가 향상되면 검색 결과에서 순위가 ​​올라가고 사이트 이탈률이 크게 높아집니다.