CLS를 0.2만큼 최적화하자 세션당 페이지 조회수가 15% 증가하고, 세션 시간이 13% 늘어났으며, 이탈률은 1.72%포인트 감소했습니다.
Yahoo! JAPAN은 일본에서 가장 큰 미디어 회사 중 하나로 월 790억 회 이상의 페이지 조회수를 제공합니다. 뉴스 플랫폼인 Yahoo! JAPAN News는 월간 페이지 조회수가 220억 회를 넘으며 사용자 환경 개선을 전담하는 엔지니어링팀이 있습니다.
코어 웹 바이탈을 지속적으로 모니터링한 결과, 사이트의 개선된 누적 레이아웃 변경 (CLS) 점수가 세션당 페이지 조회수 15% 증가 및 세션 시간 13% 증가와 관련이 있음을 확인했습니다.
0.2
CLS 개선
15.1%
세션당 페이지 조회수 증가
13.3%
세션 시간 연장
페이지 콘텐츠가 예기치 않게 움직이면 의도하지 않은 클릭, 페이지 방향 감각 상실, 궁극적으로 사용자 불만이 발생하는 경우가 많습니다. 불만족한 사용자는 오래 머물지 않는 경향이 있습니다. 사용자의 만족도를 높이려면 페이지 레이아웃이 사용자 여정의 전체 수명 주기 동안 안정적으로 유지되어야 합니다. Yahoo! JAPAN News는 이 개선사항이 비즈니스상 중요한 참여도 측정항목에 상당히 긍정적인 영향을 미쳤다고 말했습니다.
CLS를 개선한 방법에 관한 기술적 세부정보는 Yahoo! JAPAN News 엔지니어링팀 게시물을 참고하세요.
문제 식별
CLS를 비롯한 Core Web Vitals를 모니터링하는 것은 문제를 포착하고 출처를 파악하는 데 중요합니다. Yahoo! JAPAN News의 경우 Search Console에서 성능 문제가 있는 페이지 그룹을 한눈에 파악할 수 있었고 Lighthouse를 통해 페이지별로 페이지 경험을 개선할 수 있는 기회를 파악할 수 있었습니다. 이러한 도구를 사용하여 도움말 세부정보 페이지의 CLS가 좋지 않다는 것을 발견했습니다.
누적 레이아웃 변경의 누적 부분을 기억해야 합니다. 점수는 전체 페이지 수명 주기를 통해 캡처됩니다. 실제 환경에서는 페이지 스크롤이나 버튼 탭과 같은 사용자 상호작용의 결과로 발생하는 변화가 점수에 포함될 수 있습니다. 현장 데이터에서 CLS 점수를 수집하기 위해 팀은 web-vitals JavaScript 라이브러리 보고를 통합했습니다.
팀은 Chrome DevTools를 사용하여 페이지에서 레이아웃을 변경하는 요소를 파악했습니다. DevTools의 레이아웃 변경 영역은 레이아웃 변경이 발생할 때마다 파란색 직사각형으로 강조 표시하여 CLS에 기여하는 요소를 시각화합니다.
첫 번째 뷰를 위해 기사 상단의 히어로 이미지가 로드된 후 레이아웃이 전환되는 것으로 확인되었습니다.
위의 예시에서 이미지 로딩이 완료되면 텍스트가 아래로 푸시됩니다(위치 변경사항은 빨간색 선으로 표시됨).
이미지의 CLS 개선
고정 크기 이미지의 경우 img 요소에 width 및 height 속성을 지정하고 최신 브라우저에서 제공되는 CSS aspect-ratio 속성을 사용하여 레이아웃 전환을 방지할 수 있습니다. 하지만 Yahoo! JAPAN News는 최신 브라우저뿐만 아니라 iOS 9과 같이 비교적 오래된 운영체제에 설치된 브라우저도 지원해야 했습니다.
이미지가 로드되기 전에 마크업을 사용하여 페이지의 공간을 예약하는 방법인 가로세로 비율 상자를 사용했습니다. 이 방법을 사용하려면 이미지의 가로세로 비율을 미리 알고 있어야 하며, 이는 백엔드 API에서 가져올 수 있습니다.
결과
Search Console에서 실적이 좋지 않은 URL 수가 98% 감소했으며 실험실 데이터의 CLS가 약 0.2에서 0으로 감소했습니다. 더 중요한 것은 비즈니스 측정항목이 여러 개 개선되었으며,
Yahoo! JAPAN News는 CLS 최적화 전후에 사용자 참여도 측정항목을 비교한 결과 다음과 같은 여러 가지 개선사항을 확인했습니다.
15.1%
세션당 페이지 조회수 증가
13.3%
세션 시간 연장
1.72%*
이탈률 감소 (*%)
CLS 및 기타 Core Web Vitals 측정항목을 개선하여 Yahoo! JAPAN News에도 Chrome Android의 컨텍스트 메뉴에 '빠른 페이지' 라벨이 추가되었습니다.
레이아웃 전환은 불편을 끼치고 사용자가 더 많은 페이지를 읽지 못하게 하지만 적절한 도구를 사용하고 문제를 파악하고 권장사항을 적용하면 개선할 수 있습니다. CLS를 개선하면 비즈니스를 개선할 수 있습니다.
자세한 내용은 Yahoo! JAPAN 엔지니어링팀 게시물을 참고하세요.