느린 모바일 페이지 속도가 전환율을 망치는 방법

Google의 최근 연구에 따르면 잘못된 클릭 후 방문 페이지 디자인으로 인해 PPC 예산의 최소 절반이 손실될 가능성이 높습니다.

검색 엔진 대기업의 데이터에 따르면 모바일 인터넷 사용자 2명 중 1명 이상이 3초 안에 로드되지 않으면 웹 페이지를 포기할 것이라고 합니다. 그리고 2017년 2월 기준으로 평균 모바일 클릭 후 방문 페이지가 로드 되는 데 22초가 걸립니다 .

계산을 중단했다면 느린 로딩 페이지가 수익에 얼마나 해로울 수 있는지 깨닫게 될 것입니다.

매월 5,000명의 모바일 클릭 후 방문 페이지 방문자를 생성하고 그 중 5%를 전환하면 1년 동안 1,500회의 전환을 놓칠 수 있습니다. 이 가설에 2,500 달 - - 로딩은 3 초 이상, 방문자의 절반을 걸리는 경우가 반송하기 전에, 심지어 전체 클릭 후 방문 페이지를 볼 수 없습니다. 설상가상으로 PPC 예산은 그럴 때마다 고갈됩니다.

하지만 페이지가 3초 안에 로드되지 않을 수 있습니다. 5초, 6초, 10초 안에 로드될 수 있습니다. 이 경우 Google의 데이터는 더 많은 것을 놓치고 있음을 보여줍니다.

새로운 모바일 페이지 속도 벤치마크

귀하의 페이지는 웹에서 다른 사람들과 어떻게 쌓이나요? 로딩 속도에 대한 새로운 벤치마크를 설정하기 위해 Google은 2017년 초에 126개국에서 900,000개 광고의 모바일 클릭 후 방문 페이지를 분석했습니다.

그들이 찾은 것은 모바일 페이지가 너무 많은 요소로 인해 "부풀려진다"는 가설을 확인하는 것이었습니다.

그 중 자동차, 소매 및 기술 분야의 페이지는 평균적으로 로드하는 데 가장 오래 걸립니다. 그러나 업종에 관계없이 일부 충격적인 데이터에 따르면 모바일 클릭 후 방문 페이지는 전반적으로 많이 남아 있습니다.

예를 들어 분석된 페이지의 70% 는 스크롤 없이 볼 수 있는 부분에 콘텐츠를 로드하는 데 7초가 걸렸습니다 . 동일한 페이지에서 스크롤 없이 볼 수 있는 부분의 위와 아래에 시각적 콘텐츠를 로드하는 데 총 10초 이상이 걸렸습니다.

SOASTA의 일부 고급 알고리즘의 도움으로 또 다른 Google 연구에서는 페이지 로드 속도를 전환 및 이탈률과 같은 보다 의미 있는 핵심 성과 지표와 연결했습니다. 블로그 게시물에서 연구원들은 다음과 같이 자세히 설명합니다.

우리는 두 가지 기계 학습 모델을 구축했습니다. 하나는 전환 예측용이고 다른 하나는 이탈률 예측용입니다. 각 모델은 모바일 전자상거래 사이트의 대규모 샘플에서 얻은 실제 데이터를 사용하여 이미지 형식에서 여러 스크립트에 이르기까지 93개의 서로 다른 페이지 측정항목의 영향을 연관시켰습니다. 간단히 말해서 두 모델은 어떤 모바일 사이트 요소가 쇼핑객을 구매하거나 이탈하게 만드는지를 찾았습니다. 전환 모델의 예측 정확도는 93%였으며 바운스 모델은 96%로 훨씬 더 정확했습니다.

거의 정확한 정확도로 머신 러닝 모델은 페이지 로드 시간이 1초에서 3초로 증가함에 따라 모바일 방문자가 이탈할 확률이 32% 증가한다는 것을 발견했습니다. 거기에서 그래픽이 보여줍니다. 상황은 더욱 악화됩니다.

연구에 따르면 이탈률과 함께 느린 페이지 로드 시간도 전환을 감소시킬 수 있습니다. 그럼 범인은?

연구원들은 몇 가지 주요 모바일 디자인 결함을 확인했습니다.

가장 큰 모바일 클릭 후 방문 페이지 속도 킬러

속도는 전환율과 유료 광고 예산을 방해하는 요소일 뿐만 아니라 또한 Google의 검색 엔진 순위 요소 중 하나입니다. 페이지가 권장되는 3초보다 빠르게 로드되지 않으면 비용을 낭비하고 있으며 검색되지 않는 것입니다. 다음 문제 중 하나가 원인일 수 있습니다.

1. 페이지 요소가 너무 많음

오늘날 평균적인 웹 페이지는 데이터 면에서 고전 비디오 게임 "Doom:"과 같은 크기입니다.

2.3MB에서 불필요한 요소의 힙으로 성장했습니다. 그리고 그 디자이너들은 BSO("밝은 반짝이는 물체 증후군")를 가지고 있습니다. 소프트웨어 엔지니어인 Ronan Cremin은 다음과 같이 제안합니다.

웹이 어색한 10대 시절을 보내면서 우리는 은밀한 기능이 자리를 잡고 결국에는 어수선한 것이 우리를 더 좋게 만들었습니다. 새로운 JavaScript 갤러리 모듈? 물론이죠? 오, 새로운 웹 글꼴이 여기에서는 멋지게 보일 것입니다. 하지만 거기에 있는 동안 다른 분석 도구를 추가하지 않으시겠습니까? 이 6,000픽셀 이미지의 크기를 조정해야 합니까? 아니, 브라우저가 알아서 하도록 놔두세요.

Google은 Cremin이 부르는 "기능"이 로드 속도에 크게 부정적인 영향을 줄 수 있음을 발견했습니다. 이제 평균적인 페이지에는 수십 대의 서버에 저장된 헤드라인, 이미지, 버튼 등 수백에서 수천 개의 요소가 있습니다. 이러한 요소가 최적화되지 않으면 결과는 "예측할 수 없고" "휘발성" 로딩 환경이 될 수 있습니다.

연구원들은 심지어 페이지의 요소 수를 가장 정확한 전환 예측 변수로 식별하기까지 했습니다. 그들은 더 적은 것이 더 많다고 주장합니다. 페이지의 요소가 400에서 6,000으로 증가하면 방문자가 전환될 확률이 95% 감소합니다.

데이터에 따르면 인터넷의 최고 디자이너들은 2014년부터 이 사실을 알고 있었습니다. 대부분의 웹사이트에서 평균 페이지 크기는 꾸준히 증가했지만 상위 10개는 코너를 돌았습니다.

이들에게 페이지 "가중치"(데이터 크기)는 지난 몇 년 동안 감소했습니다. 다른 모든 사람들은 기능증의 희생자인 것 같습니다.

Google에 따르면 테스트한 페이지의 70%는 1MB 이상, 36%는 2MB, 12%는 4MB 이상이었습니다. 결과적으로 방문자가 오래 머무를 가능성이 거의 없습니다. 빠른 3G 연결(전 세계 대부분의 셀룰러 연결 속도)을 통해 1.49MB를 로드하는 데 약 7초가 걸립니다.

문제 해결

가중 페이지의 경우 가장 좋은 해결책은 예방입니다. 다행스럽게도 예방은 Google이 "성과 예산"이라고 부르는 것을 설정하는 것만큼 쉽습니다. 페이지 구축을 시작하기 전에 페이지 로드 속도("예산")를 결정합니다. 그런 다음 예산 범위 내에서 페이지를 디자인하십시오.

L'Oreal의 Hakan Nizam은 "설계 기준의 일부인 경우 빠르게 제공하는 것이 훨씬 더 효율적입니다."라고 말합니다. “개발자 대역폭을 확보할 수 있습니다. 개발자는 전환율에 영향을 미치는 다른 요소에 집중할 수 있습니다. 다른 차별화 요소로 넘어가기 위해서는 스피드 대화를 풀어야 한다”고 말했다.

Google 블로그 게시물에서 Jason Cohen은 예산을 다른 광고 제한 사항에 비유했습니다.

디자인 프로세스의 일부로 속도를 포함하는 것은 다른 크리에이티브 매체의 한계를 설명하는 것과 다르지 않습니다. 디자이너는 흑백 인쇄 출판물을 위해 4색 광고를 만들거나 15초 슬롯에 대해 30초 비디오를 제작하지 않습니다. 매체의 한계 내에서 디자인하지 않으면 결과는 좋지 않습니다.

모바일이 데스크톱 인터넷 트래픽을 추월하고 있음에도 불구하고 채널은 여전히 ​​대부분의 사용자 경험 메트릭에서 데스크톱보다 뒤쳐져 있습니다. 디자이너는 모바일을 나중에 생각하는 것으로 간주하지 않아야 합니다. 자체 매체이며 사용자 경험은 이를 반영해야 합니다.

물론 "예산" 기술은 처음부터 시작한다고 가정합니다. 이미 느린 클릭 후 방문 페이지를 최적화하려는 경우 연구원은 요소에 대한 감사를 수행하고 타사 스크립트를 모니터링하여 가중치에 가장 기여하는 요소를 찾을 것을 권장합니다. 그런 다음 그에 따라 최적화하도록 축소합니다.

2. 너무 많은 이미지

그들의 연구에서 하나의 특정 이미지가 Google 테스터의 관심을 끌었습니다. 무게는 무려 16MB였습니다. 계속해서 계속해서 페이지를 방해하는 이미지를 찾았습니다.

연구자들은 "파비콘, 로고, 제품 이미지와 같은 그래픽 요소는 페이지 전체 무게의 최대 2/3(즉, 수백 킬로바이트)를 쉽게 구성할 수 있습니다."라고 경고했습니다.

기계 학습 모듈의 도움으로 그들은 두 번째로 가장 정확한 전환 예측 변수가 페이지의 이미지 수라는 것을 발견했습니다. 방문자를 성공적으로 전환하지 못한 페이지와 비교하여 38% 적은 수의 이미지를 표시할 수 있는 페이지.

문제 해결

페이지 속도를 크게 높이는 가장 쉬운 방법 중 하나는 빠른 이미지 최적화입니다. 최선을 다해…

• 불필요한 이미지 줄이기

제품의 6가지 다른 각도를 보여줘야 합니까? 그 스톡 사진이 클릭 후 방문 페이지에 실제로 가치를 더하고 있습니까? 이미지의 텍스트를 인코딩해야 합니까, 아니면 선택한 글꼴을 Google 글꼴 또는 Adobe Typekit과 통합할 수 있습니까? 대답이 "아니오"인 경우 디자인에서 일부 이미지를 잘라내는 것을 고려하십시오.

• 필요한 이미지의 크기 줄이기

이러한 이미지가 모두 필요한 경우 몇 가지 다른 도구와 전략을 사용하여 대역폭을 절약할 수 있습니다. 먼저 이미지 파일 형식을 알아야 합니다. PNG를 JPEG로 바꾸면 크기가 많이 줄어들고 결과적으로 속도가 빨라집니다. 반면에 이미지의 품질도 떨어집니다. 사용할 형식을 결정하는 방법에 대한 자세한 내용은 이 게시물을 확인하세요.

둘째, 도구 사용에 대해 생각하십시오. 연구원들은 페이지의 30%가 이미지 압축기의 도움으로 250KB의 데이터를 절약할 수 있다고 주장합니다. Google의 Guetzli와 Zopfli는 시도해 볼 가치가 있습니다.

3. 자바스크립트 사용, 전체 페이지 로드 시간

이미지 및 버튼과 같은 요소를 사용자에게 표시하기 전에 페이지를 구성하는 HTML 코드를 브라우저에서 수신하고 해석해야 합니다. 걸리는 시간을 "DOM 준비 시간"이라고 하며, 연구원들은 페이지 이탈을 가장 정확하게 예측한다고 밝혔습니다.

Google의 데이터에 따르면 반송된 사용자 세션의 DOM 준비 시간은 반송되지 않은 세션보다 55% 더 느립니다. 이러한 중요성의 속도 저하는 종종 많은 타사 분석 도구, 광고 및 소셜 위젯에서 사용되는 HTML 코드 구문 분석을 중지하는 코드 유형인 JavaScript로 인해 발생합니다.

Daniel An과 Pat Meenan은 경기 침체를 정리되지 않은 식당과 비교합니다.

당신이 식당에 있고 웨이터가 음식을 가져올 준비가 되어 있지만 먼저 다른 식당에서 소금과 후추가 배달될 때까지 기다려야 한다고 상상해 보십시오.

그러나 JavaScript가 모바일 페이지의 속도를 늦추는 유일한 코드는 아닙니다. CSS, HTML 및 이미지 및 글꼴과 같은 요소를 처리하는 데 필요한 수많은 요청으로 인해 전체 페이지 로드 시간에 지연이 발생합니다. 이는 이탈률을 두 번째로 정확하게 예측하는 지표입니다. 사용자가 이탈한 평균 웹 페이지는 이탈하지 않은 평균 페이지보다 2.5초 느렸습니다.

문제 해결

모바일 브라우징 경험을 개선하기 위해 Google은 광고 프로그램용 AMP 및 AMP를 개발했습니다. 두 프레임워크 모두 개발자에게 빠른 속도로 모바일 경험을 제공하는 데 필요한 도구를 제공합니다. 여기에는 다음이 포함됩니다.

• AMP HTML: 이것은 우리가 하이퍼텍스트 마크업 언어로 인식하는 것(대부분의 웹페이지의 기초를 구축하는 데 사용되는 태그, 숫자 및 문자 시스템)의 제거된 기본 버전입니다.

• AMP JavaScript: 인기 있는 코드의 Google AMP 버전은 타사 및 작성자 작성 JavaScript의 사용을 제한합니다.

• AMP CDN: 이를 통해 개발자는 Google 서버에 웹페이지의 캐시된 버전을 저장할 수 있습니다. 캐시된 버전은 모든 데이터가 한 곳에 포함된 페이지의 디지털 스냅샷입니다. 결과적으로 사용자에게 더 빨리 제공될 수 있습니다.

함께 프레임워크의 요소는 평균보다 10배 적은 데이터를 사용하는 페이지와 6배 더 빠르게 로드되는 광고의 기초를 형성합니다.

여기로 이동하여 AMP 시작에 대해 자세히 알아보세요.

모바일 페이지 속도는 얼마입니까?

클릭 후 방문 페이지가 모바일에 최적화되어 있습니까? 쓸모없는 이미지, 투박한 요소, 무거운 JavaScript가 없습니까?

Google의 모바일 친화적 테스트를 통해 알아낸 다음 다음 페이지를 만들기 전에 클릭 후 방문 페이지 환경을 최적화하는 방법에 대한 가이드를 확인하세요.