사전 로드, 사전 가져오기, 사전 연결과 같은 최신 브라우저 기능을 활용하여 WordPress 웹 사이트를 더 빠르게 만드십시오.
사이트 소유자로서 웹 페이지를 더 빠르게 로드하기 위해 가능한 모든 것을 만들고 싶지 않은 사람이 어디 있겠습니까?
전 세계적으로 사이트 로드 속도를 일관되게 빠르게 유지하는 것은 어려운 일입니다. 다음 브라우저 힌트 활성화를 포함하여 사이트 리소스를 빠르게 로드하기 위해 수행할 수 있는 몇 가지 작업이 있습니다. 사전 탐색 기술이라고도 합니다.
참고: 브라우저 힌트 기술은 웹 사이트에 처음 액세스할 때 별로 도움이 되지 않지만 이후 요청은 더 빠릅니다.
목차
예압
preload 태그를 사용하여 브라우저에 일부 정적 리소스를 조기에 가져오도록 지시할 수 있습니다. 이미지, 글꼴, JavaScript, CSS, 스크립트, 비디오 등이 될 수 있습니다. 리소스 로딩의 우선 순위를 정하는 데 도움이 됩니다. 따라서 성능이 향상됩니다.
사용자가 이후에 여러 페이지를 방문할 것으로 예상되는 경우 사전 로드를 구현하는 것이 좋습니다. 사용자가 상품 페이지를 방문하여 정보를 확인하고, 다른 상품과 비교하고, 장바구니에 담기, 결제 등을 하는 전자 상거래 상점과 같습니다.
다음 플러그인을 사용하여 사전 로드 기능을 설정할 수 있습니다.
더 나은 리소스 힌트 – CSS 및 JS 파일을 구성하는 무료 플러그인.
WP Rocket – 캐싱 및 사이트맵 사전 로드를 포함하여 많은 필수 기술로 웹사이트 성능을 강화하는 프리미엄 플러그인입니다.
사전 로드가 활성화되었는지 어떻게 알 수 있습니까?
가장 빠른 방법은 페이지 소스를 보는 것입니다. 아래와 같이 표시되어야 합니다.
<link rel="preload" as="style" href="https://wilku.top/implementing-preload-prefetch-preconnect-in-wordpress/IMPORTANT.css"> <link rel="preload" as="script" href="CRITICAL.js">
모든 브라우저가 작성하는 동안 미리 로드를 지원하는 것은 아닙니다. 따라서 확인하십시오. 호환성 매트릭스 구현하기 전에.
사전 연결
다른 도메인에서 리소스를 로드합니까? 아마도 CDN?
그렇지 않고 모든 리소스가 단일 도메인에서 로드되는 경우 도움이 되지 않을 수 있습니다.
사전 연결은 DNS 조회, 리디렉션, TCP 핸드셰이크, TLS 협상 등을 위한 시간을 절약하기 위해 백그라운드에서 다른 도메인에 대한 연결을 설정하도록 브라우저에 힌트를 줍니다. 아이디어는 대기 시간을 줄여 다른 도메인에서 빠른 리소스 로드를 제공하는 것입니다.
다시 말하지만, 위에서 언급한 더 나은 리소스 힌트 플러그인 또는 다음과 같은 프리미엄 플러그인을 사용할 수 있습니다. 수행자.
필요한 리소스를 구성하고 나면 아래와 같이 페이지 소스에서 볼 수 있습니다.
<link rel="preconnect" href="https://ANOTHERSITE.com">
참고: CORS가 필요한 도메인에서 리소스를 로드하는 경우 이를 교차 출처로 지정해야 하며 출력은 다음과 같아야 합니다.
<link rel="preconnect" href="https://ANOTHERSITE.com" crossorigin>
사전 연결은 최신 버전의 Chrome, Edge, Firefox, Safari와 호환됩니다.
프리페치
브라우저가 사용자가 탐색할 때 필요하다고 생각되는 다음 페이지를 가져오도록 합니다. 프리페치는 필요한 리소스를 다운로드하여 로컬 캐시에 저장하고 필요할 때 신속하게 제공합니다. 프리페치에는 두 가지 유형이 있습니다.
DNS 프리페치 – 아래 설명
링크 프리페치 – 을(를) 사용하여 구성되었습니다. HTML 또는 정적 리소스를 미리 가져오는 데 사용됩니다. 를 속성으로 사용하여 리소스를 미리 가져올 수 있습니다.
속성은 오디오, 비디오, 스크립트, 트랙, 스타일, 글꼴, 개체, 문서 등과 같은 다양한 리소스를 지원합니다. 링크 프리페칭은 다음을 사용하여 구성할 수 있습니다. 사전 파티 리소스 힌트 플러그인.
DNS 프리페치
많은 도메인에서 리소스를 로드하고 백그라운드에서 이를 해결하고 싶으십니까?
이 빠른 설정은 리소스가 요청될 때 더 빨리 로드되도록 모든 잠재적 도메인을 조기에 해결하는 데 도움이 될 수 있습니다. 이는 전체 대기 시간을 줄이는 데 도움이 됩니다.
3개의 도메인에서 리소스를 로드하고 각 도메인이 DNS 조회를 수행하는 데 약 100ms가 걸린다고 가정해 보겠습니다. 그러면 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://YOUROTHERDOMAIN.com" />
<link rel="dns-prefetch" href="https://ANDANOTHERONE.com" />
<link rel="dns-prefetch" href="https://AND.SOMEMORE.com" />
}
add_action('wp_head', 'dns_prefetch', 0);
당신은에서 더 읽을 수 있습니다 모질라 웹 문서.
사전 렌더링
사이트 사용자가 잠재적인 페이지를 탐색할 것으로 예상하십니까?
Prerender는 백그라운드에서 이러한 자산을 로드하는 데 도움이 될 수 있으며 사용자가 해당 자산을 클릭하면 매우 빠르게 얻을 수 있습니다. 사전 파티 리소스 힌트 플러그인을 사용하여 이를 달성할 수 있습니다.
사전 렌더링은 경량 페이지 또는 자산에 적합하지만 전체 사이트 또는 대용량 리소스는 CPU 사용률 및 대역폭을 증가시키고 사이트 속도를 저하시킬 수 있으므로 주의하십시오. 따라서 더 작은 리소스로 시도하고 부작용이 없는지 테스트하십시오.
보시다시피 WordPress에서 브라우저 힌트를 구현하는 데 관련된 네 가지 주요 플러그인이 있습니다. 원하는 것을 선택하고 요구 사항에 맞춥니다.
사전 파티 리소스 힌트 플러그인 – 무료 플러그인은 DNS 프리페치, 링크 프리페치, 사전 렌더링, 사전 연결 및 사전 로드를 제공합니다.
더 나은 리소스 힌트 – 위의 대안.
무료 플러그인은 유지 관리되고 지원되는 한 좋습니다. 불행히도 이것은 많은 플러그인에서 발생하지 않으므로 때때로 유료 버전을 사용하는 것이 더 좋습니다. 상용 버전 플러그인은 전문적으로 지원되며 WordPress 표준 및 보안 수정 사항을 통해 최신 상태로 유지됩니다. 사이트 성능을 최적화하는 데 몇 달러를 지출할 의향이 있다면 다음 항목을 확인할 수 있습니다.
WP Rocket – 평판이 좋고 800,000개 이상의 사이트에서 신뢰합니다. 한 웹사이트에 49달러였습니다.
수행자 – 한 사이트당 $24.95의 비용이 들고 쉽게 따라할 수 있습니다. 작성하면서 다음과 같은 기능을 제공합니다.
그것은 많은 최적화입니다.
결론
워드프레스 코어는 가볍지만 어떤 테마와 플러그인을 사용하느냐에 따라 부피가 커집니다. 또한 더 나은 검색 순위 및 전환을 위해 사이트 성능을 최적화하는 것이 중요합니다. 위의 기술은 따라하기 쉽지만 여기서 멈추지 않아야 합니다.
또한 CDN을 사용하여 콘텐츠를 캐시하고 전 세계 사용자에게 더 빠르게 제공하는 것도 고려해야 합니다. 여러 가지가 있지만 CDN과 보안을 모두 제공하는 SUCURI를 사용하는 것이 좋습니다.