내용

자바스크립트 지연 로딩은 페이지의 초기 로딩 시간을 최적화하는 데 도움이 됩니다. 리소스의 우선순위를 조절하기 위해서는 우선 순위에 따라 리소스를 지연로딩해야 합니다. 주요 방법은 다음과 같습니다.

1. Critical CSS/JS: 페이지의 가장 중요한 부분에 사용되는 CSS와 자바스크립트 파일을 가장 먼저 로드하도록 지정합니다. 이를 통해 페이지의 초기 렌더링 속도를 향상시킬 수 있습니다.

예시:

<link rel="preload" href="critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<script src="critical.js" defer></script>

1. 지연 로딩 사용: async나 defer 속성을 사용하여 자바스크립트 파일을 효율적으로 로딩합니다. async는 파일을 비동기로 다운로드하고 즉시 실행하며, defer는 파일을 비동기로 다운로드하지만 파싱 후 실행합니다.

예시:

<script src="example.js" async></script>
<script src="example.js" defer></script>

1. Preload 사용: 페이지 로드 시 필요한 리소스를 미리 로드하고, 지연 로딩될 리소스를 미리 가져오도록 하는 <link rel="preload">를 사용합니다.

예시:

<link rel="preload" href="example.js" as="script">
<link rel="preload" href="image.jpg" as="image">

1. HTTP/2 사용: HTTP/2를 통해 다수의 리소스를 병렬로 다운로드함으로써 지연 로딩을 최적화할 수 있습니다.

결론

자바스크립트 지연 로딩을 사용하여 리소스의 우선순위를 조절할 수 있으며, 이를 통해 페이지의 성능을 최적화할 수 있습니다.

자세한 내용은 Google Developers의 문서를 참고하시기 바랍니다.