Async JavaScript 플러그인 세팅방법 – 워드프레스 사이트 속도 향상

Async JavaScript과 같은 플러그인을 설치하여 간단한 설정만으로로 워드프레스 속도를 높일 수 있습니다. Autoptimize 플러그인 개발자인 Frank Goossens(futtta)가 제공하고 있는 또 다른 플러그인 중 하나입니다. 단순히 플러그인을 설치하고 세팅만 해도 웹사이트 속도가 개선되는 것을 확인할 수 있습니다.

이 플러그인은 웹사이트 첫 화면에 보이는 컨텐츠에서 렌더링 차단 자바스크립트를 제거하는데, 자바스크립트 등이이 로드될 때까지 시간이 걸리게 되는데 페이지를 스크롤 해야만 볼 수 있는 콘텐츠 등등의 렌더링을 컨트롤 함으로서서 속도를 개선 시킬 수 있습니다.

Async JavaScript 플러그인에서는 async 혹은 defer 속성을 추가하거나 제외하는 기능을 손쉽게 설정이 가능합니다. 크롬, 엣지, 파이어폭스, 사파리, 오페라 등의 브라우저에서 async 속성이 사용되고 있습니다.

async 와 defer의 차이점



Async JavaScript 세팅방법

1. 워드프레스 플러그인 홈페이지에서 Async JavaScript를 설치합니다.

> Async JavaScript를 설치



2. Enable Async JavaScript옵션을 체크하여 활성화 해줍니다.

GV aPY5B3QhJI6bEpjcBI706ia71poZYsOZdJ5qy6GiOFGpwWSjK3r6vFWea89SCIYfmAI4mO4iaiJOgL2cXiLR0zc4Qjs2ba7AHaRpczbMID1j1zYbDRrRFNrESVwmnMm2NS5u0zblQVx3dLeVcatzFUnaVGp0G0oG29bJayzg zdr5ARWwjt 8whcCRA
Async JavaScript 플러그인 세팅방법 – 워드프레스 사이트 속도 향상



3. Apply Defer (jQuery excluded)옵션을 클릭합니다.

RJNdw
Async JavaScript 플러그인 세팅방법 – 워드프레스 사이트 속도 향상



4. Async JavaScript Method와 jQuery Method가 각각 Defer, Exclude로 설정되었는지 확인합니다.

ueP0pLDcGWndTDFxXnLlKYKCL 9746y8QQ0Qx9upnij67Kokd4AUJy5WPk6B3Nb76OXS5VzdVQ2sqEIMS352nOedTTv8rs39y8GCVwQ4Q3 qNFEo8gAtV3Xm9tVYdOL vv7W985nw3qK5jMnHwmJUfcUCXZMzQc60EpTtjGvqeEezJz3DBtYNXHaJGHrHA
Async JavaScript 플러그인 세팅방법 – 워드프레스 사이트 속도 향상



5. Save Setting을 클릭합니다.

Ho5MEH3imhsLJybCbbxmigLANckcKP a nft5WdziHQ5mXkw10fmW1Hl E2deU9VbvJMGRumBlRgP
Async JavaScript 플러그인 세팅방법 – 워드프레스 사이트 속도 향상



유의사항

Javascript는 Defer로 설정하는 것을 추천드립니다. 문제가 발생할 경우 옵션을 변경하도록 합니다.

Query는 Async 혹은 Defer로 설정할 경우 일부 기능이 깨질 수가 있습니다. 웹페이지의 레이아웃이 제대로 실행되지 않을 수도 있습니다. 따라서 Async 혹은 Defer로 설정할 때 Script Exclusion, Plugin Exclusions등의 메뉴에서 세부조정을 하면서 개선해나가는 것이 바람직합니다.



관련영상


댓글남기기