Google의 web.dev 문서가 '좋음'이라고 부르는 페이지는 세 가지 기준으로 정의됩니다. 로딩 지표인 Largest Contentful Paint는 페이지가 처음 로드되기 시작한 시점으로부터 2.5초 이내에 발생해야 합니다. 응답성 지표인 Interaction to Next Paint는 200밀리초 이하여야 합니다. 시각적 안정성 지표인 Cumulative Layout Shift는 0.1 이하여야 합니다.1 같은 페이지는 측정해야 할 수치가 휴대폰과 데스크톱으로 나눈 페이지 로드의 75번째 백분위수라고 덧붙입니다.1 독자 네 명 중 세 명이 좋은 경험을 할 때에만 페이지가 통과하는 것입니다.
공개된 기록은 세 지표 중 두 지표의 원인으로 광고를 지목합니다
Cumulative Layout Shift 최적화에 관한 web.dev 페이지는 광고가 웹에서 레이아웃 이동을 일으키는 가장 큰 요인 중 하나라고 밝힙니다.2 이 페이지에 따르면 삽입형 위젯은 로드되기 전까지 콘텐츠 크기를 알지 못하는 경우가 많아, 이를 제공하는 플랫폼이 항상 공간을 확보해 두지는 않습니다.2 이 페이지가 제시하는 해결책은 슬롯에 최소 높이나 가로세로 비율을 지정하여 초기 레이아웃에서 공간을 확보하는 것입니다.2 또한 뷰포트 상단 근처에 삽입되는 콘텐츠가 대개 더 큰 이동을 일으킨다고 덧붙입니다.2 각 해결책은 광고가 도착하기 전까지 크기를 알 수 없는 직사각형이라는 전제를 깔고 있습니다.
Interaction to Next Paint는 또 다른 비용을 측정합니다. 이 지표는 독자가 방문하는 동안 일어나는 모든 클릭, 탭, 키보드 상호작용의 지연 시간을 관찰하며, INP가 200밀리초 이하이면 응답성이 좋은 것으로 간주합니다.3 문서는 그 지연의 일부를 메인 스레드의 긴 작업 탓으로 봅니다.3 HTTP Archive의 2024 Web Almanac은 데스크톱 컴퓨터의 긴 애니메이션 프레임을 스크립트 카테고리별로 분류했습니다.4 광고는 INP의 대부분이 '나쁨' 범위에 속한 카테고리 중 하나였습니다.4
페이지의 단어에 붙는 광고에는 확보할 슬롯이 없습니다
단락에 이미 있는 단어에 붙는 광고에는 직사각형이 필요 없으며, 바로 그것이 AdBubbles가 판매하는 형식입니다. 퍼블리셔가 스크립트 adbubbles.js 하나를 추가하면, 글 속에서 구매된 단어에 옅은 점선 밑줄이 표시됩니다. 그 단어에 마우스를 올리거나 탭하면 "Ad"(광고) 표시, 짧은 제목과 본문, 광고주의 도메인, 링크 하나가 담긴 작은 버블이 열립니다. 스크립트는 의존성 없는 순수 JavaScript로 된 정적 파일 하나이며, 페이지의 DOM이 준비된 후에 로드됩니다. 독자가 동작하기 전까지 페이지에는 버블도, 빈 슬롯도 없습니다.
AdBubbles는 쿠키를 설정하지 않고, 식별자를 저장하지 않으며, 독자의 개인정보를 수집하지 않습니다. 임베드는 세 가지 비컨을 보냅니다. 페이지 로드마다 조회 1회, 버블이 1초 동안 표시되었을 때 열람 1회, 링크를 따라갔을 때 클릭 1회입니다. 그 밖에는 아무것도 페이지를 떠나지 않습니다. 작동 방식 페이지에 설명된 대로, AdBubbles가 하는 일은 페이지의 단어를 그 단어를 구매한 광고주와 연결하는 것입니다. 어떤 사람이 광고를 볼지 고르지 않고, 페이지나 사이트 사이에서 독자를 따라다니지 않으며, 결과를 약속하지 않습니다. 임베드가 사이트 지표에 어떤 영향을 미치는지는 그 사이트 자체의 측정만이 보여 줄 수 있습니다.
Cumulative Layout Shift의 정의는 버블이 열리는 방식과 관련이 있습니다. 이 지표는 예상치 못한 이동을 집계하며, 탭, 클릭, 키 입력 같은 개별 입력 후 500밀리초 이내에 일어난 이동은 표시되어 제외될 수 있습니다.5 휴대폰에서는 탭으로, 키보드에서는 Enter로 버블이 열리며, 둘 다 개별 입력입니다. 데스크톱에서는 짧은 호버 지연 후에 버블이 열리는데, 그때 무언가가 움직이는지는 사이트의 현장 데이터로 확인해야 할 문제입니다.
임베드가 페이지의 어느 부분까지 읽을 수 있는지는 퍼블리셔가 정합니다. 범위는 임베드가 검사하는 요소로, 예를 들면 article 요소이며, 그 안에서 임베드는 제목, 링크, 코드, 양식 컨트롤, 내비게이션, 머리글, 바닥글, 그리고 data-noads로 표시된 모든 요소를 건너뜁니다. 구매된 각 단어가 처음 나오는 곳에 밑줄을 긋고, 한 단락에 버블을 두 개 넣지 않으며, 퍼블리셔가 정한 최대 개수에서 멈춥니다. 설정 옵션은 범위, 페이지당 최대 개수, 제외할 광고주 카테고리입니다.
90점은 실험실에서 나오고, 통과는 독자에게서 나옵니다
성능 목표에서 말하는 90점은 Core Web Vitals 결과가 아니라 Lighthouse의 구간을 가리킵니다. Lighthouse 성능 점수에 관한 Chrome 문서는 90~100점을 초록색으로 표시하고 '좋음'이라고 부르며, 50~89점은 주황색, 0~49점은 빨간색입니다.6 PageSpeed Insights는 시뮬레이션 환경에서 Lighthouse를 실행해 이 점수를 산출하며, 그 결과를 실험실 데이터라고 부릅니다.7 실제 독자에게서 나온 현장 데이터는 같은 보고서에 나란히 표시됩니다.7
이 점수는 다섯 가지 지표 점수의 가중 평균입니다.6 Lighthouse 10의 표에서 Total Blocking Time은 30%, Largest Contentful Paint와 Cumulative Layout Shift는 각각 25%, First Contentful Paint와 Speed Index는 각각 10%를 차지합니다.6 Interaction to Next Paint는 이 다섯 가지에 포함되지 않습니다. 따라서 페이지가 초록색 구간에 있으면서도 독자는 탭이 반영되기까지 200밀리초보다 오래 기다릴 수 있습니다.
Core Web Vitals 평가는 현장 데이터를 바탕으로 합니다. PageSpeed Insights는 실제 사용자 데이터를 Chrome 사용자 경험 보고서(Chrome User Experience Report)에서 가져오며, 직전 28일의 수집 기간을 다룹니다.7 데이터가 충분한 페이지는 세 지표의 75번째 백분위수가 모두 '좋음'일 때 평가를 통과합니다.7 Google 검색 센터는 좋은 Core Web Vitals가 다른 페이지 경험 요소와 함께 핵심 순위 시스템이 보상하려는 것과 일치한다고 말합니다.8 통과는 세 가지 현장 수치에 관한 판단이고, 90점은 가중된 실험실 평균에 관한 판단입니다.
Chrome은 독자의 기기를 지나치게 많이 쓰는 광고를 언로드합니다
Chrome은 독자의 대역폭과 프로세서를 지나치게 많이 소비하는 광고에도 제한을 둡니다. 과도한 광고 개입(heavy ad intervention)에 관한 Chrome 문서는 세 가지 조건을 제시합니다.9 첫째는 4메가바이트를 넘는 네트워크 대역폭이고, 둘째는 30초 동안 15초를 넘는 메인 스레드 사용 시간입니다. 셋째는 총 60초를 넘는 메인 스레드 사용 시간입니다. 이 중 하나라도 넘는 광고 프레임은 언로드됩니다.9
이 수치는 자체 네트워크 트래픽과 메인 스레드 작업을 가진 별도의 프레임에서 실행되는 광고를 기준으로 합니다. 버블은 광고 프레임이 아니라 페이지 자체 문서 안의 Shadow DOM에서 렌더링됩니다. 임베드가 읽는 사이트별 데이터는 캠페인이 바뀔 때 다시 생성되어 엣지에 캐시되는 정적 파일입니다. 따라서 페이지 조회가 광고 서버에 부담을 주지 않으며, 유일한 동적 요청은 작은 비컨뿐입니다.
비교해야 할 수치는 점수가 아니라 사이트 자체의 75번째 백분위수입니다
2024 Web Almanac은 퍼블리셔가 자기 출처(origin)와 비교해 볼 수 있는 기준값을 제공합니다. 이에 따르면 웹사이트의 72%가 좋은 CLS 점수를 얻었고 11%는 나쁜 점수를 받았습니다.4 좋은 INP는 휴대폰에서 웹사이트의 74%, 데스크톱 컴퓨터에서 97%였습니다.4 INP를 포함해 측정한 전체 Core Web Vitals가 좋은 비율은 휴대폰에서 43%, 데스크톱 컴퓨터에서 54%였습니다.4
퍼블리셔 계정과 임베드는 설정 비용이 없습니다. 설정한 뒤에 봐야 할 수치는 초록색 구간이 아닙니다. 데이터가 충분한 출처의 경우, PageSpeed Insights는 직전 28일간의 75번째 백분위수 Interaction to Next Paint와 Cumulative Layout Shift를 보여 줍니다.7 Search Console의 Core Web Vitals 보고서는 사이트 페이지의 성능을 보여 줍니다.8 스크립트를 추가하기 전과 추가하고 28일이 지난 후에 읽은 이 두 가지 현장 수치야말로 90점이라는 점수가 알려 줄 수 없는 숫자입니다.