PageSpeed Insights 접했을 수 있습니다 . WordPress에서 이 문제를 쉽게 해결하는 방법을 알려드리겠습니다.
WordPress에서 JavaScript 지연 실행
워드프레스에서 자바스크립트 파싱을 지연시키는 방법에는 크게 세 가지가 있습니다. 워드프레스 플러그인을 사용하면 자바스크립트 파싱을 연기하는 데 매우 효과적입니다. 무료 및 유료 플러그인을 모두 찾아볼 수 있습니다. 두 가지 인기 플러그인을 활용하여 이 방법을 자세히 살펴보겠습니다.
Varvy 방식을 사용하는 것은 기술에 능숙하고 Varvy에서 제공하는 코드 조각을 사용하기 위해 사이트의 코드를 직접 수정할 의향이 있는 사용자에게 적합한 옵션입니다.
자식 테마의 functions.php 파일에 간단한 코드 조각을 추가하면 스크립트 로딩을 자동으로 지연시킬 수도 있습니다. 첫 번째 방법부터 살펴보겠습니다
1. 무료 비동기 자바스크립트 플러그인
프랭크 구센스는 인기 플러그인 '오토옵티마이제'를 개발한 사람이 만든 무료 워드프레스 플러그인 'Async JavaScript'를 개발했습니다.
이를 통해 async 또는 defer 메서드를 사용하여 JavaScript 구문 분석을 간단히 지연시킬 수 있습니다.
WordPress.org에서 무료 플러그인을 설치하고 활성화하면 바로 시작할 수 있습니다. 플러그인을 설치한 후에는 설정 페이지의 비동기 JavaScript 섹션에서 플러그인을 구성할 수 있습니다.
상단에서 플러그인 기능을 활성화하고 비동기 또는 지연 실행 중에서 선택할 수 있습니다.
비동기 다운로드 중에는 HTML 파싱이 진행되는 동안 JavaScript가 다운로드되지만, JavaScript를 실행하기 위해 HTML 파싱이 일시 중지됩니다.
이 기능은 HTML 파싱이 진행되는 동안 JavaScript를 다운로드하고, HTML 파싱이 완료된 후에 JavaScript를 실행할 수 있도록 합니다.
jQuery를 방식을 선택할 수 있습니다 . jQuery 스크립트 파싱을 지연시키면 웹사이트의 핵심 기능이 손상될 수 있습니다. 안전을 위해 jQuery를 제외하는 것이 좋지만, 지연 파싱을 실험해보고 싶다면 그렇게 해도 괜찮습니다. 웹사이트를 출시하기 전에 반드시 테스트하세요.
또한 사용자가 원하는 특정 테마나 플러그인을 대상으로 지연 실행 여부를 선택할 수 있는 편리한 기능이 있으며, 특정 스크립트를 지연 실행 대상에서 수동으로 포함하거나 제외할 수도 있습니다.
2. WP Rocket 플러그인을 사용하세요
WP Rocket 플러그인은 서버 수준 캐싱 기능이 내장되어 있어 WP Rocket 플러그인과 원활하게 통합되기 때문에 저희가 허용하는 몇 안 되는 캐싱 플러그인 중 하나입니다.
WP Rocket 대시보드의 파일 최적화 탭에는 다양한 성능 최적화 옵션이 있으며, 성능 탭에서 JavaScript 파싱을 지연시키는 기능도 찾을 수 있습니다. JavaScript 파일 섹션에서 "JavaScript 지연 로드" 옵션을 사용해 보세요.
Varvy가 권장하는 방법을 사용하세요
이 글 앞부분에서 Varvy의 패트릭 섹스턴이 사이트 초기 로딩이 완료된 후에 JavaScript를 다운로드하고 실행하는 코드 조각을 사용할 것을 권장했다고 언급했습니다.
Varvy가 제공하는 코드 조각을 약간 수정하고, 해당 스크립트를 <body> 태그의 닫는 태그 바로 앞에 추가하면, Varvy가 제공하는 코드 조각을 템플릿으로 사용하여 이 방법을 구현할 수 있습니다.
Seahawk Media 블로그 에서 이와 같은 글을 더 찾아보실 수 있습니다 .
워드프레스 속도 최적화 서비스를 이용해 보세요 .
