핵심 Web Vitals를 위해 비즈니스 웹사이트 최적화를 시작하는 5가지 방법

Google은 Core Web Vitals 롤아웃을 5월에서 6월 중순으로 연기하고 8월 말까지 전체 라이브 업데이트를 보류했습니다. 매우 기대되는 새로운 순위 신호 세트는 현재 검색 신호와 결합되어 새로운 페이지 경험을 창출합니다. 이 새로운 개발이 귀하의 비즈니스에 의미하는 바는 무엇입니까?

웹사이트에 변경 사항을 구현하기 위해 웹 디자인 팀 및 SEO 전문가와 부지런히 협력했다면 걱정할 필요가 없습니다. 출시가 지연된다는 것은 앞서 나갈 수 있다는 의미일 뿐입니다. 반면에 사이트 수정을 시작하지 않은 경우 지연은 이제 새로운 측정항목 집합을 충족할 시간이 있음을 의미합니다.

핵심 Web Vital은 무엇입니까?

Core Web Vitals는 Google이 웹사이트의 순위를 매기는 방식을 변경하도록 설정되어 있습니다. 다음과 같은 세 가지 주요 측정항목을 다룹니다.

1. 가장 큰 내용이 포함된 페인트(LCP). 페이지가 얼마나 빨리 로드되는지 측정합니다.
2. 첫 번째 입력 지연(FID). FID는 상호 작용 또는 페이지의 참여도에 관한 것입니다.
3. 누적 레이아웃 시프트(CLS). 이 측정항목은 사용자가 페이지와 상호작용할 때 페이지의 요소가 얼마나 안정적인지 측정합니다.

따라서 새로운 메트릭 세트는 로딩 시간, 상호 작용 및 페이지 안정성에 중점을 두고 귀하와 귀하의 웹 개발자가 작업해야 하는 사항에 대한 청사진을 제공합니다.

이를 위한 다섯 가지 효과적인 방법은 다음과 같습니다.

1. 이미지 및 비디오 최적화

페이지 로딩 속도가 느리면 잠재 고객에게 비용이 발생할 수 있습니다. 많은 사이트에서 이미지는 보기에서 가장 큰 요소이므로 최적화하는 것이 가장 좋습니다.

이를 위한 효과적인 방법은 웹사이트의 모든 이미지를 확장하고 압축하는 것입니다. 사용할 이미지 최적화 도구는 tinypng 또는 ShortPixel 입니다. 또한 이미지를 .png 와 같은 보다 효율적인 최신 형식으로 변환하고 모바일 및 데스크톱 장치 모두에서 완벽하게 보이는 반응형 이미지인지 확인할 수 있습니다.

"최적화"와 "크기 축소"를 구분하십시오. 이미지를 더 빨리 로드하기 위해 이미지 크기를 줄이려고 할 수 있습니다. 그러나 Core Web Vitals의 요점은 사용자에게 더 나은 경험을 제공하는 것입니다. 이미지(또는 비디오)가 더 빨리 로드될 수 있지만 웹사이트 방문자는 이미지가 흐리거나 품질이 낮으면 유용하지 않을 수 있습니다.

2. 지연 로드 이미지 및 타사 스크립트

지연 로딩은 웹사이트 이미지를 더 반응적이고 빠르게 로드할 수 있는 또 다른 방법입니다. 이 방법에서는 사용자가 페이지의 해당 영역으로 스크롤할 때 이미지가 로드됩니다. 스크롤 없이 볼 수 있는 부분 위에 있으면 사용자가 보아야 하는 모든 이미지가 먼저 표시됩니다. 아래로 스크롤하면 페이지의 해당 영역에 있는 이미지가 따라옵니다.

레이지 로딩은 대역폭을 적절하게 할당할 뿐만 아니라 이미지가 많은 웹사이트에도 유용합니다.

이미지를 쉽게 지연 로드할 수 있는 한 가지 방법은 HTML을 사용하는 것입니다. 이 마크업을 따르면 됩니다.

<img src=”이미지 이름.png” 로딩=”게으른” alt=”이미지1”/>

<iframe src=”content1.html” loading='lazy”></iframe>

특정 페이지에 많은 이미지가 있는 경우 프로세스가 지루할 수 있지만 지연 로딩은 충분히 간단할 수 있습니다.

3. 페이지의 모든 요소가 제자리에서 벗어나지 않도록 하세요

Google은 성능 관찰자를 통해 CLS를 측정하여 레이아웃 이동을 감지합니다. 요소가 이동하거나 레이아웃이 이동하면 성능 관찰자는 기존 레이아웃 이동 점수에 추가하는 콜백 함수를 호출합니다.

웹사이트의 안정성을 확인하거나 레이아웃 전환을 디버그하는 데 도움이 되는 한 가지 도구는 Chrome의 DevTools에 있는 레이아웃 전환 영역 옵션입니다. 이 기능은 움직이는 요소를 이동할 때 강조 표시합니다. 왜 바뀌는지 알려주는 것이 아니라 스스로 알아내야 합니다. 그것이 하는 일은 교대조에 영향을 미치는 요소를 보여주는 것입니다.

이미지 및 비디오 요소에는 너비 및 높이 크기 속성이 있어야 합니다. CSS 종횡비 상자를 사용하여 이미지 또는 요소에 필요한 공간을 예약할 수도 있습니다. 이렇게 하면 파일이 로드될 때 페이지의 모든 요소를 ​​이동하지 않고도 페이지에서 파일에 대한 올바른 공간을 할당할 수 있습니다.

레이아웃 전환은 사용자에게 표시될 때만 계산됩니다. 따라서 페이지 아래에서 이동이 발생했지만 사용자가 아직 해당 영역으로 스크롤하지 않은 경우 CLS에 포함되지 않습니다.

4. 데스크탑 및 모바일용 UX 패턴 수정

많은 레이아웃 변화는 잘못된 UX 패턴의 결과입니다. 한 가지 예는 웹사이트의 팝업이나 페이지 상단에 표시되는 배너를 들 수 있습니다. 이러한 요소가 그렇게 하면 페이지의 다른 모든 항목을 아래로 밀어내는 경향이 있습니다.

동적 콘텐츠를 위한 충분한 공간을 확보해야 합니다 . 프로모션이나 광고와 같이 나중에 팝업되는 콘텐츠입니다. 한 가지 팁은 기존 콘텐츠 위에 새 콘텐츠를 삽입하지 않는 것입니다. 특히 전체 페이지의 콘텐츠를 조정하지 않는 경우에는 더욱 그렇습니다.

5. 실제 사용자 모니터링(RUM) 설정 개선

실제 사용자 모니터링은 웹 사이트 또는 응용 프로그램의 각 사용자의 움직임을 캡처하고 분석하는 프로세스입니다. 종종 실제 사용자 메트릭 또는 최종 사용자 경험 모니터링이라고 합니다. 페이지 수준 성능 데이터를 확인하여 이를 수행할 수 있습니다.

Google Search Console(GSC)은 유사한 HTML 구조를 가진 URL 그룹 또는 URL 그룹을 기반으로 페이지 성능을 알려주는 유용한 도구입니다.

RUM을 모니터링하면 사이트의 반응성과 상호 작용에 대한 사용자의 첫인상이 긍정적인지도 확인할 수 있습니다.

보너스 팁:

CWV 성능에 영향을 줄 수 있는 또 다른 요소는 서버 응답 시간입니다. 일반적으로 서버 응답 시간이 빠를수록 모든 단일 페이지 로드 메트릭이 향상됩니다.

이상적으로는 브라우저가 서버에서 콘텐츠를 빠르게 수신하기를 원합니다. 그렇게 하면 화면에도 표시되고 기록적인 시간 내에 사용자가 볼 수 있습니다.

서버 응답 시간이 느린지 어떻게 알 수 있습니까? WebPage Test 및 Lighthouse와 같은 도구를 사용합니다.

Lighthouse에는 특히 초기 서버 응답 시간 줄이기라는 페이지 감사 요소가 있습니다. 감사 보고서에 이것이 표시되면 웹 개발자와 함께 문제를 파헤치는 데 시간을 보내야 함을 의미합니다.

더 나은 웹사이트 성능, 더 나은 사용자 경험 — 더 나은 순위

Core Web Vitals는 사용자가 온라인에서 경험을 즐길 수 있도록 돕기 위한 것입니다. 그의 업데이트를 통해 Google은 사이트 속도와 사용자 경험을 우선시하는 것을 목표로 합니다. 그러나 최적화를 위한 공식은 없습니다. 웹사이트의 현재 실적, 목표 및 속한 산업에 따라 달라지기 때문입니다.

궁극적으로 이러한 업그레이드는 웹이 관련성 있고 양질의 웹사이트로 채워지도록 합니다. 웹사이트에 모범 사례를 적용하여 고객에게 최고의 서비스와 경험을 제공하고 있는지 확인합니다.