검색 엔진으로서 Google은 키워드를 비교하여 검색 결과를 생성하는 것이 아니라는 것을 잊기 쉽습니다. Google은 사람들이 웹 페이지에서 자신의 경험을 즐기지 않으면 컨텐츠를 소비 할만 큼 오랫동안 페이지에 머물러 있지 않다는 것을 알고 있습니다.
결과적으로 Google은 정량화 가능한 메트릭을 사용하여 웹 페이지의 사용자 경험을 분석하는 방법을 실험 해 왔습니다. 이를 검색 엔진 순위로 고려하여 사용자에게 훌륭한 관련 컨텐츠뿐만 아니라 멋진 사용자 경험을 제공하기를 희망합니다.
곧 출시 될 Page Experience 업데이트는이 방향의 주요 단계입니다. 이미지가 많은 웹 사이트를 가진 웹 사이트 소유자는 이러한 변경 사항에 적응하거나 길가에 의해 떨어질 위험에 적응하려면 특히 경계해야합니다. 이 기사에서는이 업데이트와 관련하여 알아야 할 모든 내용과 최대한 활용할 수있는 방법에 대해 이야기합니다.
참고 : Google은 2020 년 5 월 Page Experience 계획을 도입하고 2020 년 11 월에 2021 년 5 월에 출시 될 것이라고 발표했습니다. 그러나 Google은 2021 년 중반 중반부터 점진적인 롤아웃 계획을 지연 시켰습니다. 이는 웹 사이트 관리자에게 Covid-19 Pandemic First가 가져온 변속 조건을 다루기 위해 수행되었습니다.
Google이 사용자가 검색 엔진 순위에 대한 메트릭을 경험하는 방법에 대한 최신 변경 사항에 들어가기 전에 일부 컨텍스트를 얻으겠습니다. 2020 년 4 월, Google은 새로운 이니셔티브 인 Core Web Vitals를 도입 하여이 방향으로 가장 중요한 움직임을 보였습니다.
CWV (Core Web Vitals)가 웹 개발자가 테스트 가능한 메트릭을 사용하여 검색 엔진 순위를 최적화하려는 과제를 다루는 데 도움을주기 위해 도입되었습니다.
이를 위해 Google은 세 가지 주요 메트릭 ( "사용자 중심 성능 메트릭"이라고 함)을 식별했습니다. 이들은 다음과 같습니다.
이 메트릭은 SI (Speed Index), FCP (최초의 콘텐츠 페인트), TTI (interactive) 등과 같이 한동안 사용해 온 더 기초적인 메트릭에서 발전했습니다.
이것이 중요한 이유는 이미지가 웹 사이트의 CWVS 점수에 중요한 역할을 할 수 있기 때문입니다. 예를 들어, LCP는 종종 상단 이미지가 아니거나 최소한 이미지와 경쟁해야합니다. 올바르게 사용되지 않은 이미지는 CLS에 부정적인 영향을 줄 수 있습니다. 느린로드 이미지는 페이지의 전체 렌더링에 추가 지연을 추가하여 FID에 영향을 줄 수 있습니다.
또한, 이것은 모바일 우선 인덱싱에 대한 Google의 갱신 초점의 뒷면에 있습니다. 따라서 이러한 메트릭은 귀하의 웹 사이트에 중요 할뿐만 아니라 모바일 장치에서도 페이지가 점수를 매기는지 확인해야합니다.
일반적으로 Google은 검색 엔진 순위와 관련하여 사용자 경험을 점점 더 우선시하고 있음이 분명합니다. 이를 통해 최신 업데이트를 제공합니다. Google Now는 2021 년 중반에 초기 출시로 시작하여 Page Experience를 순위 요소로 통합 할 계획입니다.
그렇다면 페이지 경험이란 무엇입니까? 요컨대, 여러 메트릭의 데이터를 결합하여 웹 페이지의 사용자 경험이 얼마나 좋든 나쁜지 결정하는 순위 신호입니다. 다음 요인으로 구성됩니다.
이 변경의 일환으로 Google은 페이지 경험 기준을 전달한 웹 페이지를 강조하는 시각적 표시기 또는 배지를 포함하겠다는 의도를 발표했습니다. 이는 검색 엔진이 AMP (가속 모바일 페이지) 또는 모바일 친화적 인 페이지를 홍보하는 데 사용한 이전 배지와 유사합니다.
이 공식적인 인정은 고성능 웹 페이지에 Google의 SERP 인 경쟁이 치열한 분야에서 큰 이점을 제공 할 것입니다. 이 시각적 큐는 의심 할 여지없이 CTR 및 유기 트래픽, 특히 이미 순위가 매겨진 사이트의 경우 강화됩니다. 이 기능은 현재 시험 단계를 통과 할 수있는 빨리 삭제 될 수 있습니다.
님이 아닌 사용자에게 좋은 소식은 모든 페이지가 이제 브라우저와 Google 뉴스 앱에서 최고의 스토리를받을 수 있다는 것입니다. Google은 Pages가 "핵심 웹 생명력 점수 또는 페이지 경험 상태에 관계없이 최고의 스토리에 적합 할 수 있다고 말하지만, 이것이 자격을 얻거나 지금은 자격을 얻지 못한다고 상상하기는 어렵습니다.
Google은 등대 및 Pagespeed Insight 도구의 소비자 사용이 70% 급증했으며 웹 사이트 소유자가 페이지 최적화의 중요성을 따라 잡고 있음을 보여줍니다. 이는 검색 엔진 순위를 위해 다른 웹 사이트와 경쟁 할 때 표준이 점점 높아지고 높아질 것임을 의미합니다.
구글은 이러한 변화에도 불구하고 콘텐츠는 여전히 왕이라는 것을 재확인했다. 그러나 콘텐츠는 페이지의 텍스트 이상의 것이며 진정으로 매력적이고 사용자 친화적 인 콘텐츠는 신중하게 사용되는 미디어로 구성되며 대부분은 이미지 일 것입니다.
제안 된 페이지 경험 배지 및 탑 스토리 자격이 높아짐에 따라 스테이크는 Google 검색 알고리즘으로 높은 순위를 차지할 수 없었습니다 . 당신은 얻을 수있는 모든 이점이 필요합니다. 그리고 내가 보여 주려고 할 때, 이미지 자산을 최적화하면 이러한 메트릭에 따라 점수를 잘 얻는 데 실질적인 영향을 줄 수 있습니다.
핵심 웹 생명의 이미지 자산을 최적화하는 데 도움이되는 솔루션을 제안하기 전에 이미지가 종종 성능에 해로운 이유를 살펴 보겠습니다.
기존의 방법을 사용하면 이러한 문제를 해결하기 위해 많은 혈액, 땀 및 눈물이 필요할 수 있습니다. 이미지 수동 편집 및 하드 코딩 응답 형 구문과 같은 대부분의 솔루션은 확장 성, 변경 사항에 쉽게 업데이트/조정 및 개발 파이프 라인을 부풀릴 수있는 기능에 고유 한 문제가 있습니다.
특히 CWV 향상에 중점을두면 이미지 자산을 최적화하려면 다음을 수행해야합니다.
운 좋게도 이러한 과제를 해결하고 이러한 솔루션 인 이미지 CDN을 제공하기 위해 특별히 설계된 도구 클래스가 있습니다. 특히, 나는 내가 수행 한 페이지 성능 테스트에서 다른 CDN을 지속적으로 능가하는 ImageEngine에 집중하고 싶습니다.
ImageEngine은 웹 사이트 이미지 (GIF 포함)를 제공하는 데 사용할 수있는 지능적이고 장치 인식 이미지 CDN입니다. ImageEngine은 WURFL 장치 감지를 사용하여 웹 사이트 페이지가 (장치, 화면 크기, DPI, OS, 브라우저 등) 액세스하고 이미지 자산을 최적화합니다. 이러한 기준을 바탕으로 이미지를 지능적으로 크기를 조정하고, 재 포장하고 압축하여 이미지를 최적화 할 수 있습니다.
완전한 자동으로 설정된 세트 앤 포 게트 -IT 솔루션으로 설정되면 중재가 거의 필요하지 않습니다. CDN에는 20 개 이상의 글로벌 팝이 있으며, 다른 지역에서 더 빠르게 가장 빠른 에지 서버에 내장 된 논리가 장착되어 있습니다. ImageEngine은 98%만큼 높은 캐시 치지 비율을 달성 할뿐만 아니라 이미지 페이로드를 75% 감소 시킨다고 주장합니다.
ImageEngine과 같은 이미지 CDN을 사용하여 차이를 설명하기 위해 실용적인 테스트를 보여 드리겠습니다.
먼저, PagesPeed Insight를 사용하여 방대한 양의 이미지 컨텐츠 점수를받은 페이지를 보는 방법을 살펴 보겠습니다. 간단한 페이지이지만 버튼 및 링크 및 텍스트와 같은 대화식 요소가있는 수많은 고품질 이미지로 구성됩니다.
FID는 사용자가 웹 사이트와 실제 상호 작용의 데이터에 의존하기 때문에 고유합니다. 결과적으로 FID는 "현장에서"만 수집 할 수 있습니다. 트래픽이 충분한 웹 사이트가있는 경우 Google 콘솔에서 페이지 경험 보고서를 생성하여 FID를 얻을 수 있습니다.
그러나 LACTHOUSE 또는 PAGESPEED 통찰력과 같은 도구에서 실험실 결과의 경우 TTI 및 TBT를 보면 자원 차단의 영향을 추측 할 수 있습니다.
오, 그렇습니다. 여러 가지 이유로 모바일 감사 결과에 중점을 둘 것입니다.
이를 염두에두고 페이지의 결과는 다음과 같습니다.
보시다시피, 우리는 몇 가지 문제가 있습니다. 유용하게, Pagespeed Insights는 LCP 및 CLS의 두 CWV에 표시됩니다. 보시다시피, 거대한 이미지 페이로드 (약 35MB)로 인해 거의 1 분의 우스운 LCP가 있습니다.
간단한 레이아웃과 내가 이미지 너비와 높이 속성을 명시 적으로 제공했다는 사실 때문에, 우리 페이지는 0 CLS로 안정적입니다. 그러나 느린 로딩 이미지가 페이지의 인식 된 안정성에 영향을 줄 수 있다는 것을 인식하는 것이 중요합니다. 따라서 CLS를 직접 개선 할 수 없더라도 이미지로드와 같은 빠른 상당수의 요소가 실제 사용자에 대한 전반적인 경험이 향상됩니다.
TTI와 TBT도 하위 파였습니다. 첫 번째 요소가 페이지에 나타나는 순간부터 페이지가 대화식이되기 시작할 때까지 최소 2 초가 걸립니다.
개선 및 진단 기회에서 볼 수 있듯이 거의 모든 문제는 이미지와 관련이있었습니다.
자, 이제 믹스에 ImageEngine을 추가하고 같은 페이지에서 성능 메트릭을 향상시키는 방법을 확인할 차례입니다.
거의 모든 웹 사이트에서 ImageEngine을 설정하는 것은 비교적 간단합니다. 먼저 ImageEngine.io로 이동하여 무료 평가판으로 가입하십시오. 다음과 같은 간단한 3 단계 가입 프로세스를 따르십시오.
후자는 {random string} .cdn.imgeng.in의 형식이지만 ImageEngine 대시 보드 내에서 업데이트 될 수 있습니다.
이 도메인을 통해 이미지를 제공하려면 웹 사이트 마크 업으로 돌아가 SRC 속성을 업데이트하십시오. 예를 들어:
에서:
<img src="%E2%80%9Dmywebsite.com/images/header-image.jpg%E2%80%9D/" alt="Google의 새로운 Page Experience 업데이트가 웹 사이트에서 이미지에 대한 의미" >
에게:
<img src="%E2%80%9Dmyimages.cdn.imgeng.in/images/header-image.jpg%E2%80%9D/" alt="Google의 새로운 Page Experience 업데이트가 웹 사이트에서 이미지에 대한 의미" >
그게 당신이해야 할 전부입니다. ImageEngine은 이제 방문자가 웹 사이트 페이지를 볼 때 이미지를 자동으로 끌어 당기고 최상의 결과를 위해 동적으로 최적화합니다. Magento, Shopify, Drupal 등과 함께 ImageEngine을 사용하는 방법에 대한 문서의 공식 통합 안내서를 확인할 수 있습니다. 공식 WordPress 플러그인도 있습니다.
내 ImageEngine 테스트 페이지가 설정되면 다음은 다음과 같습니다.
보시다시피 결과는 거의 완벽합니다. 모든 메트릭이 개선되어 녹색에서 점수가 매겨졌습니다. 심지어 속도 지수와 LCP조차도 큰 이미지에 의해 크게 영향을 받았습니다.
결과적으로 더 이상 개선 기회가 없었습니다. 보시다시피, ImageEngine은 총 페이지 페이로드를 968KB로 줄여 이미지 컨텐츠를 대략 90%줄였습니다.
어느 정도까지는 모바일 방향으로 일관되게 움직여서 점점 더 많은 메트릭 목록을 사용하여 검색 엔진 사용자에게 최상의 "페이지 경험"을 연마하는 Google과 동일합니다. Google 은이 방향으로의 움직임을 재확인하면서 신호 목록을 계속 테스트하고 수정할 것이라고 말했습니다.
TTFB, TTI, FCP, TBT 또는 전적으로 새로운 메트릭과 같은 도구에 표시 될 수있는 다른 메트릭은 향후 업데이트에서 더 큰 역할을 할 수 있습니다.
현재 이러한 메트릭스에 대해 높은 점수를받는 데 도움이되는 솔루션을 찾는 것이 경쟁이 치열한 환경에서 앞서 나가는 데 중요합니다. 이미지 최적화는 단 하나 일 뿐이지 만, 특히 이미지가 많은 사이트에 큰 영향을 줄 수 있습니다.
ImageEngine과 같은 Image CDN은 이미지 콘텐츠와 관련된 거의 모든 문제를 해결할 수 있으며 최소한의 시간과 노력으로 향후 업데이트에 대한 웹 사이트를 증명할 수 있습니다.
위 내용은 Google의 새로운 Page Experience 업데이트가 웹 사이트에서 이미지에 대한 의미의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
