검색 엔진 최적화(SEO)에서 페이지 로딩 속도 향상 방법 [async와 defer 활용하기]

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

SEO 최적화를 위한 자바스크립트 로딩 속도 개선

페이지 로딩 속도는 검색 엔진 최적화(SEO)에서 중요한 요소로, 검색 엔진이 웹 페이지를 크롤링하고 인덱싱할 때 중요한 영향을 미칩니다. 웹 페이지의 로딩 속도가 느리면 사용자가 페이지를 떠날 가능성이 높고, 검색 엔진 순위에도 부정적인 영향을 미칠 수 있습니다. 특히 자바스크립트의 로딩 방식을 제어하면 페이지 로딩 속도를 향상시킬 수 있습니다. 그 중 async와 defer를 활용하는 방법은 페이지 로딩을 최적화하는 데 좋은 방법입니다.

async와 defer로 페이지 로딩 속도 빠르게 만들기

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

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

async 사용방법

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

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

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

✔ 예시

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

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

defer 사용방법

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

[ 티스토리 블로그 꾸미기 ] SEO 최적화로 티스토리 블로그 글 목록 노출 개선하기

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

✔ 예시

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

• HTML 기본작업(파싱)이 완료후 로딩이 이루어집니다.
• 순차적 로딩을 제어 할수 있습니다.

검색엔진 최적화에서 최초 속도를 향상시키기 위해 각 요소의 중요도를 판단해 async 와 defer 를 사용함으로써 다른 요소와 병목 현상을 줄여줍니다. 이 방법으로 검색 엔진 최적화에서 페이지 로딩의 속도를 조금 더 향상시킬수 있습니다.

async 와 defer 를 사용하는 방법