PubConsent CMP가 Chrome DevTools로 식별된 응답성 문제를 해결하기 위해 브라우저의 스케줄러 API를 사용하는 수익 창출 전략을 사용하여 고객의 INP를 최대 64% 줄인 방법.
동의 관리 플랫폼 (CMP)은 웹사이트에서 쿠키 및 추적 기술 사용에 대한 사용자 동의를 얻어 개인 정보 보호 규정을 준수하도록 지원하는 도구입니다. CMP는 법률 준수를 보장하는 주된 목표일 뿐만 아니라 서드 파티 스크립트로서 성능과 사용자 경험에 미치는 영향을 최소화해야 합니다.
PubConsent CMP는 PubTech의 최신 제품입니다. 실적에 중점을 두고 설계된 PubConsent CMP는 가볍게 설계되어 최적의 사용자 경험을 보장하고 전반적인 웹사이트 성능에 미치는 영향을 최소화합니다.
PubTech는 다음 페인트에 대한 상호작용 (INP) 측정항목을 도입하여 CMP의 응답성 문제를 발견할 수 있었습니다. 이 우수사례에서 PubTech는 PubConsent CMP 플랫폼의 응답성 문제를 어떻게 해결했는지, INP가 2024년 3월 Core Web Vitals 중 하나가 되기 전에 어떻게 INP를 개선했는지 보여줍니다. 이는 CMP 제품에서 가능한 한 최상의 성능을 제공하기 위한 변함없는 노력을 보여줍니다.
PubTech가 성능에 관심을 두는 이유는 무엇인가요?
PubConsent CMP는 대부분의 CMP와 마찬가지로 사이트 페이지에서 서드 파티 스크립트로 구현된 동의 관리 기능을 제공합니다. 응답성을 포함한 CMP 제품의 성능에 미치는 영향을 완화하는 것은 성공적인 CMP 통합을 보장하는 데 중요합니다.
웹사이트 소유자는 실적에 우선순위를 두고 PubConsent CMP 스크립트를 가볍게 유지하여 사용자 경험의 품질을 유지하는 동시에 중요한 동의 관리 기능을 통합하는 것 사이에서 섬세한 균형을 유지할 수 있습니다.
<ph type="x-smartling-placeholder">CMP가 제공하는 기능의 중요성과 이것이 실적에 미칠 수 있는 영향을 고려하여 PubTech는 다음과 같은 목표를 설정했습니다.
- PubConsent CMP 제품이 INP에 미치는 영향을 최소화합니다.
- CMP 제품으로 인해 발생하는 장기 작업을 줄입니다.
- 페이지의 INP에 부정적인 영향을 미칠 수 있는 총 차단 시간 (TBT)을 줄입니다.
INP 측정 방법
PubTech는 Chrome DevTools를 사용하여 초기 분석을 수행하고 느린 상호작용을 수동으로 진단했습니다. PubTech는 이 워크플로를 통해 페이지 응답성에 영향을 미치는 특정 문제를 정확히 찾아낼 수 있었습니다. 예를 들어 CMP 제품 내에서 모든 쿠키를 수락한 후 쿠키 동의 대화상자를 닫는 클릭 상호작용으로 인해 긴 작업이 발생하여 사용자 인터페이스의 렌더링 업데이트가 지연되었습니다. 다음 이미지에서 볼 수 있듯이 사용자 인터페이스는 긴 작업이 완료될 때까지 대화상자가 닫혔음을 보여주기 위해 업데이트되지 않았습니다.
모든 쿠키를 허용하는 버튼과 마찬가지로, 모든 쿠키를 거부하거나 쿠키 환경설정을 맞춤설정하는 버튼은 모두 PubConsent CMP 아키텍처의 동일한 워크플로를 따릅니다. 따라서 이 우수사례에서 자세히 설명하는 개선사항이 CMP 제품에서 일련의 사용자 상호작용에 영향을 미쳤습니다.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">이러한 지연으로 인해 작업 중에 패널이 잠긴 상태에 있는 것처럼 보일 수 있습니다. 체감할 정도로 오랫동안 렌더링 업데이트를 차단했기 때문에 페이지의 INP에 부정적인 영향을 미쳤습니다.
<ph type="x-smartling-placeholder">PubTech가 버튼과 링크에 대해 INP를 최적화한 방법
INP를 개선하기 위해 PubConsent CMP에 다양한 수익 전략이 채택되었습니다.
우선순위가 높은 작업 생성
다음 코드 스니펫에 표시된 yieldToMainUiBlocking 메서드는 가능한 경우 scheduler.yield로 양보하여 우선순위가 높은 JavaScript 작업을 최적화하도록 설계되었지만, postTask를 사용할 수 있는 경우 우선순위가 user-blocking (높음)인 postTask로 대체되고 최종적으로 아무것도 없는 상태로 돌아갑니다.
여기서 setTimeout는 사용하지 않았습니다. yieldToMainUiBlocking 메서드는 내부 CMP 설정 작업과 이러한 우선순위를 유지해야 하는 높은 우선순위의 작업을 처리하도록 설계되었기 때문입니다. 이는 다만 이 우수사례에 자세히 설명된 개선사항을 통해 이점을 얻을 수 있는 스케줄링 API(현재 이 문서 작성 당시 Chromium 기반 브라우저에서만 사용 가능)를 구현하는 브라우저만 가능함을 의미합니다. 그럼에도 불구하고 이러한 접근 방식은 우선순위가 높은 작업에 대해 허용 가능한 점진적인 개선으로 간주되었습니다.
function yieldToMainUiBlocking () {
return new Promise((resolve) => {
if ('scheduler' in window) {
if ('yield' in window.scheduler) {
return window.scheduler.yield().then(() => resolve(true));
}
if ('postTask' in window.scheduler) {
return window.scheduler.postTask(() => resolve(true), { priority: 'user-blocking' });
}
}
resolve(false);
});
};
중간 및 백그라운드 작업 산출
다음 코드 스니펫에 표시된 yieldToMainBackground 메서드는 우선순위가 user-visible (중간) 또는 background인 장기 작업을 분할하는 데 사용됩니다. 로직은 사용 가능한 경우 scheduler.yield()를 구현하지만 우선순위가 중간인 postTask를 사용하고 Chromium이 아닌 브라우저에서는 마지막으로 setTimeout로 대체하여 다릅니다.
function yieldToMainBackground () {
return new Promise((resolve) => {
if ('scheduler' in window) {
if ('yield' in window.scheduler) {
return window.scheduler.yield().then(() => resolve(true));
}
if ('postTask' in window.scheduler) {
return window.scheduler.postTask(() => resolve(true), { priority: 'user-visible' });
}
}
setTimeout(() => { resolve(true) }, 0);
});
};
</ph>
<ph type="x-smartling-placeholder">yieldToMainBackground를 사용한 양보를 통해 브라우저가 다음 페인트 (이 경우 CMP UI 닫기)를 더 빨리 렌더링할 수 있는 방법을 시각적으로 표현합니다.
PubTech가 렌더링 레이아웃 최적화를 통해 TBT를 더욱 줄인 방법
수익 전략을 적용한 후 CMP의 INP가 크게 개선된 것으로 나타났습니다. 실제로 이벤트 핸들러의 처리 시간을 크게 줄인 후에 Close UI 작업의 다음 페인트에 대한 렌더링을 더욱 개선할 수 있는 기회가 발견되었습니다. 이 작업은 원래 DOM에서 요소를 삭제하도록 설계되었습니다. 이로 인해 특히 DOM 노드가 상당히 많은 웹사이트에서 문제가 발생하여 예상치 못한 렌더링 작업 증가로 이어졌습니다.
DOM에서 요소를 삭제하는 데 필요한 렌더링 작업량 증가 문제를 해결하기 위해 팀에서 '지연 디렌더'라고 하는 솔루션이 도입되었습니다. 이 접근 방식에서는 사용자가 숨기기에 동의한 후 먼저 CMP 동의 대화상자에 display: none CSS 규칙을 적용합니다. 그런 다음 requestIdleCallback를 사용하여 CMP 대화상자와 연결된 DOM 노드 삭제가 브라우저가 유휴 상태인 이후 시점으로 전환됩니다. 이 방법은 사용자가 동의 대화상자를 닫을 때 DOM 노드를 삭제하는 것보다 훨씬 빠릅니다.
<ph type="x-smartling-placeholder">PubTech가 IAB TCF 라이브러리를 개선하여 INP를 더욱 줄인 방법
대부분의 CMP 대응성 문제를 성공적으로 해결한 후 주요 종속 항목 중 하나인 IAB 투명성 및 동의 프레임워크 (TCF) 라이브러리를 통해 추가적인 개선 기회를 파악했습니다.
이 라이브러리에서 계산 비용이 가장 많이 드는 구성요소는 '빌드 문자열' '동의 전달'이 있습니다 이러한 구성요소는 IAB TCF 라이브러리의 필수 요소입니다. 이러한 구성요소에 대한 다음 최적화는 특히 PubTech의 요구사항에 맞게 별도의 포크에 적용되었습니다.
- 디코딩 프로세스에 계산된 결과를 재사용합니다. 이 결과는 사용자의 동의를 읽어야 하는 모든 서드 파티 콜백에 대해 실행됩니다.
- 사용자가 동의할 때 실행되는 게시자 제한 인코딩 프로세스에서 불필요한 루프를 방지하고 줄였습니다.
첫 번째 최적화는 CMP가 IAB TCF 라이브러리에 연결하는 각 서드 파티 콜백에 소비하는 시간을 줄였습니다. 두 번째 최적화는 '빌드 문자열'에 의해 발생하는 처리 시간을 줄였습니다. 구성요소 내에 있습니다. 실제로 이러한 최적화 덕분에 사용자가 동의를 표시할 때마다 실행되는 루프의 최대 60%를 줄일 수 있었습니다.
결과
이전의 양보 전략과 새로운 렌더링 레이아웃 최적화를 통해 CMP의 INP가 최대 65%향상되었습니다. 그 결과 PubConsent CMP의 사용자 환경의 반응성이 크게 개선되었으며, 일부 광고의 경우 광고 요청 시점을 최적화하여 조회가능성이 1.5% 향상되었습니다.
이러한 개선사항 외에도 IAB의 TCF 라이브러리에서는 TCF로 인한 장기 작업을 최대 85% 줄인 결과, 영향을 받은 고객의 INP가 모바일에서 최대 77% 개선되는 것으로 나타났습니다. 이를 통해 페이지의 전체 수명 주기 동안 실행되는 각 서드 파티 콜백의 오버헤드를 크게 줄일 수 있었습니다.
PubConsent CMP를 사용할 때 INP를 전달하는 출처의 수가 400% 이상 증가했습니다(모바일의 경우 13% 에서 55% 로 증가). 일부 고객의 경우, PubTech SDK 최적화 덕분에 페이지 INP가 470밀리초에서 230밀리초로 절반 이상 단축되었습니다.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">결론
PubTech의 고객들은 Google의 최적화 노력의 결과로 긍정적인 INP 실적과 비즈니스 측정항목 결과를 빠르게 인지하고 있으며, 고객의 귀중한 실시간 사용자 모니터링 (RUM) 데이터를 활용하여 PubConsent CMP의 추가적인 성능 개선을 고려하고 있습니다. 이 데이터는 회귀와 발전을 모두 면밀히 추적하여 PubTech의 지속적인 개선 노력을 견인합니다.
PubTech는 서드 파티로서 비즈니스 KPI에 미치는 부정적인 영향을 피하면서도 웹 성능을 대규모로 개선하고 응답성을 높일 기회가 있다는 사실을 깨달았습니다. 이러한 개선사항을 구현하기에 너무 늦은 때란 없습니다.
이러한 혁신 작업을 지원해 준 PubTech CTO 루카 코폴라와 Google의 제레미 와그너, 미칼 모크니, 릭 비스콤미에게 감사의 말을 전합니다.