검색엔진 최적화 로딩제어
검색엔진의 최적화를 위한 속도향상 작업으로 개별적 비동기 로딩관리로 검색엔진 성능향상에 대한 자료입니다. 자바스크립트의 로딩 동작을 제어해서 검색엔진 최적화에서 최초 속도부분을 향상시킬수 있는 방법으로 async 와 defer를 사용하기도 합니다.
async
async 코드를 사용해서 검색엔진의 최적화를 위해 외부요소를 비동기적으로 로드시켜서 검색엔진최적화 속도를 향상시킵니다. 이방법은 페이지가 로드시 HTML를 구조를 분석하는 과정에서 중단없이 외부스크립트를 비동기적으로 로드시켜며 요소가 다운로드가 완료되면 바로 실행하게 하게됩니다. 동시 로드로 검색엔진의 최적화 속도를 높이는 방법입니다.
✔ 예시
<script async src="https://example.com/script.js"></script>- HTML분석과 스크립트 로딩이 동시에 진행됩니다.
- 스크립트다운이 완료되면 실행됩니다.
- 실행은 다운로드 완료시 진행되기 때문에 작동순서를 확정할수 없는 단점이 있습니다.
defer
defer는 검색엔진 최적화의 속도를 향상하기 위해서 외부 요소를 HTML 기본작업(파싱)이 완료된 후에 실행하게 합니다. 순차적 진행이 가능하며 기본로딩에 영향을 주지 않아 검색엔진 최적화 최초 로딩속도를 향상시킬수 있습니다. 이 방법은 로딩을 지연시켜 검색엔진 최적화 속도를 향상시키는 방법입니다.
✔ 예시
<script defer src="https://example.com/script.js"></script>- HTML 기본작업(파싱)이 완료후 로딩이 이루어집니다.
- 순차적 로딩을 제어 할수 있습니다.
검색엔진 최적화에서 최초 속도를 향상시키기 위해 각 요소의 중요도를 판단해 선순위 로딩과 후순위 로딩을 지정함으로써 다른 요소와 병목현상을 줄여줍니다. 이방법으로 검색엔진 최적화에서 페이지 로딩의 속도를 향상시킬수 있습니다.
