[WP] 3가지 리소스 힌트로 워드프레스 성능 향상

워드프레스 웹 사이트를 운영하면서 초보자의 경우 테마와 플러그인을 하나 씩 설치하면서 점점 느려지는 속도에 당황하게 됩니다. SEO에도 좋지 않지만 느린 웹 사이트는 방문자 이탈율이 늘어날 수 밖에 없습니다. 속도를 향상시키기 위한 방법 중 하나는 캐시 플러그인 사용이며, 거의 모든 캐시 플러그인에 있는 리소스 힌트 제거 기능에 대해 알아 보겠습니다.

TOC

1mn read

리소스 힌트^{(Resource Hint)}

리소스 힌트와 지시문을 사용해서 페이지 리소스^(자원)를 미리 다운로드 하도록 브라우저에 지시할 수 있습니다. 이 기술을 ‘사전 탐색‘이라고 합니다. 사전 탐색은 사용자 행동을 예상하고 실제로 필요로 하는 콘텐츠를 미리 준비하는 것입니다.

크롬, 사파리와 같은 브라우저는 보이지 않는 곳에서 웹 페이지를 빠르게 탐색하기 위해 페이지의 패턴을 찾습니다. 처음 웹 사이트를 방문할 때 브라우저는 정적 리소스를 캐시하지 않았으며 2번째 방문에 브라우저가 리소스 사본을 가지고 있지 않거나 만료되었거나 콘텐츠가 변경된 경우 등이 발생할 수 있습니다.

1. Preload^미리로드

Preload^미리로드 기능은 폰트와 스크립트를 브라우저에 미리 알리는 기능입니다. 우선 순위로Resource Hint 설정이 되면 브라우저에서 다운로드 되게 설정할 수 있으며 DOM, CSS, 자바스크립트에서 참조 될 때까지 기다립니다.

※ Preload 설정 가능 값
폰트, CSS, 스크립트, 문서, 미디어, 동영상

2. Prefetch^{미리 가져오기}

프리페치는 프리로드처럼 빠르게 Resource Hint를 제공하는 것이 목적이 아닙니다. 기회가 있을 때 앞서 발생시키는 것이 목적입니다.

프리페치를 사용하면 브라우저가 사용자가 나중에 필요할 수 있는 자료를 미리 가져올 수 있습니다. 이 자료는 사용자가 다음에 브라우저를 이용할 때 필요한 것들로 브라우저가 자동으로 가져옵니다. 가져온 자료는 현재 페이지 로드가 끝나고 브라우저에서 가장 낮은 우선순위로 처리됩니다.

Prefetch는 3가지 유형이 있습니다.

2.1 DNS Prefetch

DNS 미리 가져오기는 사용자가 방문할 가능성이 있는 도메인의 DNS(Domain Name System) 레코드를 미리 브라우저에 다운로드하여 DNS 조회 시간을 단축시키는 기술입니다. 일반적으로 웹 사이트에 접속하면 브라우저는 해당 도메인의 IP 주소를 찾기 위해 DNS 조회를 수행합니다.

이때, DNS 프리페치를 사용하면 브라우저는 사용자가 방문할 가능성이 있는 도메인의 DNS 레코드를 미리 다운로드하고 브라우저 캐시에 저장합니다. 이렇게 함으로써, 사용자가 해당 도메인에 접속할 때 DNS 조회 시간을 단축시켜 더 빠른 웹 사이트 로딩을 제공할 수 있습니다.

DNS 프리페치는 사용자가 이동할 가능성이 있는 다른 페이지에 대한 DNS 레코드를 미리 다운로드하고 브라우저 캐시에 저장함으로써 페이지 이동 시간을 줄이는 데 도움을 줍니다.

2.2 Link Prefetching

사용자가 아직 클릭하지 않은 하이퍼링크를 브라우저가 미리 다운로드하는 것을 말합니다. 사용자가 링크를 클릭하기 전에 브라우저는 링크에 포함된 콘텐츠를 미리 다운로드하고, 사용자가 실제로 링크를 클릭했을 때 페이지 로드 시간을 단축시켜 더 나은 사용자 경험을 제공할 수 있습니다.

링크 프리페치는 사용자가 방문할 가능성이 높은 페이지나 다음에 방문할 페이지와 같은 것들을 미리 다운로드하는 데 사용됩니다. 이러한 기술을 사용하면 브라우저가 적극적으로 콘텐츠를 가져와서 페이지 로드 시간을 단축시키고, 웹 페이지의 전반적인 성능과 사용자 경험을 향상시킬 수 있습니다.

2.3 Prerendering

사전 렌더링은 사용자가 요청하기 전에 웹 페이지의 일부 또는 전체를 브라우저가 미리 다운로드하는 것을 말합니다. 이렇게 함으로써 브라우저는 웹 페이지를 더 빠르게 렌더링할 수 있습니다. 사용자가 페이지를 요청하면, 이미 브라우저에 저장되어 있기 때문에 페이지 로드 시간이 줄어들고 사용자 경험이 향상됩니다.

사전 렌더링은 사용자가 방문할 가능성이 높은 페이지, 다음에 방문할 페이지, 또는 콘텐츠를 가져오는 데 필요한 리소스와 같은 것들을 미리 다운로드합니다.

3 Preconnect^{미리 연결}

브라우저가 사용자가 방문할 가능성이 있는 도메인과 연결을 미리 설정하여 리소스 로딩 시간을 단축하는 기술입니다. 일반적으로 웹 페이지에 접속하면, 브라우저는 각 리소스를 요청할 때마다 DNS 조회, TCP 연결, TLS 핸드셰이크 등의 과정을 거쳐야 합니다.

이 때, Preconnect를 사용하면 브라우저는 미리 연결을 설정하여 이러한 과정을 단축시킵니다. 예를 들어, 웹 페이지에서 CDN(Content Delivery Network)을 사용하고 있다면, Preconnect를 통해 CDN 도메인과 연결을 미리 설정하면 해당 CDN에서 리소스를 로딩할 때 DNS 조회, TCP 연결 등의 과정이 생략되어 빠른 로딩이 가능해집니다.

Preconnect는 또한 사용자가 이동할 가능성이 있는 다른 페이지에 대한 연결을 미리 설정하여 페이지 이동 시간을 단축하는 데도 도움을 줍니다. 이를 통해 사용자 경험을 향상시킬 수 있습니다.

Resource Hint는 워드프레스를 포함한 웹 사이트 브라우징 기술에 많이 적용되어 있습니다. 구글 페이지 스피드 및 지티메트릭스 점수에도 좋으며, 두 가지 점수가 좋다는 것은 당연히 사용자 경험에서도 좋은 결과를 얻을 수 있습니다.

[WP] 3가지 리소스 힌트로 워드프레스 성능 향상