웹사이트의 핵심 Web Vitals를 개선하는 10가지 방법

SEO 점수를 높이는 것은 지속적인 과정입니다. 끊임없이 변화하는 웹사이트의 역학으로 Google 및 기타 검색 엔진은 페이지 순위 알고리즘을 계속 변경합니다. 지금까지 아무도 Google이 페이지 순위를 매기는 방식을 완전히 해독할 수 없었습니다. Google이 SEO 점수를 계산하는 데 사용하는 확인된 매개변수가 많이 있지만 전체 프로세스가 매우 복잡합니다. SEO 커뮤니티가 코드 크랙에 가까워질 때마다 Google은 페이지 순위 향상을 위한 해킹이나 바로 가기를 제거하는 업데이트를 제공합니다.

전통적인 SEO는 콘텐츠에서 유기적으로 가능한 한 많은 키워드를 사용하는 것에 더 가깝습니다. 이미지는 크기에 맞게 최적화되었으며 대체 텍스트가 추가되었습니다. H1, 메타 태그, 메타 설명이 계속 업데이트되었습니다. 시간이 지남에 따라 백링크의 중요성도 커졌습니다. 사람들은 신뢰할 수 없는 출처에 많은 백링크를 버리는 블랙햇 SEO에 의존하기 시작했습니다. 이를 완화하기 위해 Google은 양보다 백링크의 품질을 우선시하기 시작했습니다. 콘텐츠에서도 비슷한 일이 일어났습니다. 콘텐츠가 많을수록 SEO가 더 좋다는 생각으로 2000~3000단어 기사를 작성하던 시절이 있었습니다. 이를 완화하기 위해 Google은 콘텐츠의 품질과 권위를 우선시하기 시작했습니다.

그러나 웹사이트의 수와 SEO 대행사의 수가 증가함에 따라 Google은 최상의 결과를 제공하기 위해 두 단계 앞서 있어야 한다는 것을 깨달았습니다. 최신 업데이트에서 Google은 페이지 경험을 순위의 최상위 기준 중 하나로 추가했습니다. 이는 사용자에게 인터넷에서 검색 결과로 사용할 수 있는 최상의 웹 페이지를 제공하기 위해 수행됩니다. 페이지 결과의 품질이 좋을수록 더 많은 사람들이 Google을 좋아하고 계속 Google에 의존하게 됩니다.

최신 Google 업데이트에 따라 페이지 순위 알고리즘에 대해 다음 Web Vitals에 크게 의존합니다.

핵심 웹 바이탈:

• 최대 함량 페인트(LCP)
• 첫 번째 입력 지연(FID)
• 누적 레이아웃 시프트(CLS)

비핵심 Web Vitals:

• 총 차단 시간(TBT)
• 첫 번째 콘텐츠가 포함된 페인트(FCP)
• 속도 지수(SI)
• 인터랙티브 시간(TTI)

핀

핵심 Web Vitals 디코딩:

평신도 용어로 설명하기 위해 핵심 Web Vitals는 웹 사이트의 속도, 응답성 및 시각적 안정성과 관련된 사용자 측 메트릭으로 간주될 수 있습니다. 이러한 필수 요소는 웹 사이트가 사용자에게 얼마나 좋은 경험을 제공하는지 측정합니다.

핀

Core Web Vitals는 다음과 같은 이유로 중요합니다.

• 방문자는 빠르고 원활하게 로드되는 웹사이트를 좋아합니다.
• 방문자는 검색 쿼리 결과와 일치하는 부분에 빠르게 도달하기를 원합니다.
• 웹사이트 트래픽의 상당 부분이 모바일 장치에서 발생하므로 반응형 사이트의 중요성이 높아집니다.
• 사용자는 자신이 서클에서 속고 있고 그것을 좋아하지 않는다는 것을 이해할 만큼 똑똑해졌습니다.
• Google은 Core Web Vitals 알고리즘을 설정하는 데 많은 리소스를 사용했으며, 따라서 SEO에서 중요한 역할을 하게 되었습니다.
• 많은 사람들이 이 새로운 변화를 이해하지 못하므로 핵심 성능 평가를 최적화하여 선점자의 이점을 활용하고 순위를 높여야 합니다.

최대 함량 페인트(LCP):

Core Web Vitals의 첫 번째 메트릭은 사이트 로드 속도를 나타냅니다. 이를 위해 Google은 웹사이트의 가장 큰 콘텐츠를 결정합니다. 영웅 이미지, 헤더 텍스트 또는 비디오 블록이 될 수 있습니다. 그런 다음 웹 페이지가 이 가장 큰 콘텐츠를 화면에 표시하는 데 걸리는 시간을 측정합니다. 웹사이트에 이상적인 LCP는 2.5초 미만이어야 합니다.

핀

첫 번째 입력 지연(FID):

Core Web Vitals의 두 번째 측정항목은 웹사이트의 응답성과 사용 용이성을 측정합니다. 웹사이트가 사용자의 상호작용에 응답하는 데 걸리는 시간을 기록합니다. 예를 들어 사용자가 "지금 쇼핑" 버튼을 클릭하면 FID는 웹사이트가 이 사용자 작업에 응답하는 데 걸리는 시간을 측정합니다. Google은 웹사이트의 FID 점수가 100밀리초 미만이기를 원합니다.

핀

누적 레이아웃 이동(CLS):

Core Web Vitals의 세 번째 메트릭은 웹 페이지의 전반적인 시각적 안정성을 판단합니다. 웹사이트는 부분적으로 로드되기 때문에 이미지나 동영상과 같은 무거운 콘텐츠를 로드하는 데 시간이 더 오래 걸리고 로드할 때 다른 콘텐츠를 아래로 밀어 나쁜 사용자 경험으로 이어지는 경우가 있습니다. CLS는 시간 제한이 있는 메트릭이 아닙니다. 대신 두 프레임 사이를 이동하는 요소의 수를 기반으로 계산됩니다. Google은 웹 사이트에서 이러한 불안정한 요소를 줄이고 CLS 점수를 0.1 미만으로 유지할 것을 주장합니다.

핀

웹사이트의 핵심 Web Vital을 측정하는 방법:

웹사이트의 핵심 성능 평가를 확인하는 가장 좋은 방법은 Google Search Console을 사용하는 것입니다. 먼저 웹사이트의 검색 콘솔로 이동해야 하며, Enhancements 섹션 아래의 왼쪽 메뉴 모음에 Core Web Vitals에 대한 탭이 표시됩니다.

핀

보고서는 웹 페이지가 아닌 전체 웹 사이트에 대한 결과를 생성합니다. 그러나 모든 Core Web Vitals에 대한 다양한 세부 정보를 제공합니다. 다양한 탭을 가지고 놀 수 있고 대시보드는 기기와 관련된 결과, 웹사이트가 부족한 부분, 점수를 높이기 위해 해야 할 일을 알려줍니다. 다음 리소스에서 핵심 성능 평가 점수를 확인할 수도 있습니다.

• 등대
• PageSpeed ​​통계 보고서
• 크롬 개발 도구
• web.dev 측정
• Chrome의 Web Vitals 확장 프로그램
• 크롬 UX 보고서 API

웹사이트의 핵심 Web Vitals를 개선하는 방법:

1. 느린 서버 응답 시간 제거:

핀

서버가 웹사이트의 부하를 감당할 만큼 충분하지 않으면 LCP 메트릭에서 비참하게 실패하게 됩니다. 서버가 코드 정보를 제공하는 데 시간이 오래 걸릴수록 웹 페이지가 화면에 렌더링되는 데 더 많은 시간이 걸립니다. 서버의 첫 번째 바이트까지의 시간을 면밀히 관찰하여 다음과 같은 방법으로 최적화해야 합니다.

• 올바른 웹 프레임워크를 보장하여 서버 최적화
• 사용자를 가까운 CDN(콘텐츠 전송 네트워크)으로 라우팅
• 페이지를 다시 생성하지 않도록 서버 측에서 자산을 캐시하십시오.
• 더 쉽고 빠르게 로드할 수 있는 HTML 페이지 캐시 우선 제공
• 타사 연결을 줄이고 조기에 구축
• 더 나은 Google 점수를 위해 서명된 교환 사용

2. CSS 차단 시간 단축:

핀

많은 개발자가 CSS를 통해 사이트 모양을 제어하는 ​​것을 좋아하지만, 특히 CSS가 웹 페이지 렌더링을 차단하고 로딩 시간을 늘리는 경우 이는 해로울 수 있습니다. CSS 파일을 스캔하고 다음 단계에 따라 최적화해야 합니다.

• 플러그인을 사용하여 CSS를 최소화하여 코드에서 불필요한 문자 제거
• 스타일시트에서 사용하지 않는 CSS 요소를 찾아 제거합니다.
• 중요한 CSS 스크립트를 코드로 직접 이동하여 로드 시간을 줄입니다.

3. 자바스크립트 차단 시간 단축:

핀

CSS와 마찬가지로 Javascript도 웹사이트를 빠르게 로드하는 데 방해가 될 수 있습니다. 개발자가 웹사이트의 일부 기능에 타사 자바스크립트를 사용하여 소스 코드를 완전히 이해하지 못하는 경우가 있습니다. 다음과 같은 방식으로 JavaScript 로딩 시간을 최적화하면 도움이 됩니다.

• 모든 JavaScript 파일 축소 및 압축
• 코드의 모든 Javascript를 확인하고 불필요한 스크립트 또는 코드를 제거하십시오.
• 로딩 시간이 많이 걸리거나 웹사이트 콘텐츠에 큰 영향을 미치는 자바스크립트를 피하세요.

4. 이미지 최적화 및 압축:

핀

대부분의 웹사이트에서 가장 큰 요소는 일반적으로 이미지입니다. 영웅 이미지, 헤더 이미지, 시차의 배경 이미지 등 이러한 이미지를 최적화하는 것이 중요합니다. 기본 SEO 규칙에 따르면 이미지 크기를 최대한 줄이고 웹페이지의 필요한 크기에 이미지를 사용해야 합니다. 이미지를 최적화하는 다른 방법은 다음과 같습니다.

• 꼭 필요한 경우에만 이미지를 사용하십시오. 가능하면 텍스트 콘텐츠로 바꾸십시오.
• 타사 도구를 사용하여 이미지를 최대한 압축합니다.
• 사용할 올바른 이미지 형식을 고려하고 최신 형식(JPEG 2000, JPEG XR 또는 WebP)으로 이동
• 반응형 이미지의 작동 방식을 이해하고 최대한 사용

5. 텍스트 파일 압축:

핀

다른 리소스와 마찬가지로 웹 사이트를 로드하는 동안 텍스트 파일도 서버에서 서버로 전송됩니다. 크기가 정말 작지만 텍스트 파일을 압축하는 데 여전히 도움이 됩니다. 이를 위해 사용할 수 있는 좋은 타사 도구가 많이 있습니다. 표준 웹사이트의 경우 텍스트 파일을 압축하면 최대 0.8~0.9초를 절약할 수 있습니다.

6. 클라이언트 측 렌더링:

핀

코드와 미디어를 압축하거나 스크립트를 최적화하는 등 웹사이트 서버 부분에서 항상 개선할 수 있는 주요 기능입니다. 클라이언트 측 렌더링 부분에서 제어할 수 있는 것은 많지 않지만 다음 단계를 실행하는 것이 여전히 유용합니다.

• 중요한 JavaScript 번들 최소화
• 서버 측 렌더링 및 캐싱 최적화
• 사전 렌더링 도구 사용

7. 긴 작업을 분리하고 우선 순위를 지정합니다.

핀

이것은 비즈니스 관리 조언처럼 들릴 수 있지만 웹 페이지 로딩의 맥락에서도 잘 작동합니다. 장기 실행 코드를 사소한 비동기 작업으로 분해하는 데 항상 도움이 됩니다. 실행하는 데 50밀리초 이상 걸리는 웹 사이트 코드는 긴 작업이라고 하며 FID가 증가합니다. 이러한 작업을 검사하고 시간이 덜 걸리도록 최적화하거나 더 작은 덩어리로 분해해야 합니다.

8. 웹 워커 사용:

핀

입력 지연 및 낮은 FID 점수의 주요 원인 중 하나는 차단된 메인 스레드입니다. 대부분의 경우 무거운 Javascript 코드가 이에 대한 책임이 있습니다. 이를 완화하기 위해 별도의 백그라운드 스레드에서 이러한 자바스크립트를 실행하고 메인 스레드를 방해하지 않는 웹 작업자를 사용할 수 있습니다. 또한 비 사용자 인터페이스 작업을 다른 스레드로 이동하는 것이 좋습니다. 이렇게 하면 기본 스레드도 해제되어 로드 속도가 빨라지고 FID 인덱스가 향상되기 때문입니다. Comlink , Workway 및 Workerize 와 같은 웹 작업자 사용을 고려할 수 있습니다 .

9. 이미지에서 가로 세로 비율 사용:

핀

웹 개발자들은 처음에 그들이 다루는 미디어 파일, 특히 이미지를 처리하는 방법에 많은 관심을 기울이지 않았습니다. 이제 그들은 올바른 크기의 이미지와 올바른 형식을 사용하는 데 매우 주의를 기울였습니다. 그러나 여전히 개선이 필요한 것은 올바른 치수를 추가하는 것입니다. 많은 개발자가 여전히 높이 및 너비 치수 태그를 사용하여 이미지 크기를 정의합니다. 이것은 나중에 웹사이트 응답성에 도움이 되는 이미지 크기의 % 정의로 대체되었습니다. 그러나 CLS 점수를 향상시키려면 이미지 설정에 종횡비를 사용하십시오. 이 정보는 브라우저에 올바른 정보를 제공하고 로드하는 동안 이미지에 설정된 공간을 할당합니다.

10. 제3자 요소 포함:

핀

우리는 웹사이트를 만들 때 웹사이트에 특정 제3자 요소를 포함시켜야 합니다. YouTube 동영상 또는 Google Ads 형식일 수 있습니다. 여기서 문제는 이러한 포함 항목이 웹 사이트의 누적 레이아웃 이동 인덱스에 큰 영향을 미친다는 것입니다. 따라서 CLS에 부정적인 영향을 미치지 않도록 다음 모범 사례를 따라야 합니다.

• 웹페이지에서 광고/동영상을 위한 가능한 가장 큰 공간을 정적으로 예약합니다.
• 웹사이트 헤더 근처에 비 점착성 광고를 배치할 때 피하거나 특별한 주의를 기울이십시오.
• 광고가 표시되지 않으면 광고 컨테이너를 축소하지 마십시오. 오히려 공백으로 두십시오.
• iFrame 레이아웃을 완성하고 정적 코드를 통해 컨테이너 크기 설정
• 콘텐츠를 오프라인으로 로드하는 대신 무한 스크롤을 피하고 더 읽기 버튼을 제공하세요.

Core Web Vitals 및 SEO 순위에 미치는 영향에 대한 이해는 여전히 발전하고 있습니다. 그러나 다음 사항이 PageRank에 가장 큰 영향을 미치는 것으로 보입니다. 귀하의 웹사이트를 최적화하는 일상적인 작업을 먼저 실행하는 것이 좋습니다. 그런 다음 위에서 언급한 Core Web Vitals 추적 도구 중 일부를 사용하여 각 지수의 점수를 확인할 수 있습니다. 이러한 입력을 기반으로 웹 사이트를 추가로 최적화하고 더 나은 점수를 보장하는 작업을 할 수 있습니다. 또한 SEO와 마찬가지로 결과는 즉각적이지 않으므로 핵심 성능 향상을 위해 인내심을 가지고 계속 노력해야 합니다.