WordPress에서 DNS 사전 페칭을 설정하는 방법

DNS 프리페칭으로 널리 알려진 도메인 이름 시스템 프리페칭은 사용자가 요청하기 전에 도메인 이름을 확인하는 프로세스입니다. 주로 웹사이트를 더 빨리 로드하고 전반적인 성능을 높이는 데 사용됩니다.

WordPress의 DNS 최적화는 Google Fonts, Google Analytics, Font Awesome 등의 정기적으로 요청되는 리소스를 사전 설정하여 웹사이트 로드 속도를 높이는 인기 있는 방법입니다.

이 글에서는 플러그인을 사용하거나 직접 설정하는 방식으로 워드프레스에 DNS 프리페칭을 추가하는 방법을 알려드립니다. 이를 통해 워드프레스 사이트의 로딩 속도를 향상시킬 수 있습니다.

차례 숨기기

DNS 프리페치는 어떻게 작동하나요?

DNS 프리페칭을 사용하는 이유

WordPress에서 DNS 사전 페칭을 설정하는 방법

맺음말

DNS 프리페치는 어떻게 작동하나요?

DNS Prefetch는 백그라운드에서 작동합니다. 여러 도메인에서 리소스를 로드하는 경우. 이는 일반적으로 브라우저가 DNS 조회를 수행하는 데 약 100ms가 걸리기 때문에 웹사이트 로드 시간에 영향을 미칩니다.

즉, 리소스를 로딩하는 도메인이 5개 이하인 경우 브라우저가 조회하는 데 최대 500ms가 걸릴 수 있습니다.

하지만 DNS 프리페칭의 기능은 사용자가 해당 링크를 클릭하기 전에 해당 도메인을 백그라운드에서 로드하는 것입니다.

즉, 사용자가 이를 클릭하는 순간 리소스가 준비되고 페이지가 즉시 로드됩니다.

외부 리소스에 의존하는 경우가 많다면 DNS 프리페치를 사용하면 로딩 시간을 개선할 수 있습니다. 구글 폰트, 구글 애널리틱스 등을 사용하는 일반적인 워드프레스 사이트의 경우 DNS 프리페치를 통해 최대 500ms의 로딩 시간을 단축할 수 있습니다.

DNS 프리페칭을 사용하는 이유

사이트 로드 속도를 높이기 위해 미리 페치할 수 있는 리소스가 많이 있습니다. 여기에는 다음이 포함됩니다.

구글 글꼴
Google Analytics
CDN 주소
구글 태그 관리자
멋진 글꼴
구글지도
그리고 외부 리소스

WordPress에서 DNS 사전 페칭을 설정하는 방법

WordPress에서 DNS 사전 페칭을 활성화하려면 다음 단계를 따르세요.

1. DNS Prefetch 플러그인 설치

WordPress에서 DNS 프리페칭을 구현하는 가장 쉬운 방법은 플러그인을 사용하는 것입니다. 이렇게 하면 테마 파일을 편집해야 하는 스트레스를 덜 받을 수 있습니다.

이 문제를 해결하는 데 가장 적합한 플러그인은 Perfmatters 입니다 . Perfmatters는 WordPress 웹사이트 속도를 향상시키는 놀라운 기능이 많은 프리미엄 플러그인입니다. WP Rocket 도 좋은 대안입니다.

Perfmatters를 사용하려면 해당 사이트에서 플러그인을 다운로드 해야 합니다 . 다운로드한 플러그인을 설치하고 WordPress 관리자 화면에서 활성화하세요.

플러그인을 사용하지 않고 수동으로 사용하려면 바로 4번으로 넘어가세요.

2. 사전 페치할 도메인 추가

Perfmatters 플러그인을 설치하고 활성화한 후 플러그인 설정으로 가서 추가 탭을 클릭합니다. 거기서 사전 페치할 도메인을 추가할 수 있습니다.

아래 패턴에 따라 줄당 하나의 도메인만 추가해야 합니다.

//fonts.googleapis.com //www.google-analytics.com //cdnjs.cloudflare.com //www.googletagmanager.com

WP Rocket의 경우, 사전 로드 탭으로 가서 DNS 요청 사전 페치로 스크롤합니다. 거기에서 사전 페치하려는 URL을 입력할 수 있습니다. 위의 것과 동일한 패턴입니다.

3. 변경 사항을 저장합니다.

변경 사항을 저장했는지 확인하세요. 그게 전부입니다.

4. WordPress에 DNS 프리페칭을 수동으로 추가합니다.

플러그인을 사용하지 않고 WordPress에 DNS 프리페칭을 수동으로 추가하려면 테마의 functions.php 파일을 직접 편집해야 합니다.

아래 코드를 functions.php에 추가하기만 하면 됩니다. 아래 예에서 Google Analytics, Google Tag Manager, Google fonts를 가이드로 추가했습니다. 편집할 수 있고 더 추가할 수도 있습니다.

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

다음과 같은 새 줄을 추가하세요.

<link rel="dns-prefetch" href="https://DOMAIN.com" />

맺음말

DNS 프리페칭은 특히 모바일 버전의 웹사이트 속도를 높일 수 있습니다. 특히 외부 리소스에 많이 의존하는 경우 차이를 느낄 수 있습니다.

사이트 속도를 향상시킬 수 있지만, 사용하는 WordPress 호스팅과 테마가 사이트 속도를 결정하는 가장 중요한 요소라는 점을 기억하세요. 저는 WordPress 호스팅으로 Cloudways를 추천하며, 자세한 내용은 제 Cloudways 리뷰를 참고하세요 . Cloudways가 부담스럽다면 Hostinger 나 Bluehost도 소규모 웹사이트에 적합합니다.

저는 테마 제작에 GeneratePress를 추천하며 , 그 이유에 대해서는 제 GeneratePress 리뷰를 참고해 주세요.