렌더링 차단 자바스크립트 삭제

<ph type="x-smartling-placeholder">를 통해 개인정보처리방침을 정의할 수 있습니다. 이 규칙은 PageSpeed Insights에서 HTML이 차단을 참조하는 것으로 감지되면 트리거됩니다. 외부 자바스크립트 파일을 찾을 수 있습니다.

개요

브라우저가 페이지를 렌더링하려면 먼저 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 구성을 차단하므로 첫 렌더링 시간이 지연됩니다. 받는사람 JavaScript가 파서를 차단하지 않도록 하려면 HTML async를 사용하는 것이 좋습니다. 속성을 사용할 수 있습니다. 예를 들면 다음과 같습니다. 
<script async src="my.js">
드림 다음 페이지를 참조하세요. 파서 차단과 비동기 자바스크립트 비교를 읽고 비동기 스크립트에 관해 자세히 알아보세요. 비동기 스크립트는 지정된 순서대로 실행된다는 보장이 없으므로 document.write 실행 순서가 중요한 스크립트나 페이지의 DOM 또는 CSSOM을 액세스하거나 수정해야 하는 스크립트의 경우 이러한 제약을 고려하여 다시 작성해야 할 수 있습니다.

자바스크립트 로드 지연

초기 페이지 렌더링에 필요하지 않은 스크립트의 로드와 실행을 페이지의 초기 렌더링이나 기타 중요한 부분의 로드가 완료될 때까지 지연시킬 수 있습니다. 지연하면 리소스 경합을 줄이고 성능을 개선할 수 있습니다.

FAQ

jQuery와 같은 자바스크립트 라이브러리를 사용하는 경우 어떻게 해야 하나요?
JQuery와 같은 많은 자바스크립트 라이브러리는 추가 상호작용, 애니메이션 및 기타 효과가 포함됩니다. 하지만 이러한 동작 중 상당수는 스크롤 없이 볼 수 있는 콘텐츠를 렌더링한 후 안전하게 추가할 수 있습니다. 자바스크립트를 비동기로 만들거나 로드 지연을 고려해 보세요.
자바스크립트 프레임워크를 사용하여 페이지를 구성하는 경우 어떻게 해야 하나요?
페이지의 콘텐츠가 클라이언트 측 JavaScript로 구성된 경우 추가적인 로드를 방지하기 위해 관련 자바스크립트 모듈을 인라인 처리하는 것을 조사해야 합니다. 네트워크 왕복 마찬가지로 서버 측 렌더링을 활용하면 첫 페이지 로드 성능을 대폭 개선할 수 있습니다. 즉, 서버에서 자바스크립트 템플릿을 렌더링하여 첫 번째 렌더링을 빠르게 제공한 다음, 페이지가 로드된 후 클라이언트 측 템플릿을 사용하는 것입니다. 자세한 내용은 자세한 내용은 http://youtu.be/VKTWdaupft0?t=14m28s.

의견

이 페이지가 도움이 되셨나요?

<ph type="x-smartling-placeholder">를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">