AFTER

10. 3rd-party 스크립트 조정

같은 2초 느린 스크립트를 window.load 이후 동적으로 삽입합니다. 본문 콘텐츠는 즉시 렌더링되고, 느린 3rd-party 스크립트는 별도로(비동기) 로드됩니다. 단, 스크립트 자체의 로드 시간(2초)은 그대로입니다 — "차단만 해제됐을 뿐, 3rd-party 자체가 빨라진 건 아님"을 대시보드의 요청별 로딩 시간에서 확인해 보세요.
📍 이 측정은 당신이 지금 쓰는 브라우저에서 실행됩니다.

Before (동기 blocking) After (지연 로드)

⬆️ 이 문단은 3rd-party 스크립트를 기다리지 않고 즉시 렌더링됩니다.

🔧 실제 구현 코드

window.addEventListener("load", function () {
  setTimeout(function () {
    var s = document.createElement("script");
    s.src = "/mock-3rd-party/sdk.js";
    s.async = true;
    document.body.appendChild(s);
  }, 0);
});

본문 렌더링이 끝난 load 이벤트 이후에 스크립트를 동적으로 생성해 삽입합니다. HTML 파서는 본문을 먼저 그리고, 느린 스크립트는 그 뒤에 비동기로 받습니다. 다만 서버 응답 자체는 여전히 2초가 걸립니다 — "차단만 없앴을 뿐 3rd-party 자체가 빨라진 건 아님"에 유의하세요.

← 실습 목록으로 돌아가기