페이지 로딩 속도 향상을 위한 Async와 Defer 사용법

검색 엔진 최적화 로딩 제어

검색엔진 최적화를 위해 페이지 로딩 속도를 향상시키는 작업은 필수적입니다. 이 글에서는 자바스크립트의 로딩 동작을 제어하여 검색엔진 최적화에서 최초 속도를 향상시키는 방법으로 async와 defer를 사용하는 방법입니다.

async 와 defer

async 와 defer를 사용하게 되면 페이지가 로딩되는 속도를 제어할수 있습니다. 중요한 코드와 차후 실행되도 상관 없는 코드를 구분해서 순차적으로 로딩을 제어해서 최초 페이지가 로딩 되는 속도에 제어합니다.

먼저 실행하지 않아도 상관없는 코드를 동시에 로딩시 실행하게 되면 그 실행 시간만큼 페이지가 로딩 되는데 소요됩니다.

async

async는 자바스크립트를 비동기적으로 로드하는 방법입니다. 문서가 로드되는 동안 스크립트 파일 불어오고 실행합니다.

async 코드를 사용하면 외부 요소를 비동기적으로 로드하여 검색엔진 최적화 속도를 향상시킬 수 있습니다. 이 방법은 페이지가 로드될 때 HTML 구조 분석 과정에서 중단 없이 외부 스크립트를 비동기적으로 로드합니다. 요소가 다운로드가 완료되면 즉시 실행되며, 동시 로드를 통해 검색엔진 최적화 속도를 높이는 효과를 줍니다.

단 각각의 스크립트가 순서없이 동시에 진행되기 때문에 스크립트의 실행순서는 제어할수 없기 때문에 순차적으로 실행 되어야 하는 스크립트 사용시는 주의해야 합니다.

✔ 예시

<script async src="https://example.com/script.js"></script>

HTML분석과 스크립트 로딩이 동시에 진행됩니다.
스크립트다운이 완료되면 실행됩니다.
실행은 다운로드 완료시 진행되기 때문에 작동순서를 확정할수 없는 단점이 있습니다.

defer

defer는 검색엔진 최적화를 위해 외부 요소를 HTML 기본 작업(파싱)이 완료된 후에 실행하게 합니다. 이 방법은 순차적으로 진행이 가능하며, 기본 로딩에 영향을 주지 않아 최초 로딩 속도를 향상시킬 수 있습니다. defer는 로딩을 지연시켜 검색엔진 최적화 속도를 향상시키는 효과가 있습니다.

즉 페이지가 로딩된 후 실행되기때문에 페이지 로딩 속도에 미치는 영향을 최대한 줄일수 있습니다.