랜딩 페이지 로딩 속도가 전환율에 미치는 영향

로딩 속도가 제안을 볼 사람을 정합니다

모든 랜딩 페이지에는 대기줄이 있습니다. 누군가 광고를 누르면 브라우저가 파일을 받기 시작하고, 방문자는 기다립니다. 신호가 약한 4G 환경의 휴대폰에서 무거운 페이지는 4초에서 5초 동안 빈 화면으로 있을 수 있습니다. 헤드라인이 그려지기 전에 꽤 많은 방문자가 나갑니다. 제안도 못 보고 버튼까지도 못 옵니다. 카피가 아무리 훌륭해도 소용이 없습니다. 유료 트래픽이라면 그 클릭 비용은 어차피 나갑니다. 로딩 속도가 여러분이 만든 나머지 전부를 평가할 사람 수를 정하는 겁니다.

추적할 가치가 있는 숫자 세 개

Google이 공개한 기준값 세 개는 목표로 삼기 좋습니다. Largest Contentful Paint는 2.5초 안에 들어와야 합니다. 보통 히어로 이미지나 헤드라인이 다 그려지는 시점입니다. Interaction to Next Paint는 200밀리초 아래로 유지해야 탭이 즉각적으로 느껴집니다. Cumulative Layout Shift는 0.1 아래여야 읽는 동안 레이아웃이 흔들리지 않습니다. Google은 실제 방문의 75번째 백분위수로 채점하고 모바일과 데스크톱을 나누니 둘 다 확인하세요. 현장 데이터는 몇 주씩 늦게 반영되니, 오늘 고친 것은 랩 테스트로 확인하면 됩니다.

페이지를 느리게 만드는 것들

저희가 점검하는 사이트 대부분에서 같은 범인이 나옵니다. 히어로 영상이 자동 재생되면서 아무도 스크롤하기 전에 몇 메가바이트를 내려받습니다. 스크린샷은 3000픽셀 폭으로 내보내져 600픽셀 자리에 들어갑니다. 두 개면 충분한 폰트 굵기를 네 개 불러오고, 하나하나가 텍스트가 그려지는 걸 붙잡습니다. 그다음 덧붙임이 옵니다. 채팅 위젯, 히트맵 녹화 스크립트, 광고 픽셀 두 개, 그리고 어떤 버전을 보여줄지 고르는 동안 렌더링을 막는 A/B 테스트 스크립트입니다. 하나하나는 붙일 때 공짜처럼 느껴집니다. 합계를 세는 사람은 없습니다.

이번 주에 시작할 곳

히어로부터 시작하세요. 보통 LCP 요소가 히어로입니다. 압축한 WebP나 AVIF로 내보내고, 화면 크기에 맞춰 사이즈를 잡고, 지연 로딩은 걸지 마세요. 자동 재생 영상은 정지 이미지와 재생 버튼으로 바꾸세요. 이미지, 임베드, 배너에는 높이를 미리 잡아둬서 페이지가 모양을 유지하게 하세요. 그다음 네트워크 탭을 열고 용량순으로 정렬해, 석 달째 아무도 확인하지 않은 외부 스크립트를 지우세요. 속도를 제한한 모바일 데이터에서 실제 기기로 다시 확인하세요. 페이지는 대개 무언가를 덜어낼 때 빨라집니다.