Help improve Publisher Ads Audits for Lighthouse. Share your thoughts in our survey.

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

개요

이 감사에서는 광고 스크립트가 페이지에 삽입되는지를 확인합니다. 페이지에 다른 리소스가 있으면 삽입된 스크립트를 가져오고 로드하는 작업이 지연되어 광고 로드가 지연될 수 있는데, 이러한 스크립트를 전혀 가져오지 않아 광고도 함께 로드되지 않는 경우도 있습니다.

추천

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

잘못된 예

<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 Publisher Services amazon-adsystem.com/aax2/apstag.js
Criteo Direct Bidder static.criteo.net/js/*/publishertag.js
Google 게시자 태그

googletagservices.com/tag/js/gpt.js

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

Index Exchange js-sec.indexww.com/ht/p/*.js

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