Google Lighthouse 성공 사례: 기술 최적화를 통한 성능 개선

Google Lighthouse를 사용하면 모든 URL의 기술적 성능을 빠르고 쉽게 평가할 수 있습니다. 자세한 테스트는 로드 시간, 접근성 및 웹 보안을 측정하는 동시에 웹 사이트의 기술 인프라를 개선할 수 있는 가능성을 보여줍니다. 이 블로그 게시물에서는 Google Lighthouse를 성공적으로 사용하여 온라인 성능을 향상시킨 회사의 몇 가지 예를 공유하고자 합니다. 아시아 마켓플레이스인 Carousell이 Lighthouse를 사용하여 유기적 트래픽을 63% 더 많이 생성한 방법, TripAdvisor 및 Expedia의 Lighthouse 성능 점수가 Google 순위와 어떤 상관 관계가 있는지 등을 알아보세요.

Google Lighthouse가 무엇이며 검색 엔진 순위와 얼마나 관련이 있는지에 대한 개요를 찾고 있다면 먼저 Searchmetrics 백서 "Google Lighthouse Ranking Factors 2019"를 읽어보세요. 이 백서는 1,500만 건 이상의 Google Lighthouse 감사 데이터를 기반으로 Google.com의 최상위 웹사이트 최적화 상태를 분석합니다. 여기에서 백서를 다운로드하십시오.

Google Lighthouse 순위 요소 2019

성공 사례 1: 아시아의 eBay가 Lighthouse Performance를 17점에서 84점으로 높인 방법

우리의 첫 번째 Lighthouse 사례 연구는 carousell.com 마켓플레이스인 eBay에 대한 아시아의 답변에서 나온 것입니다. 싱가포르 플랫폼은 주로 모바일 트래픽에 의존하며 인도네시아 및 필리핀과 같은 다른 아시아 국가로 확장하기 위해 Progressive Web App의 모바일 로드 시간을 늘릴 수 있는 방법을 찾고 있었습니다. 새로운 사용자를 확보하고 유지하려는 경우 3G를 통해 로드하는 데 15초 이상(당사에서와 같이)은 허용되지 않습니다.”라고 Carousell의 웹 기술 책임자인 Stacey Tay가 설명합니다. 그들의 사이트의.

우선 Stacey는 초기 Lighthouse 감사의 결과가 경종을 울렸습니다. 성능 점수는 17점에 불과했고 프로그레시브 웹 앱 및 접근성 범주의 결과는 매우 평범했습니다. HTTPS 또는 안전한 JavaScript 라이브러리와 같은 웹 사이트의 보안 측면에 중점을 둔 SEO 및 모범 사례의 두 가지 범주에서만 만족스러운 점수를 받았습니다.

이러한 결과를 기반으로 최적화는 주로 성능 및 프로그레시브 웹 앱의 Lighthouse 범주에서 결과를 개선하는 것을 목표로 했습니다. carousell.com의 Lighthouse 점수의 전후 비교는 다음 영역에서 얼마나 많은 진전이 있었는지 보여줍니다:

기술 최적화 조치는 2018년에 수행되었으며 10월 말 Stacey Tay는 Medium에서 성공을 기록했습니다. 본국인 싱가포르에서 carousell.com의 SEO 가시성을 보면 성능이 확실히 향상되었음을 알 수 있습니다.

최적화에 필요한 작업을 구현하기 전에 명확한 미션 목표를 설정했습니다.

“성능은 사용자 경험이기 때문에 새로운 사용자에게 처음부터 즐거운 경험을 제공하고 싶었습니다. 이를 위해 성능 우선의 새로운 웹 경험을 설계했습니다.” Stacey Tay, Carousell의 웹 기술 책임자

이 임무는 웹사이트의 기술 최적화를 위한 기반을 마련했습니다. 중요한 것은 이 프로젝트가 부수적인 프로젝트로 취급되지 않고 우선 순위가 높게 지정되었으며 전용 성능 예산이 주어졌다는 것입니다. Stacey는 이 임무를 수행하면서 팀에 동기를 부여하고 경영진에게 프로젝트의 중요성을 확신시키고 프로젝트의 성공을 입증함으로써 투자를 정당화하는 것이 더 쉬웠다고 말합니다.

예산에 동의한 후 Google Lighthouse 감사의 점수를 기반으로 목표를 설정했습니다.

앞서 언급했듯이 최적화 이전의 성능 점수는 17점에 불과했습니다. carousell.com의 홈페이지를 최적화한 결과 84점을 받았습니다. 해결된 사이트 인프라의 측면에는 워크박스 사전 캐싱 및 서비스 작업자가 있는 보다 효과적인 캐싱 시스템 설정, 이미지 압축, CSS 인라이닝 적용이 포함되었습니다. 이러한 조치는 함께 빠르고 사용자 친화적인 프로그레시브 웹 앱을 만드는 데 기여했습니다. 현재 페이지가 로드되는 방식은 다음과 같습니다.

Carousell의 성능 최적화가 성공했다는 확실한 증거는 숫자에서 찾을 수 있습니다. 로드 시간을 65% 단축했을 뿐만 아니라 트래픽 증가에서 가장 눈에 띄는 개선을 볼 수 있습니다. 최적화 이후 Carousell의 유기적 트래픽은 63% 증가했습니다.

Google Lighthouse 순위 요소 2019 읽기

성공 사례 2: Staples와 Walmart가 더 빠른 로드 시간을 사용하여 전환율을 높인 방법

로드 시간 최적화에 대해 이야기할 때 참조 지점으로 자주 사용되는 몇 가지 Google 통계가 있습니다. 예를 들어 로드 시간이 늘어남에 따라 모바일 사용자가 검색 결과로 돌아올 가능성도 높아집니다. 로드 시간이 1초에서 3초로 증가하면 이탈률 확률이 32% 증가합니다. 로드 시간이 1초에서 5초로 증가하면 이탈 확률이 90% 증가합니다.

페이지 속도 분석 도구 GTmetrix는 다양한 소매 웹사이트를 살펴보고 로드 시간 단축의 구체적인 이점을 조사했습니다. 예를 들어 Staples 및 Walmart와 같은 대형 소매업체가 있으며 더 빠른 로드 시간과 증가된 전환율 간의 명확한 상관 관계를 보여줍니다.

Google Lighthouse 순위 요소 2019 읽기

성공 사례 3: Douglas가 로드 시간을 절반으로 단축한 방법

이제 Google Lighthouse를 사용하여 웹사이트 성능을 크게 개선한 독일의 향수 대기업 Douglas를 살펴보겠습니다. 그들의 성공 사례는 2017년 블랙 프라이데이로 거슬러 올라갑니다. 당시 트래픽 급증으로 인해 일부 사용자는 페이지를 사용할 수 없었습니다. 당시의 Google Lighthouse Performance 점수도 개선의 여지가 분명했습니다. 2018년 5월부터 douglas.de의 프로젝트에 참여하고 IT와 SEO 간의 운영을 조정한 뮌헨에 기반을 둔 프리랜스 Tech SEO 컨설턴트인 Michael Singer는 다음과 같이 설명합니다. – 이제 약 8초로 줄였습니다.”

Google Lighthouse 감사에서 이 인상적인 결과를 얻기 위해 향수 소매업체 웹사이트의 후드를 크게 변경했습니다. "우리는 200개 이상의 기술 티켓을 거쳤습니다."라고 Michael은 설명하고 많은 변경 사항을 회상합니다. 모바일 하위 도메인이 비활성화되었습니다. 모바일 사용자는 이제 Douglas의 반응형 기본 www 도메인을 방문합니다. 또한 douglas.de는 노드 및 요청 수를 줄이고 HTML을 압축하며 이미지 크기를 줄이는 JS React를 사용하도록 변환되었습니다. 데이터베이스 대기 시간도 줄어들었고 여러 캐시 최적화가 구현되었습니다.

“우리 작업의 초점은 가능한 한 빨리 웹사이트를 사용할 수 있어야 하는 사용자입니다. 페이지 속도 최적화의 목표는 첫 번째 상호작용 시간을 4초로 줄이는 것이었습니다. 이는 JS React로의 전환 및 단일 반응형 웹 사이트 버전으로의 전환과 함께 SEO 가시성, 트래픽 증가 및 회전율의 상당한 성장으로 이어졌습니다." Michael Singer, 프리랜스 기술 SEO 컨설턴트

Google Lighthouse 성능 점수를 사용한 이러한 최적화 결과 페이지 로드 시간이 눈에 띄게 개선되었습니다. "메트릭을 확인하기 위해 우리는 장기적인 효과를 보여주는 Instana로 실시간 속도 테스트를 실행합니다. 2018년 4월, 데스크탑 값은 여전히 ​​8초 이상이었습니다. 2018년 10월에는 종종 4초를 기록했습니다.” 마지막으로 웹사이트의 기술적 가용성도 향상되어 블랙프라이데이 때와 같은 트래픽 피크를 더 잘 처리할 수 있습니다.

이 성능 최적화는 douglas.de의 SEO 가시성에 즉각적인 전환을 가져왔습니다. 2018년 5월과 2019년 5월 사이에 도메인의 유기적 가시성이 25% 증가했습니다.

물론 Searchmetrics SEO 가시성은 Google에서 웹사이트의 성능을 나타내는 초기 지표 중 하나일 뿐입니다. Michael Singer는 douglas.de 최적화의 영향을 받은 다른 KPI에 대한 추가 통찰력을 제공합니다. Michael은 "방문 횟수가 크게 증가했으며 매출도 크게 증가했습니다."라고 말합니다. 전환율도 비슷한 비율로 증가했습니다. 특히 SEO가 douglas.de에서 가장 많은 회전율을 가져오는 채널이기 때문입니다.

Douglas의 최적화 결과 한 눈에:

• 페이지 로드 시간 -50%
• SEO 가시성 +25%
• 방문, 전환 및 회전율이 크게 증가합니다.

Google Lighthouse 순위 요소 2019 읽기

성공 사례 4: URL 성능이 TripAdvisor 및 Expedia의 Google 순위에 미치는 영향

Lighthouse Performance 점수와 실제 Google 순위 간의 관계를 조사하기 위해 여행 산업 내에서 분석을 수행하기로 결정했습니다. 호텔, 항공편, 캐러밴 등의 주제에 대한 여행 관련 키워드 3,500개를 수집하고 Google.com의 랭킹 페이지를 분석하고 이러한 키워드에 대한 TripAdvisor 및 Expedia의 순위 위치를 살펴보았습니다. 결과: TripAdvisor와 Expedia는 Google Lighthouse 성능도 높을 때 높은 순위를 기록했습니다.

여기에 왜 그렇게 명확한 연결이 있습니까? 온라인 여행 산업은 경쟁이 매우 치열하며 수많은 대기업이 경쟁하고 있습니다. TripAdvisor 및 Expedia뿐 아니라 Booking.com, Hotels.com, FlightRadar 등도 보유하고 있습니다. 이들 모두는 높은 수준의 신뢰를 받고 있으며 인기 있는 브랜드입니다. 동시에 서로 다른 브랜드를 구별하기가 어렵습니다. 많은 경우 콘텐츠(예: 호텔 설명)는 매우 유사합니다. 이는 웹사이트가 주요 USP와 함께 눈에 띄기 어렵게 만듭니다. 그리고 유사한 크기의 브랜드, 유사한 인터페이스, 유사한 기능, 유사한 콘텐츠와 같이 여러 순위 신호가 대체로 동일하다면 웹사이트 성능이 순위를 결정할 때 결정적인 요소가 될 가능성이 높습니다.

" 좋은 사용자 경험을 위해서는 빠른 로드 시간이 매우 중요합니다. 웹 사이트와 상호 작용할 때마다 방해가 발생할 때마다 작은 불만이 생기고 방해가 발생할수록 사용자의 불만이 커집니다. 로드 시간이 몇 초만 증가하면 수많은 웹사이트에서 이탈률이 증가하여 궁극적으로 전환율이 감소합니다." Nils Kattau, 전환 전문가

Google Lighthouse 결과가 귀하의 시장과 얼마나 관련이 있는지 알아보려면 맞춤형 Searchmetrics Ranking Factor로 작업할 수 있습니다. 관련 시장에 대한 Google Lighthouse 데이터를 분석하고 이를 자체 Searchmetrics 순위 데이터와 결합하고 웹사이트의 기술 최적화를 위해 구체적이고 실행 가능한 권장 사항을 제공합니다. 오늘 개인 보고서를 요청하십시오.

맞춤형 Searchmetrics Lighthouse 감사 요청