이 규칙은 HTML이 페이지의 스크롤 없이 볼 수 있는 부분에 있는 외부 차단 자바스크립트 파일을 참조하는 것이 PageSpeed Insights에서 감지하면 트리거됩니다.
개요
브라우저가 페이지를 렌더링하려면 먼저 HTML 마크업을 파싱하여 DOM을 빌드해야 합니다.
처리되는 동안 파서에서는 스크립트를 발견할 때마다 파싱을 중지하고 스크립트를 실행해야
HTML을 계속 파싱할 수 있습니다. 또한 외부 스크립트의 경우 파서에서는
리소스가 다운로드될 때까지 기다려야 하며, 이로 인해 한 번 이상의 네트워크 왕복이 발생하고
페이지의 첫 렌더링 시간이 지연될 수 있습니다.
자바스크립트가
중요한 렌더링 경로에 어떻게 영향을 미치는지 자세히 알아보려면
자바스크립트로 상호작용 추가를
참조하세요.
권장사항
차단 자바스크립트의, 특히 실행하기 전에 가져와야 하는 외부 스크립트의 사용을 피하고
최소화해야 합니다. 추가적인 네트워크 요청을 방지하기 위해 페이지 콘텐츠를 렌더링하는 데
필수적인 스크립트를 인라인으로 삽입할 수도 있지만, 좋은 성능을 내려면 인라인 콘텐츠는 크기가
작아야 하고 빠르게 실행할 수 있어야 합니다. 첫 렌더링에서 중요하지 않은 스크립트는
비동기 스크립트로 생성하거나 첫 번째 렌더링이 완료될 때까지 지연되어야 합니다. 또한 이 경우 로드 시간을
향상하려면
CSS 전송을 최적화
해야 합니다.
자바스크립트 삽입
외부 차단 스크립트를 사용하면 자바스크립트를 가져올 때까지 브라우저에서 기다려야 하는데,
이로 인해 페이지가 렌더링되기 전에 한 번 이상의 네트워크 왕복이 추가될 수 있습니다. 외부 스크립트의
크기가 작은 경우 콘텐츠를 직접 HTML 문서에 삽입하여 네트워크 요청 지연을
방지할 수 있습니다. 예를 들어 HTML 문서가 다음과 같고
<html>
<head>
<script type="text/javascript" src="small.js"></script>
</head>
<body>
<div>
Hello, world!
</div>
</body>
</html>
리소스
small.js가 다음과 같은 경우
/* contents of a small JavaScript file */
다음과 같이 스크립트를 삽입할 수 있습니다.
<html>
<head>
<script type="text/javascript">
/* contents of a small JavaScript file */
</script>
</head>
<body>
<div>
Hello, world!
</div>
</body>
</html>
스크립트 콘텐츠를 삽입하면
small.js의 외부 요청이 없어져서 브라우저에서
빠르게 첫 렌더링을 할 수 있습니다. 하지만 삽입으로 인해
HTML 문서의 크기가 증가하고 동일한 스크립트 콘텐츠를 여러 페이지에
삽입해야 할 수도 있습니다. 따라서 최상의 성능을 내려면 작은 스크립트만 삽입해야 합니다.
자바스크립트를 비동기로 생성
자바스크립트에서는 기본적으로 DOM 구성을 차단하므로 첫 렌더링 시간이 지연됩니다. 자바스크립트에서
파서를 차단하지 않도록 하려면 외부 스크립트에 HTML
async
속성을 사용하는 것이 좋습니다. 예:
<script async src="my.js">
비동기
스크립트에 관해 자세히 알아보려면
파서 차단 대 비동기 자바스크립트를 참조하세요.
비동기 스크립트는 지정된 순서대로 실행된다는 보장이 없으므로
document.write를 사용하면 안 됩니다. 실행 순서가 중요한 스크립트나 페이지의 DOM 또는 CSSOM을 액세스하거나 수정해야 하는
스크립트의 경우 이러한 제약을 고려하여 다시 작성해야 할 수 있습니다.
자바스크립트 로드 지연
초기 페이지 렌더링에 필요하지 않은 스크립트의 로드와 실행을
페이지의 초기 렌더링이나 기타 중요한 부분의 로드가 완료될 때까지
지연시킬 수 있습니다. 지연하면 리소스 경합을 줄이고 성능을 개선할 수 있습니다.
FAQ
- jQuery와 같은 자바스크립트 라이브러리를 사용하는 경우 어떻게 해야 하나요?
- JQuery와 같은 대부분의 자바스크립트 라이브러리는 페이지 기능을 향상하여
상호작용, 애니메이션, 기타 효과를 추가하는 데 사용됩니다. 하지만 이러한 동작 중 상당수는
스크롤 없이 볼 수 있는 콘텐츠를 렌더링한 후 안전하게 추가할 수 있습니다.
자바스크립트를 비동기로 만들거나 로드 지연을 고려해 보세요.
- 자바스크립트 프레임워크를 사용하여 페이지를 구성하는 경우 어떻게 해야 하나요?
- 페이지의 콘텐츠가 클라이언트 측 자바스크립트로 구성된 경우,
추가 네트워크 왕복을 피하기 위해 관련 자바스크립트 모듈 삽입을
고려해야 합니다. 마찬가지로 서버 측 렌더링을 활용하면 첫 페이지 로드 성능을 대폭 개선할 수 있습니다. 즉, 서버에서 자바스크립트 템플릿을 렌더링하여 첫 번째 렌더링을 빠르게 제공한 다음,
페이지가 로드된 후 클라이언트 측 템플릿을 사용하는 것입니다. 서버 측
렌더링에 관해 자세히 알아보려면
http://youtu.be/VKTWdaupft0?t=14m28s를 참조하세요.