자바스크립트(JavaScript)는 웹 페이지에 동적인 콘텐츠를 표시하는 데 필수적인 프로그래밍 언어입니다. 워드프레스 사이트에서는 오디오와 비디오를 삽입하거나, 이미지 갤러리·인터랙티브 메뉴·카운트다운 타이머 등을 구현할 때 자바스크립트가 활용됩니다.
자바스크립트 파일은 .js 확장자를 사용하며, 일반적인 워드프레스 사이트에서는 활성화된 테마와 플러그인이 페이지에 자바스크립트 파일을 삽입합니다. 예를 들어 테마의 홈페이지 슬라이더가 정상적으로 작동하려면 slider.js 파일이 필요하고, 문의 폼 페이지에는 form.js 파일이 요구되는 식입니다.
자바스크립트는 현대적인 워드프레스 사이트에 없어서는 안 되는 요소입니다. 하지만 불행히도 올바르게 최적화하지 않으면 웹사이트 속도를 크게 저하시킬 수도 있습니다.
초기 버전의 HTTP(Hypertext Transfer Protocol)에서는 각 자바스크립트 파일을 순서대로 다운로드하고 실행해야만 페이지가 올바르게 표시되었기 때문에, 웹사이트 속도가 느려지는 원인이 되었습니다. 이 문제를 해결하기 위한 대표적인 최적화 기법이 바로 여러 개의 자바스크립트 파일을 하나로 합쳐 브라우저가 보내야 하는 HTTP 요청 수를 줄이는 것입니다. 이 기술은 '자바스크립트 집계(Javascript Aggregation)'라고도 불립니다.
이 글에서는 많은 웹사이트 운영자가 워드프레스에서 외부 자바스크립트를 결합하는 이유를 설명하고, 이 작업에 활용할 수 있는 유용한 워드프레스 플러그인을 소개합니다. 또한 대부분의 사이트 운영자에게 더 이상 파일 결합이 필요하지 않은 이유도 함께 다룹니다.
워드프레스에서 외부 자바스크립트 파일을 결합해야 하는 이유
자바스크립트 코드는 SCRIPT 태그를 사용해 HTML에 직접 추가할 수도 있지만, 일반적으로는 별도의 외부 파일로 저장하는 것이 관례입니다. 이렇게 하면 코드가 분리되어 관리가 편해지고, 여러 페이지에서 동일한 자바스크립트 함수를 호출할 수 있어 실용적입니다.
웹 페이지에 필요한 모든 자바스크립트 파일은 브라우저가 페이지 렌더링 과정에서 다운로드해야 합니다.
| 페이지 렌더링(Page Rendering) | 방문자가 웹 페이지를 열면 브라우저는 코드의 각 줄을 순서대로 처리하며 페이지를 구성합니다. 이 과정을 페이지 렌더링이라고 합니다. |
| HTTP 요청(HTTP Requests) | 서버에 있는 파일에 접근하기 위한 요청을 HTTP 요청이라고 합니다. 따라서 브라우저는 페이지에 필요한 자바스크립트 파일마다 개별적으로 HTTP 요청을 보내야 합니다. |
파일이 순차적으로 다운로드되는 환경에서는 HTTP 요청 수가 많아질수록 웹 페이지 로딩 시간이 길어집니다. 그래서 워드프레스에서 외부 자바스크립트 파일들을 결합하면, 페이지 렌더링 과정에서 발생하는 HTTP 요청 수를 크게 줄일 수 있습니다.
일부 검색 엔진은 외부 자바스크립트를 두 개의 파일로 나누어 결합할 것을 권장합니다.
| 중요한 자바스크립트 함수 (파일 1) | 첫 번째 파일에는 초기 화면이 올바르게 렌더링되는 데 반드시 필요한 핵심 함수들이 포함됩니다. |
| 덜 중요한 자바스크립트 함수 (파일 2) | 두 번째 파일에는 페이지 로딩이 완료된 후에 호출해도 되는 부차적인 함수들이 포함됩니다. |
예를 들어 한 페이지가 정상적으로 표시되기 위해 9개의 자바스크립트 파일이 필요하다면, 파일 결합을 통해 자바스크립트 관련 HTTP 요청 수를 9개에서 단 2개로 줄일 수 있습니다. 외부 CSS 파일 역시 결합이 가능하므로, 페이지의 전체 HTTP 요청 수를 더욱 줄일 수 있습니다.
외부 자바스크립트 파일을 결합하면 사이트가 빨라질까?
HTTP 프로토콜의 발전 덕분에, 웹 호스팅 업체가 HTTP/2를 지원하지 않는 경우가 아니라면 더 이상 자바스크립트와 CSS 파일을 결합하는 것이 필수가 아닙니다.
HTTP/1.0과 HTTP/1.1에서는 각각의 자바스크립트 및 CSS 파일을 순차적으로 다운로드해야 했습니다. 즉, 하나의 파일이 완전히 내려받아져야 다음 파일 다운로드가 시작되는 방식이었습니다. 2015년에 등장한 HTTP/2 프로토콜은 병렬 다운로드를 허용함으로써 이 문제를 해결했습니다. 모든 외부 리소스를 동시에 다운로드할 수 있게 된 지금은, HTTP/2를 사용하는 환경에서는 파일을 결합해도 아무런 이점이 없습니다.
현재 인터넷 브라우저의 약 95.6%가 HTTP/2를 지원합니다. 2022년 1월 6일 기준으로 전체 웹사이트의 46.9%가 HTTP/2를 사용하고 있으며, 아래 그래프에서 확인할 수 있듯이 인기 있는 상위 웹사이트들 사이에서는 이 비율이 훨씬 더 높습니다.
웹 호스트가 HTTP/2를 지원한다면 오히려 파일 결합이 사이트 속도를 늦출 수 있습니다. 결합된 자바스크립트 파일은 원래 파일들을 합친 것보다 용량이 커지는데, 브라우저가 두 개의 대형 자바스크립트 파일을 순차적으로 받는 것이 작은 파일 여러 개를 동시에 받는 것보다 더 오랜 시간이 걸릴 수 있기 때문입니다.
자바스크립트와 함께 사용할 것을 추천하는 최적화 기법은 '압축(Minification)'과 '파싱 지연(Defer Parsing)' 두 가지입니다.
| 압축(Minify) | 압축(Minification)은 공백이나 주석처럼 불필요한 문자를 제거하여 자바스크립트 파일의 용량을 줄이는 기법입니다. |
| 파싱 지연(Defer Parsing) | 자바스크립트 코드는 페이지 렌더링 과정을 느리게 만듭니다. 이 문제를 해결하기 위해 Defer와 Async라는 두 가지 기법을 활용할 수 있습니다. |
자바스크립트가 페이지 렌더링을 느리게 만드는 이유를 더 깊이 이해하려면, 워드프레스에서 자바스크립트 파싱을 지연시키는 방법에 관한 글을 참고하시기 바랍니다.
워드프레스에서 외부 자바스크립트를 결합하는 방법
웹 호스팅 업체가 아직 HTTP/1.1만 지원한다면, 워드프레스에서 외부 자바스크립트 파일과 CSS 파일을 결합하는 것이 여전히 좋은 선택입니다.
파일 결합 전후로 반드시 성능 테스트를 진행하여 페이지 로딩 시간이 어떻게 변화했는지 확인하세요. GTmetrix, Google PageSpeed Insights, Pingdom Website Speed Test 같은 도구를 활용하면 됩니다.
Autoptimize
Autoptimize는 워드프레스 사용자가 활용할 수 있는 가장 효과적인 최적화 플러그인 중 하나입니다. HTML 압축을 지원하고, 자바스크립트와 CSS의 파일 결합 및 압축 기능도 제공합니다. 또한 렌더링 차단(render-blocking)을 막기 위해 자바스크립트 파일을 집계하는 대신 지연(defer) 처리할 수 있으며, Google Fonts를 위한 최적화 옵션도 갖추고 있습니다.
저 역시 여러 워드프레스 사이트에서 Autoptimize를 사용해 왔는데, 페이지 로딩 속도가 항상 눈에 띄게 개선되었습니다.
공식 웹사이트 방문하기 | Autoptimize 다운로드
Asset CleanUp
Asset CleanUp은 매우 세밀하게 설정할 수 있는 최적화 플러그인으로, 자바스크립트와 CSS의 압축·결합·지연 처리를 지원합니다. HTML 정리 기능도 제공하며, 폰트를 관리하고 폰트가 페이지 로딩 속도에 미치는 영향을 줄일 수 있는 다양한 도구를 포함하고 있습니다.
특히 눈에 띄는 기능은 자바스크립트·CSS 관리자입니다. 이 기능을 활용하면 사이트 전체에서 특정 자바스크립트와 CSS 파일이 어떤 페이지에서 로드될지를 정확하게 지정할 수 있습니다.
공식 웹사이트 방문하기 | Asset CleanUp 다운로드
WP Super Minify
WP Super Minify는 조금 다른 방식으로 작동합니다. 자바스크립트 압축과 CSS 압축 옵션만 제공하는데, 옵션을 선택하면 파일을 결합하고 압축(minify)한 후 캐싱까지 자동으로 처리해 줍니다.
복잡한 설정 없이 그냥 잘 작동하는 간단한 최적화 솔루션을 찾고 있다면, 이 플러그인이 적합할 수 있습니다.
공식 웹사이트 방문하기 | WP Super Minify 다운로드
워드프레스 캐시 플러그인으로 외부 자바스크립트 파일 결합하기
최고의 워드프레스 캐시 플러그인들은 웹사이트 성능을 개선하는 데 도움이 되는 다양한 추가 최적화 도구를 함께 제공합니다. 따라서 현재 사용 중인 캐시 솔루션이 이미 외부 자바스크립트와 CSS 파일 결합 기능을 지원할 가능성이 높습니다.
예를 들어 WP Rocket에는 자바스크립트와 CSS 파일을 압축하고 결합하는 옵션이 있습니다. 렌더링 차단을 방지하기 위해 자바스크립트 파일을 지연 처리하는 기능도 함께 제공됩니다.
권장드리는 방법은 선호하는 워드프레스 캐시 플러그인의 파일 결합 기능으로 페이지 로딩 속도를 먼저 측정한 뒤, Autoptimize나 Asset CleanUp 같은 독립형 자바스크립트 최적화 솔루션과 결과를 비교해 보는 것입니다.
마무리 생각
지금까지 외부 자바스크립트 파일 결합에 대해 살펴보았습니다. 말씀드린 것처럼, 웹 호스트가 HTTP/2를 지원한다면 파일을 병렬로 다운로드하는 것이 더 효율적이기 때문에 더 이상 자바스크립트 파일을 집계할 필요가 없습니다.
반면 웹 호스트가 HTTP/1.1만 지원한다면, 워드프레스에서 외부 자바스크립트를 결합하여 페이지 로딩 시간을 단축할 수 있습니다.
추천 글: 워드프레스에서 사용하지 않는 CSS 제거하기
읽어주셔서 감사합니다.
- Kevin