WordPress에서 Preload, Prefetch, Preconnect 구현하기

by

웹사이트 속도 향상을 위한 최신 브라우저 기능 활용

웹사이트 소유자라면 누구나 자신의 웹페이지 로딩 속도를 최대한 빠르게 만들고 싶어 합니다. 세계적인 웹사이트 속도 유지 관리는 쉬운 일이 아니지만, 다양한 브라우저 기능을 활용하면 웹사이트 리소스 로딩을 개선할 수 있습니다. 이러한 기술들을 ‘사전 탐색’ 기술이라고도 합니다.

참고: 이러한 브라우저 힌트 기술들은 첫 방문 시에는 큰 효과를 보지 못하지만, 이후 요청 시 속도 향상을 체감할 수 있습니다.

예압 (Preload)

예압(preload) 태그를 사용하면 브라우저가 특정 정적 리소스를 미리 가져오도록 지시할 수 있습니다. 이는 이미지, 글꼴, JavaScript, CSS, 스크립트, 비디오 등이 될 수 있습니다. 이 기능은 리소스 로딩의 우선순위를 정하는 데 도움을 주어 웹사이트 성능을 향상시킵니다.

특히 사용자가 여러 페이지를 방문할 가능성이 높은 경우, 예를 들어 전자상거래 웹사이트에서 상품 페이지를 방문하여 정보를 확인하고, 다른 상품과 비교하고, 장바구니에 추가하고, 결제하는 과정을 거치는 경우, 예압 기능을 적극적으로 활용하는 것이 좋습니다.

예압 기능을 설정하는 데 사용할 수 있는 플러그인은 다음과 같습니다:

  • 더 나은 리소스 힌트: CSS 및 JS 파일 관리를 위한 무료 플러그인입니다.
  • WP Rocket: 캐싱, 사이트맵 예압 등 다양한 기능을 통해 웹사이트 성능을 강화하는 프리미엄 플러그인입니다.

예압 기능이 활성화되었는지 확인하는 가장 쉬운 방법은 페이지 소스를 확인하는 것입니다. 다음 예시와 같이 표시되어야 합니다.

<link rel="preload" as="style" href="https://yourdomain.com/styles.css">
<link rel="preload" as="script" href="scripts.js">

참고: 모든 브라우저가 예압을 지원하는 것은 아니므로, 호환성 매트릭스를 확인 후 적용해야 합니다.

사전 연결 (Preconnect)

웹사이트가 다른 도메인에서 리소스를 로드하는 경우 (예: CDN) 사전 연결(preconnect) 기능이 유용할 수 있습니다. 만약 모든 리소스가 단일 도메인에서 로드된다면 이 기능은 큰 도움이 되지 않을 수 있습니다.

사전 연결은 브라우저가 백그라운드에서 다른 도메인에 대한 연결을 미리 설정하도록 지시합니다. 이를 통해 DNS 조회, 리디렉션, TCP 핸드셰이크, TLS 협상 등에 소요되는 시간을 절약하여 다른 도메인에서 리소스를 더 빠르게 로드할 수 있습니다.

사전 연결 기능은 앞서 언급한 ‘더 나은 리소스 힌트’ 플러그인이나 Perfmatters와 같은 프리미엄 플러그인을 통해 설정할 수 있습니다.

사전 연결이 설정되면 페이지 소스에서 다음과 같이 표시됩니다.

<link rel="preconnect" href="https://anotherdomain.com">

참고: CORS (Cross-Origin Resource Sharing)가 필요한 도메인에서 리소스를 로드하는 경우, crossorigin 속성을 추가하여 다음과 같이 지정해야 합니다.

<link rel="preconnect" href="https://anotherdomain.com" crossorigin>

사전 연결 기능은 최신 버전의 Chrome, Edge, Firefox, Safari와 호환됩니다.

프리페치 (Prefetch)

프리페치(prefetch)는 브라우저가 사용자의 다음 탐색 페이지를 미리 예측하여 필요한 리소스를 다운로드하고 로컬 캐시에 저장합니다. 이를 통해 사용자가 실제로 해당 페이지로 이동할 때 즉시 로딩됩니다. 프리페치에는 두 가지 유형이 있습니다.

DNS 프리페치: 아래 설명 참고

링크 프리페치: <link rel=”prefetch” href=”…”> 태그를 사용하여 설정합니다. HTML 또는 정적 리소스를 미리 가져오는 데 사용되며, as 속성을 통해 오디오, 비디오, 스크립트, 트랙, 스타일, 글꼴, 객체, 문서 등 다양한 리소스를 지정할 수 있습니다. 링크 프리페칭은 Pre* Party Resource Hints 플러그인을 통해 설정할 수 있습니다.

<link rel=”prefetch” href=”https://example.com/page2/” as=”document”>

DNS 프리페치

여러 도메인에서 리소스를 로드하는 경우 DNS 프리페치 기능을 사용하면 각 도메인의 DNS 조회를 미리 처리하여 리소스 로딩 속도를 높일 수 있습니다. 이는 전체 대기 시간을 줄이는 데 기여합니다.

만약 3개의 도메인에서 리소스를 로드하고 각 도메인이 DNS 조회를 수행하는 데 100ms가 소요된다면, DNS 프리페치를 통해 300ms의 대기 시간을 절약할 수 있습니다.

이 기능은 Perfmatters 플러그인을 통해 쉽게 구현할 수 있으며, 테마 파일 편집에 익숙한 경우 테마의 functions.php 파일에 다음 코드를 추가할 수도 있습니다.

//* DNS Prefetching
function dns_prefetch() {
    echo '<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="https://yourdomain1.com" />
<link rel="dns-prefetch" href="https://yourdomain2.com" />
<link rel="dns-prefetch" href="https://yourdomain3.com" />
}
add_action('wp_head', 'dns_prefetch', 0);

자세한 내용은 Mozilla 웹 문서에서 확인할 수 있습니다.

사전 렌더링 (Prerender)

사전 렌더링(prerender)은 사용자가 방문할 가능성이 있는 페이지를 백그라운드에서 미리 로드하여 사용자가 해당 페이지를 클릭할 때 매우 빠른 로딩 속도를 제공합니다. 이 기능 또한 Pre* Party Resource Hints 플러그인을 통해 설정할 수 있습니다.

사전 렌더링은 가벼운 페이지나 자산에 적합하지만, 전체 사이트나 대용량 리소스에 사용하면 CPU 사용률과 대역폭이 증가하여 웹사이트 속도가 저하될 수 있으므로 주의해야 합니다. 작은 리소스부터 테스트를 시작하고 부작용이 없는지 확인하는 것이 좋습니다.

위에서 소개한 것처럼 WordPress에서 브라우저 힌트를 구현하는 데 사용할 수 있는 네 가지 주요 플러그인이 있습니다. 자신에게 필요한 기능을 제공하는 플러그인을 선택하여 활용할 수 있습니다.

무료 플러그인은 유지보수 및 지원이 잘 되는 경우 좋은 선택이지만, 많은 무료 플러그인이 그렇지 않은 경우가 많습니다. 따라서 유료 플러그인을 사용하는 것이 더 나은 선택일 수 있습니다. 유료 플러그인은 전문적인 지원을 제공하며 WordPress 표준 및 보안 업데이트를 통해 최신 상태를 유지합니다. 웹사이트 성능 최적화에 약간의 비용을 지불할 의향이 있다면 다음 플러그인들을 고려해 볼 수 있습니다.

  • WP Rocket: 800,000개 이상의 웹사이트에서 사용되는 인기 있는 플러그인으로, 웹사이트 한 개당 49달러입니다.
  • Perfmatters: 웹사이트 한 개당 24.95달러로, 다양한 성능 최적화 기능을 제공합니다.

이는 다양한 최적화 기능들을 제공합니다.

결론

워드프레스 코어는 가볍지만, 어떤 테마와 플러그인을 사용하느냐에 따라 웹사이트가 무거워질 수 있습니다. 따라서 더 나은 검색 순위와 전환율을 높이기 위해서는 웹사이트 성능 최적화가 필수적입니다. 위에서 소개한 기술들은 따라하기 쉽지만, 이것이 전부가 아닙니다.

CDN(Content Delivery Network)을 사용하여 콘텐츠를 캐시하고 전 세계 사용자에게 더 빠르게 제공하는 것 또한 고려해야 합니다. 다양한 CDN 서비스가 있지만, CDN과 보안을 모두 제공하는 SUCURI를 권장합니다.