STATUS IS UP웹사이트 최적화 위키
23강화
성능 및 전달 / 강화

타사 스크립트가 페이지를 제어하기 전에 통제하세요

외부 스크립트를 찾아 가치와 위험을 입증하고 안전하게 로드하며 동의(Consent)를 존중하고 실패를 테스트하며 사용하지 않는 공급업체를 제거하는 실용적 시스템.

타사 스크립트가 페이지를 제어하기 전에 통제하세요 — 시각 가이드
읽기
8 분
출처
7
재검증
2027-03-27
검토됨
개인정보 및 애플리케이션 보안 검토를 포함한 성능 엔지니어링 리드
간단 답변

결정부터 시작하세요.

모든 타사 스크립트를 소유자, 기대 이득, 예산, 동의 범주, 검토일이 지정된 종속성으로 취급하세요. 브라우저 트레이스, 태그 매니저, CMS 플러그인, 코드에서 단일 인벤토리를 만드세요. 공급업체 도메인, 트리거, 노출되는 데이터, 공급업체가 느리거나 없을 때 무엇이 깨지는지 기록하세요. 중복 및 소유자가 없는 태그를 먼저 제거하세요.

비핵심 코드는 크리티컬 렌더링 경로(첫 화면을 표시하는 데 필요한 브라우저 작업)에서 제거하세요. 첫 작업에 필요한 코드만 로드하고 독립적인 위젯은 상호작용 시 지연하되 종속성 순서는 유지하세요. 동의 수락/거부와 공급업체 도메인 차단 상태에서 우선 순위 여정을 테스트하세요. 안전하게 실패할 수 없는 코드는 대체, 격리, 또는 다른 구현이 필요합니다.

시각 가이드

작업을 시스템 관점에서 보세요.

개별 전술을 실행하기 전에 이 지도로 문서의 의사결정 간 관계를 파악하세요.

SIU강화
01브라우저가 로드하는 항목에서 단일 인벤토리를 구축하세요
02유지, 제거, 예산 결정을 가시화하세요
03늦게 로드해도 안전할 때만 늦게 로드하세요
04동의(Consent)를 사후처리가 아닌 관문으로 만드세요
01

브라우저가 로드하는 항목에서 단일 인벤토리를 구축하세요

대표 페이지를 먼저 수집하세요: 홈, 랜딩, 상세, 검색, 장바구니, 체크아웃, 계정, 캠페인 등. Chrome DevTools에서 신규 방문과 재방문을 기록하세요. 브라우저 증거를 태그 매니저, CMS 플러그인, 코드 의존성과 비교하세요. 한 관점만으로는 주입된 스크립트를 놓칠 수 있습니다.

공급업체나 통합별로 한 행을 만드세요. URL별로만 기록하지 마세요. 접촉하는 도메인과 태그를 추가할 수 있는지 여부를 캡쳐하세요. 목적을 방어하고 제거를 승인할 수 있는 비즈니스 소유자를 지정하세요. 캠페인, 공급업체 변경, 템플릿 릴리스, 리디자인 후 재검토하세요.

최소 증거

페이지, 여정, 공급업체 도메인, 요청, 전송 크기, 메인 스레드 작업, 테스트 조건을 저장하세요. 랩(trace)은 진단 증거일 뿐 모든 방문자에게 보장되지 않습니다.

결정 기록

목적, 소유자, 동의 범주, 트리거, 노출되는 데이터, 종속성 순서, 폴백, 검토일을 포함하세요.

02

유지, 제거, 예산 결정을 가시화하세요

각 소유자에게 통합이 사라지면 무엇이 더 나쁠지 물어보세요. 대답이 애매하면 비활성화하거나 제거하세요. web.dev는 예산 설정, 중복 기능 회피, 불필요한 스크립트 정리를 권장합니다.

예산은 팀의 가드레일이며 보편적 임계값이 아닙니다. 바이트, 요청, 메인 스레드 시간, 로드 타이밍에 대해 공급업체별·페이지별 허용치를 설정하세요. 변경 전후의 기준선을 비교하세요. 소유자가 허용치 내에 머물거나 다른 비용을 제거하거나 만료되는 예외를 받아야 합니다. 비교 가능한 여정과 사용자 중심 지표를 사용하세요.

유지

현재 목적이 있고, 소유자가 비용 및 데이터 사용을 수용하며, 허용 가능한 실패 경로가 있는 종속성만 유지하세요.

제거

만료된 픽셀, 중복 분석, 비활성 채팅, 사용하지 않는 실험, 방치된 플러그인을 단계적 릴리스로 퇴역시키세요.

예외

사유, 비용, 승인자, 보상 조치, 검토일을 기록하세요.

03

늦게 로드해도 안전할 때만 늦게 로드하세요

로딩 동작을 신중히 선택하세요. classic 외부 스크립트(특별한 async, defer, module 동작 없음)는 HTML 파싱이 계속되기 전에 가져오고 실행됩니다. async에서는 다운로드가 병렬로 진행되지만 준비되면 즉시 실행되어 순서가 보장되지 않습니다. defer에서는 classic 외부 스크립트가 파싱 후 문서 순서대로 DOMContentLoaded 전에 실행됩니다. defer는 순서가 필요한 스크립트에 적합하지만 보편적 해결책은 아닙니다.

선택적 채팅, 소셜, 지도, 동영상, 추천 인터페이스는 경량 플레이스홀더를 렌더링하고 클릭이나 관련 시점에 공급업체를 로드하세요. 이 페이사드 패턴은 전체 임베드 대신 처음부터 여러분의 제어로 시작합니다. 키보드 상호작용을 보장하고 공간을 예약하세요. 가격 계산, 로그인, 결제 처리, 필수 접근성 제공, 또는 검토된 대안 없이 확정된 의무를 충족하는 코드에 대해서는 지연하지 마세요.

트리거 선택

첫 작업 종속성에는 즉시 로드, 순서가 필요한 코드는 파싱 후, 선택적 임베드는 상호작용 또는 가시성 트리거를 사용하세요.

순서 존중

상호 의존 스크립트에 async를 표시하고 순서가 유지되리라 기대하지 마세요. 게시된 체인을 문서화하고 테스트하세요.

window load 회피

핵심 UI를 window load에 묶지 마세요. 타사 임베드는 async나 defer를 사용하더라도 이를 지연시킬 수 있습니다.

04

동의(Consent)를 사후처리가 아닌 관문으로 만드세요

각 공급업체를 관할 구역과 데이터 흐름을 이해하는 개인정보 및 법무 이해관계자와 분류하세요. 동의 기반 통합의 경우 태그가 관련 데이터를 전송하기 전에 동의 상태를 확립하세요. Google은 기본 동의 명령이 측정 명령보다 먼저 실행되어야 하고 선택 변경 후 업데이트가 따라야 한다고 권장합니다. 이 제품 지침은 법적 조언이 아닙니다.

첫 방문에서 무응답, 수락, 거부, 철회 상태를 테스트하세요. 인터페이스와 네트워크를 확인하세요: 위젯이 숨겨져 있다고 해서 요청이나 식별자가 전송되지 않았음을 증명하지 않습니다. 동의 플랫폼이 비동기 로드되는 경우 타이밍을 테스트하세요. 선택을 적절히 영구화하고 현재 페이지와 이후 방문에 변경 사항을 적용하세요.

분류 문서화

공급업체 라벨에만 의존하지 마세요. 태그가 필수, 선택, 특정 지역 또는 여정에서 금지인 이유를 기록하고 승인을 받으세요.

철회 검증

철회 후 구성된 비필수 태그가 로드되거나 데이터를 전송하지 않음을 확인하고 테스트 증거를 보관하세요.

05

제어하지 않는 코드의 파급 범위를 줄이세요

OWASP는 클라이언트 변경에 대한 통제 상실, 브라우저에서 임의 코드 실행, 민감 데이터 노출을 핵심 위험으로 식별합니다. 태그 게시 권한을 제한하고 임의 HTML 또는 임의 코드 기능을 검토하며 허용된 데이터 레이어 필드를 문서화하세요. 고위험 통합에는 공급업체 계약과 자격을 갖춘 보안 검토가 도움이 되지만, 어느 것도 테스트를 대신하지 않습니다.

Subresource Integrity(SRI)는 브라우저가 스크립트를 암호 해시와 대조해 검증하게 합니다. 이는 리소스를 고정할 수 있고 교차 출처 전달에 CORS가 지원될 때만 도움이 됩니다; W3C는 CORS 없이 SRI를 사용하는 것은 논리적 오류라고 설명합니다. 많은 변경되는 공급업체 URL에는 적합하지 않습니다. iframe sandbox는 호스트 DOM과 쿠키에 대한 직접 접근을 줄일 수 있지만 전문적인 검토가 필요합니다. 결제 및 보안 민감 흐름은 자격 있는 검토가 필요합니다.

데이터 최소화

목적에 필요한 문서화된 필드만 전달하세요. 비밀, 결제 데이터, 불필요한 고객 속성을 노출하지 마세요.

한계 인식

SRI는 바이트를 검증할 뿐 데이터 사용이나 이후 요청의 적절성을 판단하지 않습니다; 격리는 즉시 적용되는 해결책이 아닙니다.

06

고객이 겪기 전에 공급업체 실패를 연습하세요

유지할 공급업체마다 테스트 환경이나 브라우저 요청 차단기에서 해당 도메인을 차단한 뒤 여정을 실행하세요. 느린 응답과 태그 매니저 구성에서 통합이 없는 경우도 테스트하세요. 주요 콘텐츠, 네비게이션, 폼, 체크아웃, 계정 접근이 의도대로 동작하는지 확인하세요. 이는 릴리스 전에 가정들을 드러냅니다.

사건 발생 전 수정 절차를 정의하세요: 누가 태그를 비활성화할 수 있는지, 플래그나 태그 매니저 게시가 필요한지, 롤백 방법, 검증 방법을 명시하세요. SIU는 사전 가동시간 최적화와 수정 조치입니다: 인벤토리, 예산, 사전 점검, 롤백 연습을 사용해 종속성 위험을 줄이세요. SIU는 공급업체 인프라를 제어하거나 가용성을 보장하거나 리뷰를 대체할 수 없습니다.

성공 기준 설정

공급업체 없이도 무엇이 사용 가능한지, 무엇이 저하될 수 있는지, 폴백, 비활성화까지의 최대 지연을 명시하세요.

릴리스 증거 보관

변경 기록에 전후 트레이스, 동의 결과, 차단된 공급업체 결과, 롤백 소유자를 첨부하세요.

실행 / 검증

실무용 할 일 가이드.

  1. 01

    종속성 집합 캡처

    우선 템플릿을 추적한 뒤 브라우저 증거를 태그 매니저, CMS, 코드 인벤토리와 비교하세요.

    검증: 모든 타사 도메인이 인벤토리 행에 연결되거나 릴리스 전에 조사됩니다.
  2. 02

    소유자 지정

    목적, 비용, 데이터 사용, 갱신을 책임질 사람을 명시하세요.

    검증: 유지되는 통합에 소유자, 목적, 검토일이 빠지지 않습니다.
  3. 03

    중복 코드 제거

    중복 분석, 만료된 픽셀, 휴면 실험, 사용하지 않는 플러그인 제거를 단계별로 진행하세요.

    검증: 제거 후 필수 여정과 보고가 점검됩니다.
  4. 04

    예산 설정

    요청 수, 바이트, 메인 스레드 작업, 타이밍에 대해 페이지 및 공급업체 허용치를 설정하세요.

    검증: 릴리스 기록이 변경을 허용치와 비교하고 만료되는 예외를 기록합니다.
  5. 05

    로딩 및 동의 검증

    종속성 순서, 폴백, 키보드 사용, 동의 선택을 테스트하세요.

    검증: 네트워크 검사 결과가 승인된 로딩 및 동의 동작과 일치합니다.
  6. 06

    경계 검토

    게시 권한을 제한하고, 데이터 필드를 문서화하며, 제약에 맞는 경우에만 SRI 또는 격리를 평가하세요.

    검증: 통합은 위험에 적합한 보안 또는 개인정보 검토를 거쳤습니다.
  7. 07

    공급업체 차단

    사용 불가하거나 느린 공급업체를 시뮬레이션하고 핵심 여정을 엔드투엔드로 실행하세요.

    검증: 핵심 작업이 폴백 기준을 충족하거나 위험이 재설계되거나 명시적으로 수용됩니다.
  8. 08

    비활성화 및 롤백 리허설

    권한이 있는 비활성화 경로와 알려진 양호 구성으로 복구하는 방법을 문서화하세요.

    검증: 지정된 사람이 비생산 환경에서 단계를 테스트하고 결과를 기록했습니다.
토론 주제

트레이드오프를 비교하세요 — 개인정보는 공유하지 마세요.

이 프롬프트를 팀이나 웹사이트 소유자 커뮤니티와 함께 사용하세요. 방법과 교훈은 공유하되, 인증 정보·고객 기록·비공개 인프라 세부사항은 절대 붙여넣지 마세요.

  1. 01

    귀사 사이트에서 가장 명확한 측정 가능한 이득을 제공하는 타사 통합은 무엇이며, 그 결정을 쉽게 만든 증거는 무엇이었나요?

  2. 02

    선택적 위젯, 임베드, 측정 공급업체가 사용할 수 없었을 때 고객 여정을 유용하게 유지한 폴백은 무엇이었나요?

  3. 03

    제품, 마케팅, 개인정보, 엔지니어링 팀은 임시 태그 예외의 만료 시점을 어떻게 결정하나요?

주요 / 신뢰할 수 있는 자료

출처 자료 열기

web.devLoad Third-Party JavaScript ↗

비용이 큰 리소스 찾기, 영향 측정, 로드 지연, 자체 호스팅에 대한 Google 지침.

검토일: 2026-09-27
web.devThird-party JavaScript performance ↗

타사 네트워크 및 렌더링 비용, 예산, 정리에 대한 개요.

검토일: 2026-09-27
MDN Web Docsscript: The Script element ↗

classic 스크립트, async, defer, modules, integrity, 오류에 대한 참조.

검토일: 2026-09-27
OWASPThird Party JavaScript Management Cheat Sheet ↗

타사 위험, 태그 제어, 샌드박스, 무결성, 데이터 노출에 대한 보안 지침.

검토일: 2026-09-27
Google for DevelopersSet up consent mode on websites ↗

동의 기본값, 업데이트, 타이밍, 영구화에 대한 공식 Google 태그 안내.

검토일: 2026-09-27
W3CSubresource Integrity ↗

스크립트 무결성 메타데이터와 교차 출처 제약에 대한 사양.

검토일: 2026-09-27
Chrome for DevelopersPerformance features reference ↗

트레이스를 기록하고 1차/3차 이벤트를 구분하는 방법.

검토일: 2026-09-27

출처 정책 이 문서는 공개된 1차 또는 권위 있는 문서를 직접 읽고 사용했습니다. 리소스는 구현 세부사항을 위해 선택되었으며 인용문 단편을 위한 것이 아닙니다. 제품 문서는 법적 의무를 결정하지 않습니다. 내부 및 SID 링크는 탐색용이며 증거가 아닙니다.

빠른 설명

자주 묻는 질문

모든 타사 스크립트에 async를 사용해야 하나요?

아니요. async는 다운로드 중 파서 블로킹을 제거하지만 순서를 보장하지 않고 렌더링을 방해할 수 있습니다. 독립적인 스크립트에 async를 사용하고, 순서가 필요한 classic 스크립트에는 defer를 사용하며, 선택적 임베드에는 상호작용 트리거를 사용하세요.

공급업체 JavaScript를 자체 호스팅하면 신뢰성이 높아지나요?

자동으로 그렇지는 않습니다. 캐싱과 전달 제어는 향상될 수 있지만 호환성 및 보안 업데이트 책임이 귀사로 넘어갑니다. 공급업체 약관, 패치 책임, 회귀 테스트를 먼저 확인하세요.

SRI가 공급업체 스크립트를 안전하게 만들나요?

아니요. SRI는 전달이 지원될 때 예상 바이트를 검증할 수 있습니다. 의도된 동작, 데이터 수집, 이후 네트워크 활동을 평가하지 않으며, 많은 변경되는 스크립트에는 실용적이지 않습니다.

Status Is UP Editorial Team · 가동률(Uptime) 지원 편집팀

검토자: 개인정보 및 애플리케이션 보안 검토를 포함한 성능 엔지니어링 리드. 게시 2026-09-27; 업데이트 2026-09-30.