별점 위젯이 CLS에 미치는 비용

CLS란 무엇이며, 별점이 왜 CLS를 발생시키는가?

누적 레이아웃 이동(CLS)은 페이지가 안정되는 동안 보이는 콘텐츠가 얼마나 많이 이동하는지를 측정합니다. 사용자가 요청하지 않았는데 화면에 있던 요소가 새 위치로 이동할 때마다 그 이동이 점수로 기록되며, 점수는 누적됩니다. CLS 점수가 높은 페이지는 읽던 위치를 잃게 만들거나, 버튼이 손가락 아래서 밀려나 잘못된 곳을 누르게 만드는 페이지입니다.

별점은 대표적인 CLS 원인입니다. 대부분의 리뷰 앱은 초기 HTML이 도착한 후 스크립트를 통해 평점을 로드합니다. 잠시 동안 페이지에는 평점이 없고 제목과 가격이 위에 놓여 있다가, 위젯이 도착하면 그 아래 모든 내용을 아래로 밀어냅니다. 그 밀림이 바로 레이아웃 이동입니다.

리뷰 위젯은 실제로 페이지를 얼마나 이동시키는가?

생각보다 많이 이동합니다. 별점 행은 작아 보이지만, 별점만 오는 경우는 드뭅니다. 같은 삽입으로 평점 숫자, 리뷰 수, "리뷰 N개 보기" 링크, 때로는 요약 바까지 한꺼번에 나타나며, 이전에 높이가 0이었던 블록이 일순간에 생겨납니다.

더 문제인 것은, 이 삽입이 주로 상품 페이지 상단 폴드 위에 일어난다는 점입니다. 아직 스크롤되지 않은 페이지 하단의 이동은 점수에 거의 반영되지 않습니다. 그러나 쇼퍼가 제목을 읽으며 구매 버튼으로 손을 뻗는 순간 히어로 영역에서 발생하는 이동은 사용자를 불편하게 할 뿐 아니라 점수에도 크게 반영됩니다.

CLS가 체감 불편 이상으로 중요한 이유

CLS는 Core Web Vitals 중 하나이고, Core Web Vitals는 순위 결정 요소입니다. Google은 페이지 경험(CLS 포함)이 페이지 순위에 실질적이지만 적당한 영향을 미친다고 명시했습니다. 콘텐츠나 링크만큼 강력한 변수는 아니지만, 경쟁이 치열한 상품 키워드에서 지고 싶지 않은 타이브레이커입니다.

사용자 비용은 과소평가하기 쉬운 부분입니다. 눈에 띄게 재조립되는 페이지는 조잡하고 약간 고장난 것처럼 느껴지며, 그 인상은 쇼퍼가 카드 번호를 입력할지 결정하는 바로 그 순간에 생깁니다.

• 순위: CLS는 Google이 사용하는 페이지 경험 신호의 일부입니다.
• 전환율: 구매 결정 중 레이아웃이 이동하면 신뢰가 깎입니다.
• 잘못된 클릭: 이동하는 레이아웃은 쇼퍼가 엉뚱한 곳을 누르게 만듭니다.
• 체감 속도: 안정된 페이지는 같은 로드 시간이라도 더 빠르게 느껴집니다.

별점이 레이아웃을 이동시키지 않도록 하는 방법

두 가지 명확한 해결책이 있으며, 각각 다른 수준의 작업이 필요합니다.

첫 번째는 공간을 미리 확보하는 것입니다. 평점 블록이 예를 들어 28픽셀 높이라면, 위젯이 도착하기 전에 CSS로 컨테이너에 그 높이를 지정해 두면 늦게 로드되는 별점이 이미 마련된 자리에 내려앉습니다. 아래 내용은 자리를 내줄 필요가 없었기 때문에 이동하지 않습니다. 확보 높이가 실제 로드되는 크기와 일치하는 한, 이 방법은 거의 모든 위젯에서 저비용으로 작동합니다.

두 번째는 서버에서 평점을 페이지 HTML에 직접 렌더링하는 것입니다. 별점이 첫 번째 응답에 이미 포함되어 있으면 스크립트가 삽입할 필요가 없습니다. 콘텐츠가 처음부터 그곳에 있기 때문에 경쟁이 없는 더 깔끔한 해결책입니다. 다만 리뷰가 서드파티 위젯 안에만 있는 경우 도입이 더 어렵습니다.

• 평점 컨테이너에 CSS min-height 또는 aspect-ratio로 높이를 미리 확보하십시오.
• 평점 내부에서 늦게 로드되어 크기가 변하는 폰트나 이미지를 피하십시오.
• 가능하면 서버 렌더링 평점을 사용하여 삽입 자체를 없애십시오.
• 기기와 네트워크에 따라 CLS가 달라지므로, 단일 실험실 측정이 아닌 실제 사용자 데이터로 측정하십시오.

iframe 위젯은 CLS에 유리한가, 불리한가?

iframe은 부모 수준에서 크기가 고정되는 경우가 많아 콘텐츠가 도착해도 박스가 커지지 않으므로 레이아웃 이동을 억제하는 데 유리할 수 있습니다. 그러나 같은 이유로 크롤러와 답변 엔진에게 불투명하며, 내부의 리뷰 텍스트는 페이지의 일부로 읽히지 않는 경향이 있습니다.

솔직히 말씀드릴 트레이드오프가 있습니다. iframe은 레이아웃을 보호하는 대신 콘텐츠를 페이지를 읽는 시스템에게 숨깁니다. 서버 렌더링 평점은 레이아웃을 보호하면서 텍스트도 읽을 수 있게 합니다. 선택할 수 있다면 서버 렌더링 방식이 두 면 모두에서 우수하지만, 설정에 더 많은 작업이 필요합니다.

CLS를 수정하면 리뷰가 검색에 노출되는 데 도움이 되는가?

간접적으로는 도움이 됩니다. 단, 어느 정도까지만입니다. 공간을 확보하면 이동이 멈추는데, 이는 체험 측면에서 실질적인 개선이고 순위 측면에서는 작은 개선입니다. 그러나 빈 박스를 미리 확보하는 것만으로는 내부의 리뷰 텍스트를 크롤러나 답변 엔진이 읽을 수 있게 되지 않습니다. 스크립트를 실행하지 않는 시스템에게는 스크립트로 채워지는 예약된 슬롯도 여전히 리뷰 텍스트를 숨깁니다.

모든 측면에서 도움이 되는 방법은 평점과 리뷰를 서버 HTML에 포함시키는 것입니다. 이동이 없고, 검색과 AI가 텍스트를 읽을 수 있습니다. 대부분의 리뷰 앱은 페이지 내 쇼퍼를 위해 만들어졌고 위젯에서 멈추는데, 이것이 BeyondReviews가 해결하고자 하는 격차입니다. 이미 보유한 리뷰를 렌더링하여 읽을 수 있고 인용 가능하게 만드는 것, CLS 비용을 치르며 크롤러에게 아무것도 알려주지 않는 박스 안에 가두는 것이 아닙니다.

정리

페이지 로드 후 나타나는 별점은 작은 시각적 세부 사항이지만 그 비용은 상당합니다. 페이지에서 가장 값비싼 위치에서 레이아웃을 이동시키고, Core Web Vitals 지표를 잘못된 방향으로 밀며, 구매 순간에 신뢰를 깎습니다. 정확한 공간을 미리 확보하면 저비용으로 이동을 제거할 수 있습니다. 서버에서 평점을 렌더링하면 제대로 제거할 수 있으며, 동시에 리뷰 텍스트도 읽을 수 있게 됩니다. 가능하면 두 번째 방법을 선택하고, 그렇지 못한 경우에는 첫 번째를 택하십시오.

자주 묻는 질문