광고 스크립트를 정적으로 로드하기

개요

이 감사에서는 광고 스크립트가 페이지에 삽입되는지를 확인합니다. 페이지의 다른 리소스가 삽입된 스크립트의 가져오기와 로드를 지연시켜 광고 로드를 지연시킬 수 있습니다. 이러한 스크립트를 전혀 가져오지 못하면 광고가 함께 로드되지 않을 수도 있습니다.

권장사항

비동기 스크립트 태그를 통해 스크립트를 로드하여 속도를 높입니다. 브라우저 미리 로드 스캐너는 렌더링 차단 리소스가 스크립트 실행을 차단하더라도 스크립트 태그를 더 일찍 가져올 수 있습니다.

올바르지 않음
<script>
  var el = document.createElement('script');
  el.src = 'https://securepubads.g.doubleclick.net/tag/js/gpt.js';
  var node = document.getElementsByTagName('script')[0];
  node.parentNode.insertBefore(el, node);
</script>
올바름
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>

삽입된 광고 스크립트의 소스 식별하기

광고 스크립트가 페이지에 삽입되는 방식 또는 삽입되는지 여부조차 명확하지 않은 경우도 있습니다. 예를 들어 페이지가 로드된 후 페이지 소스를 검사할 때 삽입된 스크립트 태그가 정적으로 로드된 태그와 구별되지 않을 수 있습니다.

이러한 경우 Chrome DevTools의 네트워크 탭을 사용하여 삽입된 광고 스크립트의 소스를 확인하세요.

  1. Control+Shift+J 또는 Command+Option+J (Mac)를 눌러 DevTools를 엽니다.
  2. 네트워크 탭으로 이동합니다.
  3. 아직 표시되지 않은 경우 필터 필터 아이콘를 클릭하여 필터 표시줄을 열고 이 감사에 의해 신고된 스크립트의 이름을 텍스트 상자에 입력합니다.
  4. 아직 표시되지 않은 경우 테이블 헤더를 마우스 오른쪽 버튼으로 클릭하고 시작자를 선택하여 네트워크 요청 폭포식 구조 테이블에 시작자 열을 포함합니다.
  5. 페이지를 새로고침하여 네트워크 트래픽을 캡처합니다.

Chrome DevTools의 네트워크 탭 스크린샷

위 스크린샷과 같이 시작자 열에는 문제의 스크립트 소스에 대한 정보가 포함됩니다. 소스 링크를 클릭하여 광고 스크립트 요청을 보낸 코드로 바로 이동하거나 소스 링크 위로 마우스를 가져가면 요청에 이르는 모든 호출을 확인할 수 있습니다.

추가 정보

이 감사는 정적으로 로드하기에 안전한 것으로 알려진 광고 스크립트의 허용 목록에 대해 작동합니다. 현재 목록은 다음과 같습니다.

라이브러리 스크립트
애드센스 pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
Amazon 게시자 서비스 amazon-adsystem.com/aax2/apstag.js
Criteo 직접 입찰자 static.criteo.net/js/*/publishertag.js
Google 게시자 태그

googletagservices.com/tag/js/gpt.js

securepubads.g.doubleclick.net/tag/js/gpt.js

색인 교환 js-sec.indexww.com/ht/p/*.js

document.write()에 대한 개입
유해한 것으로 간주되는 스크립트 삽입형 '비동기 스크립트'
비동기 스니펫의 속도 향상