세션 리플레이 데이터 볼륨 최적화

세션 리플레이 페이로드 크기는 기록하는 세션 수에만 좌우되는 것은 아닙니다 ― 사이트 DOM의 복잡성과 해당 DOM이 얼마나 자주 변경되는지에도 영향을 받습니다. 이 가이드에서는 그 이유를 설명하고, 리플레이가 생성하는 데이터 양을 줄이는 구체적인 방법을 제공합니다. 가격 책정 공식 및 리플레이당 평균 바이트 추정치에 대해서는 데이터 소비를 참조하십시오.

DOM 복잡성이 페이로드 크기를 증가시키는 이유

세션 리플레이는 비디오나 스크린샷을 기록하지 않습니다. 세션 리플레이 및 앱 성능에 설명된 대로, 페이지의 DOM 구조를 캡처한 다음 이에 대한 변경 사항(변형)을 추적하고 압축된 페이로드로 보고합니다.

해당 페이로드 크기에는 두 가지 독립적인 비용 요인이 있습니다:

스냅샷 크기: 전체 스냅샷이 캡처되는 순간에 얼마나 많은 DOM 노드가 존재하고 얼마나 깊이 중첩되어 있는지를 나타냅니다.
변형 볼륨: 이후 해당 노드의 속성, 클래스 또는 텍스트가 얼마나 자주 변경되는지를 나타냅니다.

샘플링 속도 조정은 기록되는 세션의 수를 제어합니다. 이 가이드의 기술은 샘플링 속도와 관계없이 기록된 각 세션의 비용을 제어합니다.

페이로드 크기를 부풀리는 일반적인 패턴

다음 패턴은 인라인 아이콘으로 빌드된 별점 위젯 및 자동 회전 이미지 캐러셀이 있는 제품 페이지와 같이 콘텐츠가 많은 페이지에서 흔히 볼 수 있습니다.

인라인 SVG 및 아이콘이 많은 위젯

반복되는 인라인 SVG 마크업 ― 예를 들어, 중첩된 <path>, <defs> 및 그라데이션 요소와 함께 각 별을 고유한 <svg>로 그리는 평가 위젯 ― 은 DOM 노드 수를 빠르게 증가시킵니다. 이런 방식으로 그려진 5개의 별은 수십 개의 노드를 쉽게 추가할 수 있으며, 평가 위젯으로 가득 찬 페이지는 수천 개를 추가할 수 있습니다.

<!-- Avoid: each star repeats a full, independent SVG definition -->
<div class="rating">
  <svg viewBox="0 0 20 20">
    <defs><linearGradient id="star-fill-1">...</linearGradient></defs>
    <path d="..." />
  </svg>
  <svg viewBox="0 0 20 20">
    <defs><linearGradient id="star-fill-2">...</linearGradient></defs>
    <path d="..." />
  </svg>
  <!-- repeated for every star, on every rating widget on the page -->
</div>

이를 줄이려면:

간단하고 정적인 아이콘에는 인라인 SVG 대신 CSS background-image 또는 스프라이트를 사용하십시오. 이렇게 하면 DOM에서 아이콘의 마크업이 완전히 제거됩니다.

인라인 SVG가 필요한 경우, 도형을 한 번 정의하고 재사용하십시오: 숨겨진 <symbol>에 도형을 넣은 다음, 필요한 모든 곳에서 <use>을(를) 사용하여 참조하십시오.

<svg style="display: none;">
  <symbol id="star-icon" viewBox="0 0 20 20"><path d="..." /></symbol>
</svg>
<div class="rating">
  <svg><use href="#star-icon"></use></svg>
  <svg><use href="#star-icon"></use></svg>
</div>

위젯이 리플레이에서 시각적 충실도를 필요로 하지 않는 경우 캡처에서 제외하십시오. 위젯의 컨테이너에 nr-block CSS 클래스(또는 data-nr-block 속성)를 사용하거나, 마크업을 변경하지 않으려면(편집할 수 없는 타사 위젯에 유용함) Application settings의 Block selectors 필드를 사용하십시오. 사이트 콘텐츠 차단을 참조하십시오.
중요
공유 <symbol> 정의를 보관하는 컨테이너가 일반적으로 숨겨져 있고 제외해도 안전해 보이더라도 해당 컨테이너에 nr-block, nr-ignore 또는 블록 선택기를 적용하지 마십시오. 컨테이너를 차단하면 캡처된 DOM에서 하위 요소가 완전히 제거되며 ― 이는 페이지의 다른 곳에 있는 해당 기호에 대한 모든 <use> 참조를 손상시킵니다. 개별 시각적 인스턴스(<use> 요소)만 차단하거나 무시하고, 공유 정의는 절대 차단하지 마십시오.

부풀려진 초기 스냅샷

페이지의 첫 번째 전체 스냅샷은 보이지 않거나 재생에 필요하지 않은 콘텐츠를 포함하여 해당 순간에 DOM에 존재하는 모든 것을 캡처합니다:

페이지에 직접 인라인된 크고 축소된 <style> 블록은 스냅샷에서 텍스트로 캡처됩니다.
즉시 숨겨진 요소(display: none 또는 visibility: hidden)는 뷰어가 재생에서 보는 내용에 아무런 기여를 하지 않더라도 여전히 캡처됩니다.

이를 줄이려면:

대규모 인라인 <style> 블록 대신 <link rel="stylesheet">을(를) 사용하여 CSS를 외부화하십시오. 세션 리플레이는 파일의 내용이 아닌 링크를 캡처하므로 스냅샷을 작게 유지합니다. CSS가 다른 도메인에서 호스팅되는 경우, 올바르게 캡처되려면 crossorigin="anonymous" 속성이 필요합니다 — 세션 리플레이를 위한 교차 출처 CSS 관리를 참조하십시오.
페이지 로드 시 모든 것을 렌더링하는 대신 모달이나 보조 섹션과 같은 스크롤 아래 콘텐츠를 지연 로드하십시오.
위에서 설명한 대로 nr-block/nr-ignore 또는 Block selectors를 사용하여 즉시 숨겨지고 사용자 작업 후에만 나타나는 요소를 차단하거나 무시하십시오.

고빈도 속성 및 클래스 변형

일부 UI 패턴은 세션이 지속되는 동안 끊임없이 뮤테이션 이벤트를 생성합니다. 일반적인 예로는 표시되는 이미지를 변경하기 위해 몇 초마다 CSS 클래스를 교체하는 자동 회전 이미지 캐러셀이 있습니다 — 각 교체는 세션 전체 기간 동안 반복되는 뮤테이션 이벤트입니다.

이를 줄이려면:

UX가 허용하는 경우 애니메이션, 스크롤 또는 자동 회전으로 인해 발생하는 DOM 업데이트를 스로틀링하거나 디바운싱하십시오.
style 또는 class 속성에 반복적으로 쓰는 JavaScript보다 CSS 전환 또는 애니메이션으로 구동되는 단일 클래스 토글을 사용하십시오.
재생에 반영할 필요가 없는 경우 nr-block 또는 Block selectors을 사용하여 순수하게 장식적이고 변동이 심한 요소를 차단하십시오 ― 스피너, 자동 회전 캐러셀, 마키 스타일 배너.

크기를 부풀리는 패턴에 대해 사이트를 감사하십시오

변경 사항을 적용하기 전에 실제 페이로드 크기가 어디에서 발생하는지 확인하는 것이 도움이 됩니다.

브라우저의 DevTools를 열고 대표 페이지에서 DOM 노드 수와 중첩 깊이를 검사하십시오. Elements 패널 또는 콘솔의 빠른 document.querySelectorAll('*').length을 통해 대략적인 수를 알 수 있습니다.
페이지 소스에서 반복되거나 깊게 중첩된 인라인 SVG 마크업과 대규모 인라인 <style> 블록을 찾으십시오.
페이지와 정상적으로 상호 작용하는 동안 Elements 패널을 관찰하고, 몇 초마다 클래스나 속성이 변경되는 요소를 확인하십시오 — 이는 가장 많은 양의 뮤테이션 소스입니다.
찾은 내용을 nr-block, nr-ignore 또는 Block selectors의 후보와 교차 참조하십시오.

또한 NRQL 쿼리를 사용하여 스냅샷 크기 바이트와 뮤테이션 볼륨 바이트를 직접 비교할 수도 있습니다:

SELECT sum(newrelic.timeslice.value)
FROM Metric
WHERE (metricTimesliceName LIKE 'Browser/Supportability/rrweb/node/%/bytes') AND (`entity.guid` = 'YOUR_ENTITY_GUID')
FACET metricTimesliceName
SINCE 30 minutes ago UNTIL now
TIMESERIES

YOUR_ENTITY_GUID을(를) 브라우저 앱의 엔티티 GUID로 교체하십시오. .../node/2/bytes 시리즈는 전체 스냅샷(DOM 복잡성) 비용을 반영하고, .../node/3/bytes 시리즈는 변형(DOM 변동) 비용을 반영합니다. 수정 사항을 적용하기 전과 후에 이를 실행하여 실제로 페이로드 크기가 감소했는지 확인하십시오.

모범 사례 체크리스트

인라인 SVG 마크업을 복제하는 대신 CSS 스프라이트, 배경 이미지 또는 <symbol>/<use> 패턴을 사용하십시오.
대규모 인라인 CSS 블록을 외부화하십시오.
모든 것을 미리 렌더링하는 대신 스크롤 아래 콘텐츠를 지연 로드하십시오.
nr-block 또는 Block selectors을 사용하여 장식용이거나 변동이 심한 요소를 차단하십시오 ― 단, 공유된 <symbol> 정의를 포함하는 컨테이너는 절대 차단하지 마십시오.
nr-ignore을(를) 사용하여 리플레이에 값 자체가 중요하지 않은 고빈도 입력 필드를 무시하십시오.
애니메이션 및 스크롤 기반 DOM 업데이트를 스로틀링하거나 디바운싱하십시오.
짧은 테스트 기간을 통해 변경 전후를 측정하고, 스냅샷 크기 및 변형 볼륨 바이트를 비교하십시오.
샘플링 속도를 대체 수단이 아닌 보완 수단으로 취급하십시오 — 이는 각 세션의 비용이 아니라 얼마나 많은 세션이 기록되는지를 제어합니다.

사용자의 편의를 위해 제공되는 기계 번역입니다.

세션 리플레이 데이터 볼륨 최적화

DOM 복잡성이 페이로드 크기를 증가시키는 이유 .css-21sua1{background:none;border:none;width:0;padding:0;}

페이로드 크기를 부풀리는 일반적인 패턴

인라인 SVG 및 아이콘이 많은 위젯

중요

부풀려진 초기 스냅샷

고빈도 속성 및 클래스 변형

크기를 부풀리는 패턴에 대해 사이트를 감사하십시오

모범 사례 체크리스트

DOM 복잡성이 페이로드 크기를 증가시키는 이유