PubConsent CMP에서 브라우저의 Scheduler API를 사용하여 Chrome DevTools로 확인된 응답성 문제를 해결하는 효과적인 전략을 사용하여 고객의 INP를 최대 64% 줄인 방법
동의 관리 플랫폼 (CMP)은 쿠키 및 추적 기술의 사용에 대한 사용자 동의를 얻어 웹사이트에서 개인 정보 보호 규정을 준수하도록 지원하는 도구입니다. 제3자 스크립트로서 CMP는 법률을 준수하는 것을 주요 목표로 삼을 뿐만 아니라 성능과 사용자 환경에 미치는 영향을 최소화해야 합니다.
PubConsent CMP는 PubTech의 최신 제품입니다. 성능에 중점을 두고 설계된 PubConsent CMP는 가볍게 설계되어 최적의 사용자 환경을 보장하고 전체 웹사이트 성능에 미치는 영향을 최소화합니다.
PubTech는 다음 페인트에 대한 상호작용 (INP) 측정항목을 도입하여 CMP의 반응성 문제를 발견할 수 있었습니다. 이 우수사례에서 PubTech는 PubConsent CMP 플랫폼의 응답성 문제를 어떻게 해결했는지, 그리고 2024년 3월에 Core Web Vitals 중 하나가 되기 전에 INP를 어떻게 개선했는지 보여줍니다. 이는 CMP 제품에서 가능한 최고의 성능을 제공하겠다는 확고한 노력을 보여줍니다.
PubTech가 성능을 중시하는 이유는 무엇인가요?
대부분의 CMP와 마찬가지로 PubConsent CMP도 사이트 페이지에 서드 파티 스크립트로 구현된 동의 관리 기능을 제공합니다. 성공적인 CMP 통합을 위해서는 반응성을 비롯해 CMP 서비스의 실적 영향을 완화할 수 있어야 합니다.
웹사이트 소유자는 성능에 우선순위를 두고 PubConsent CMP 스크립트를 가볍게 유지함으로써 사용자 환경의 품질을 유지하면서 유용한 동의 관리 기능을 통합하는 것 사이에서 세심한 균형을 유지할 수 있습니다.
PubTech는 CMP가 제공하는 기능의 중요성과 이 기능이 성능에 미칠 수 있는 영향을 고려하여 다음과 같은 목표를 설정했습니다.
- PubConsent CMP 제품이 INP에 미치는 영향을 최소화합니다.
- CMP 제품과 관련된 장기 작업을 줄입니다.
- 페이지의 INP에 부정적인 영향을 미칠 수 있는 총 차단 시간 (TBT)을 줄입니다.
INP 측정 방법
PubTech는 Chrome DevTools를 사용하여 초기 분석을 수행하고 느린 상호작용을 수동으로 진단했습니다. PubTech는 이 워크플로를 통해 페이지 응답성에 영향을 미치는 특정 문제를 정확히 찾아낼 수 있었습니다. 예를 들어 CMP 제품 내에서 모든 쿠키를 허용하고 이후 쿠키 동의 대화상자를 닫는 클릭 상호작용으로 인해 긴 작업이 발생하여 사용자 인터페이스의 렌더링 업데이트가 지연되었습니다. 다음 이미지에서 볼 수 있듯이 긴 작업이 완료될 때까지 대화상자가 닫혔음을 표시하도록 사용자 인터페이스가 업데이트되지 않았습니다.
모든 쿠키를 허용하는 버튼과 마찬가지로 모든 쿠키를 거부하거나 쿠키 환경설정을 맞춤설정하는 버튼은 모두 PubConsent CMP 아키텍처의 동일한 워크플로를 따릅니다. 그렇기 때문에 이 사례 연구에서 설명한 개선 사항이 CMP 제품에서 일련의 사용자 상호작용에 영향을 미쳤습니다.
이러한 지연으로 인해 작업 중에 패널이 잠긴 상태에 있는 것이 시각적으로 인식되었습니다. 눈에 띄게 오랜 시간 동안 렌더링 업데이트를 차단했기 때문에 페이지의 INP에 부정적인 영향을 미쳤습니다.
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);
});
};
yieldToMainBackground를 사용하여 얻는 결과를 통해 브라우저가 다음 페인트를 더 빨리 렌더링할 수 있는 방법을 시각적으로 표현합니다 (이 경우 CMP UI 종료).
PubTech가 렌더링 레이아웃 최적화를 통해 TBT를 더욱 절감한 방법
수익 전략을 적용한 후, CMP에서 INP가 크게 개선된 것을 확인할 수 있었습니다. 실제로 이벤트 핸들러의 처리 시간을 크게 줄인 후 Close UI 작업의 다음 페인트의 렌더링을 더 개선할 수 있는 기회가 발견되었습니다. 이 작업은 원래 DOM에서 요소를 삭제하도록 설계되었습니다. 이로 인해 특히 DOM 노드가 많은 웹사이트에서 문제가 발생했고, 이로 인해 렌더링 작업이 예기치 않게 증가했습니다.
DOM에서 요소를 제거하는 데 필요한 렌더링 작업의 증가를 해결하기 위해 담당 팀에서 '지연 디렌더링'이라는 솔루션을 도입했습니다. 이 방법에서는 사용자가 숨기기에 동의한 후 먼저 display: none CSS 규칙을 CMP 동의 대화상자에 적용합니다. 그런 다음 CMP 대화상자와 연결된 DOM 노드 삭제가 requestIdleCallback를 사용하여 브라우저가 유휴 상태일 때 이후 시점으로 이동합니다. 이 접근 방식은 사용자가 동의 대화상자를 닫는 시점에 DOM 노드를 삭제하는 것보다 훨씬 빠릅니다.
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를 전달하는 출처의 수는 모바일에서 13%에서 55% 로 400% 넘게 증가했습니다. 일부 고객의 경우 PubTech SDK 최적화 덕분에 페이지 INP가 470밀리초에서 230밀리초로 절반 이상 감소했습니다.
결론
PubTech의 고객은 Google의 최적화 노력의 결과로 얻은 긍정적인 INP 실적과 비즈니스 측정항목 결과를 빠르게 인지하고 있으며, 고객의 소중한 실제 사용자 모니터링 (RUM) 데이터를 활용하여 PubConsent CMP의 추가 성능 개선을 고려하고 있습니다. 이 데이터는 회귀와 발전을 모두 면밀히 추적하여 PubTech의 지속적인 개선 노력을 이끌고 있습니다.
또한 제3자인 PubTech는 비즈니스 KPI에 미치는 부정적인 영향을 피하면서 웹 성능을 대규모로 개선하고 응답성을 개선할 수 있는 기회가 있음을 깨달았습니다. 이러한 개선 사항들을 실행하기에 너무 늦은 때란 없습니다.
이 혁신 작업을 지원해 준 PubTech CTO 루카 코폴라와 Google의 제레미 와그너, 마이클 모크니, 릭 비스코미에게 감사의 말을 전합니다.