WordPress에서 키 요청을 미리 로드하는 방법

게시 됨: 2023-06-08

웹 글꼴, CSS 및 JavaScript를 사용하면 웹 사이트를 더욱 독특하고 상호 작용할 수 있습니다. 그러나 이러한 파일 형식이 로드될 때까지 기다리는 것은 사이트 방문자에게 실망스러운 일이 될 수 있습니다.

여기에서 WordPress의 키 요청을 미리 로드하는 것이 유용할 수 있습니다. 요청 체인의 초기에 이러한 파일 형식을 다운로드하도록 브라우저에 지시하면 브라우저가 콘텐츠를 렌더링할 준비가 되었을 때 바로 사용할 수 있습니다. 결과적으로 이것은 인지된 페이지 로드 시간을 단축하고 더 나은 전반적인 웹 경험을 제공할 수 있습니다.

오늘 가이드에서는 웹사이트의 잠재적인 성능 이점과 함께 키 요청 미리 로드가 의미하는 바에 대해 논의합니다. 그런 다음 Google Fonts, Font Awesome, CSS 및 JavaScript를 사용하여 WordPress 사이트에서 이 작업을 수행하는 방법을 설명합니다.

WordPress에서 "키 요청 미리 로드"는 무엇을 의미합니까?

누군가 귀하의 웹사이트를 방문하면 브라우저는 귀하의 사이트 서버에 여러 HTTP 요청을 보내 콘텐츠를 구성하는 파일을 요청합니다. 서버는 이러한 요청에 응답하고 브라우저에 정보를 보내기 시작하는 데 일정 시간이 걸리며 이를 TTFB(Time to First Byte)라고 합니다.

다음으로 브라우저는 사이트 파일에서 콘텐츠(PHP, JavaScript 및 CSS)를 다운로드하고 프런트 엔드에 볼 수 있는 페이지(HTML)를 표시하도록 렌더링합니다. 이 프로세스가 완료되면 방문자는 완전히 로드된 웹 페이지를 볼 수 있습니다.

브라우저는 '요청 체인'을 사용하여 순서대로 콘텐츠를 요청하고 렌더링합니다. 즉, 큰 요청 안에 작은 요청의 여러 단계가 있으며 최종 결과는 방문자가 사이트의 콘텐츠를 볼 수 있다는 것입니다.

본질적으로 '사전 로드'는 로드 프로세스가 끝날 때까지 기다리지 않고 먼저 필수 파일을 다운로드하도록 사용자의 브라우저에 지시하는 것을 의미합니다. 일반적으로 글꼴(특히 웹 글꼴), CSS, JavaScript, 때로는 이미지입니다.

브라우저는 일반적으로 로드 프로세스 후반까지 이러한 파일을 요청하지 않기 때문에 키 요청은 고유합니다. 따라서 브라우저가 해당 지점에 도달하고 파일을 요청해야 함을 발견하면 지연이 발생합니다. 이러한 파일을 먼저 로드하도록 브라우저에 지시하면 렌더링해야 할 때 편리하게 사용할 수 있습니다.

키 요청을 미리 로드하면 어떤 이점이 있습니까?

주요 요청을 사전 로드하는 주요 이점은 사이트의 체감 성능을 개선하는 것입니다. 즉, 사용자의 브라우저가 귀하의 콘텐츠를 더 빨리 렌더링할 수 있고 방문자는 귀하의 사이트가 더 빠른 것처럼 느낄 것입니다. 그러나 귀하의 사이트는 실제로 그렇게 나타나 도록 필수 콘텐츠를 미리 로드하고 있을 뿐입니다.

또한 사전 로드 요청은 Core Web Vitals 점수에 필수적입니다. 이러한 Google 측정항목은 사이트의 로딩 성능, 상호작용 및 시각적 안정성을 측정하여 웹사이트의 전반적인 사용자 친화성을 나타내는 점수를 제공합니다.

세 가지 핵심 성능 보고서는 다음과 같습니다.

  • LCP(Largest Contentful Paint): 페이지에서 가장 큰 요소를 로드하는 데 걸리는 시간입니다.
  • FID(First Input Delay): 브라우저가 콘텐츠와의 사용자 상호 작용에 응답하는 데 걸리는 시간입니다.
  • CLS(Cumulative Layout Shift) : 페이지가 로드되는 동안 요소가 이동하는 정도입니다.

특히 주요 요청을 미리 로드하면 LCP 점수에 상당한 영향을 미칠 수 있습니다. 이미지, 글꼴 및 기타 대용량 파일을 미리 로드하면 렌더링하는 데 걸리는 시간을 줄일 수 있습니다.

또한 사전 로드는 FCP(First Contentful Paint) 점수에 영향을 미칠 수 있습니다. 이 지표는 페이지의 첫 번째 HTML 요소가 표시되는 데 걸리는 시간을 측정합니다. 해당 요소를 미리 로드할 수 있으면 브라우저에서 콘텐츠의 초기 부분을 더 빨리 표시할 수 있습니다.

또한 Google과 같은 검색 엔진은 빠르게 로드되는 대화형 콘텐츠를 선호합니다. 따라서 더 나은 사용자 경험을 제공하는 것 외에도 이러한 성능 메트릭을 개선하면 웹사이트의 검색 엔진 최적화(SEO)를 높일 수 있습니다.

본질적으로 성능 향상은 사이트 페이지의 순위를 높이고 더 많은 사용자에게 콘텐츠를 제공하는 데 도움이 될 수 있습니다. 또한 주요 요청을 미리 로드하는 것도 상대적으로 쉽습니다. 이 게시물의 뒷부분에서 정확히 수행하는 방법을 보여드리겠습니다!

키 요청을 미리 로드하면 단점이 있습니까?

요청을 미리 로드하는 것은 성능 관점에서 좋은 아이디어처럼 들릴 수 있습니다. 즉, 너무 많은 요소를 미리 로드하려고 하면 불리하게 작용할 수 있습니다.

브라우저는 한 번에 너무 많은 요청만 처리할 수 있습니다. 따라서 여러 요소를 미리 로드하도록 지시하면 사이트의 페이지 로드 시간에 대해 작동하는 '병목 현상'이 발생할 수 있습니다.

따라서 가장 큰 영향을 미치기 위해 미리 로드해야 하는 요소를 신중하게 선택하는 것이 좋습니다. 대부분의 경우 웹 글꼴, CSS 및 JavaScript가 가장 무거운 파일인 경향이 있기 때문입니다.

사이트에서 주요 요청을 미리 로드하고 있는지 확인하는 방법

몇 가지 다른 도구를 사용하여 사이트에서 요청을 미리 로드하고 있는지 여부를 식별하고 이 최적화 기술의 이점을 얻을 수 있는 요소를 제안할 수 있습니다. 예를 들어 PageSpeed ​​Insights는 웹사이트의 성능 문제를 식별하기 위한 가장 인기 있는 옵션 중 하나입니다.

이 무료 도구를 사용하려면 사이트의 URL을 입력하고 분석을 클릭하십시오. 이렇게 하면 자세한 성능 보고서가 생성됩니다.

Google PageSpeed의 핵심 웹 바이탈 보고서

성능 기회, 진단 및 통과된 감사를 보려면 아래로 스크롤하십시오. 이 섹션 중 하나에서 사전 로드 키 요청 제안을 찾을 수 있어야 합니다.

Google PageSpeed의 개선 제안

사이트와 PageSpeed ​​Insights 사이를 오가는 것을 원하지 않는 경우 Google Lighthouse Chrome 확장 프로그램을 설치하는 것이 좋습니다. 이를 통해 브라우저 내에서 보고서를 생성하고 페이지의 성능 지표를 볼 수 있습니다.

Google Lighthouse의 성능 제안

마찬가지로 GTMetrix는 모든 사이트에 대한 자세한 성능 보고서를 생성할 수 있습니다. 여러 위치에서 페이지를 분석하고 시간 경과에 따른 성능을 추적할 수 있습니다.

GTMetrix의 구조 탭에서 키 요청을 미리 로드하면 사이트 성능에 도움이 되는지 확인할 수 있습니다.

GTMetrix의 성능 지표

WordPress에서 키 요청을 미리 로드하는 방법

사용자 지정 코드 추가와 같이 WordPress 사이트를 크게 변경하기 전에 항상 전체 백업을 수행할 가치가 있습니다. 이 안전 예방 조치는 실수를 하더라도 웹 사이트의 기능 버전을 사용할 수 있음을 의미합니다.

Jetpack VaultPress 백업이 유용한 곳입니다. 이 사용자 친화적인 플러그인은 파일, 데이터베이스 테이블 및 WooCommerce 제품 정보를 포함한 모든 데이터의 포괄적인 백업을 자동으로 생성합니다. 이러한 백업은 실시간으로 저장되며 클라우드에 안전하게 저장됩니다. 이동 중이거나 사이트에 전혀 액세스할 수 없는 경우에도 몇 번의 클릭만으로 복원할 수 있습니다.

Jetpack VaultPress 백업 홈페이지 디자인

1. 글꼴

경우에 따라 CSS 및 JavaScript 파일을 포함하여 웹 사이트의 다른 파일에 글꼴이 묻힐 수 있습니다. 불행히도 이로 인해 페이지 렌더링 프로세스가 느려질 수 있습니다.

WordPress에서 글꼴이 포함된 요청을 미리 로드하려면 이 코드를 복사하여 페이지의 <head> 섹션에 붙여넣으십시오.

 <head> <!-- ... --> <link rel="preload" href="/assets/Font-Name.woff2" as="font" type="font/woff2" crossorigin> </head>

글꼴 이름을 "Font-Name"으로 대체하는 것을 잊지 마십시오. 또한 "crossorigin"을 포함하는 것은 외부 서버에서 파일을 로드해야 함을 브라우저에 알리기 때문에 글꼴이 타사 소스에서 제공되는 경우 필수적입니다.

2. 구글 폰트

Google Fonts에는 약 1,500개의 글꼴 모음으로 구성된 오픈 소스 라이브러리가 포함되어 있습니다. 사이트에서 사용할 사용자 지정 웹 글꼴을 찾고 있다면 그곳에서 찾을 수 있을 것입니다.

Google 글꼴 라이브러리 내의 글꼴

Google 글꼴을 사용하면 사이트에 고유한 디자인을 적용할 수 있지만 콘텐츠를 렌더링할 때 브라우저에서 글꼴 파일도 다운로드해야 합니다. 글꼴에 따라 페이지 로드 시간이 늘어날 수 있습니다.

Google Fonts를 미리 로드할 때 먼저 '미리 연결'하는 것도 좋은 생각입니다. 이 단계는 리소스를 검색하기 위해 타사 사이트(예: Google Fonts)에 연결해야 함을 브라우저에 미리 알려줍니다.

또한 사전 로드 코드를 추가한 후 해당 스타일시트에 대한 링크를 포함하는 것이 좋습니다. 이렇게 하면 사용자의 브라우저가 문제의 글꼴을 미리 로드할 수 없는 경우에도 여전히 글꼴을 렌더링할 수 있습니다.

페이지의 <head> 섹션에 다음 코드를 추가하기만 하면 됩니다.

 <link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin /> <link rel=”preload” as=”style” href=”$fontURL&display=swap” /> <link rel=”stylesheet” href=”$fontURL&display=swap” media=”print” onload=”this.media='all'” /> <noscript> <link rel=”stylesheet” href=”$fontURL&display=swap” /> </noscript>

코드 내에서 Google 글꼴에 대한 링크를 "$fontURL"로 대체해야 합니다. 예를 들어 다음과 같이 표시될 수 있습니다.

https://fonts.googleapis.com/css2?family=Tangerine:ital,wght@0,400;0,700;1,400;1,700

그런 다음 편집 내용을 저장하십시오!

3. 멋진 글꼴

Font Awesome은 라이브러리 내에서 무료 및 프리미엄 옵션을 모두 제공하는 맞춤형 아이콘 및 글꼴을 위한 훌륭한 리소스입니다. 이러한 아이콘 중 일부를 사용하여 메뉴, 머리글, 바닥글 및 콘텐츠 영역 내에서 디자인을 강화할 수 있습니다.

Google Fonts와 마찬가지로 Font Awesome 아이콘을 사전 로드하는 것은 인지되는 페이지 로드 시간을 단축하는 데 좋은 방법이 될 수 있습니다. 이 코드를 페이지의 <head> 섹션에 추가하기만 하면 됩니다.

 <link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/> <link rel="preload" as="font" type="font/woff2" crossorigin href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>

웹 사이트에서 사용 중인 글꼴이나 아이콘의 파일 경로를 바꿔야 합니다. 그런 다음 변경 사항을 저장하십시오!

4. CSS

CSS(Cascading Style Sheets)는 웹 페이지의 스타일과 프리젠테이션을 결정하기 위해 HTML과 함께 작동하는 디자인 언어입니다. 사용자 지정 CSS를 사용하면 다양한 요소의 모양을 빠르게 변경할 수 있습니다.

웹사이트의 스타일이 지정된 각 HTML 페이지에는 모든 CSS가 포함된 해당 스타일시트가 있습니다. 브라우저는 웹 페이지를 렌더링할 때 이 파일을 로드해야 하므로 브라우저에 이 리소스를 미리 로드해야 한다고 알려주는 것이 좋습니다.

다행히 CSS를 미리 로드하는 쉬운 방법이 있습니다. 페이지의 <head> 섹션에 이 코드를 추가하기만 하면 됩니다.

 <head>  <link rel="preload" href="styles.css" as="style" /> </head>

스타일시트 이름을 "styles.css"로 대체해야 합니다. 또한 이 코드는 Google 크롬에서 작동하지만 모든 브라우저에서 지원되는 것은 아닙니다.

5. 자바스크립트

JavaScript는 WordPress에서 사용되는 일반적인 스크립팅 언어 중 하나입니다. 애니메이션, 움직이는 이미지 캐러셀, 자동 업데이트 피드와 같은 동적 콘텐츠를 만들 수 있습니다.

JavaScript 렌더링은 파일이 비교적 무거워 콘텐츠를 표시하는 데 더 긴 프로세스가 필요하기 때문에 일반적으로 더 복잡합니다. 그렇기 때문에 무거운 JavaScript를 미리 로드하도록 브라우저에 지시하면 페이지 로드 시간을 단축하는 데 도움이 될 수 있습니다.

CSS와 마찬가지로 이 간단한 코드 줄을 페이지의 <head> 섹션에 추가하기만 하면 됩니다.

 <head>  <link rel="preload" href="ui.js" as="script" /> </head>

이전과 마찬가지로 JavaScript 파일의 이름을 "ui.js"로 대체하고 변경 사항을 저장합니다.

보너스: Core Web Vitals 개선을 위한 무료 플러그인 설치

사전 로드 요청은 WordPress 사이트의 Core Web Vitals 점수를 개선하는 데 사용할 수 있는 한 가지 기술일 뿐입니다.

보다 포괄적인(그리고 무료!) 솔루션을 찾고 있다면 Jetpack Boost 설치를 고려하십시오. 이 도구는 WordPress.com과 동일한 회사인 Automattic에서 개발했습니다.

Jetpack VaultPress 백업 홈페이지

이 사용자 친화적인 플러그인은 전체 웹사이트를 스캔하고 데스크톱 및 모바일 장치에서 점수를 제공합니다. 또한 Jetpack Boost는 세 가지 핵심 성능 보고서에만 유용한 것이 아닙니다. 최적화 방법은 TTI(Time to Interactive) 및 TBT(Total Blocking Time)를 비롯한 다른 메트릭을 개선할 수 있습니다.

간단한 토글 시스템을 사용하여 CSS 로딩을 최적화하고 비필수 JavaScript 및 지연 로드 이미지를 연기할 수 있습니다. 플러그인의 프리미엄 버전은 웹사이트를 변경할 때마다 자동으로 중요한 CSS를 생성합니다.

또는 Jetpack Complete는 WordPress 사이트를 완전히 새로운 수준으로 끌어 올릴 수 있습니다. 이 계획에는 대역폭을 절약하고 페이지 로드 시간을 개선할 수 있는 Jetpack의 이미지 CDN(Content Delivery Network)에 대한 액세스를 포함하여 성능을 위한 여러 도구가 포함되어 있습니다. 또한 고급 WordPress 보안 및 성장 도구를 사용할 수 있습니다.

키 요청 사전 로드에 대해 자주 묻는 질문

이 시점에서 WordPress에서 키 요청을 미리 로드하는 방법을 잘 이해하고 있어야 합니다. 그래도 확실히 하기 위해 몇 가지 자주 묻는 질문을 살펴보겠습니다!

사전 로드 요청이 사용자 경험을 개선합니까?

사전 로드 요청은 사이트의 인지된 로드 시간을 줄여 사용자 경험을 향상시킬 수 있습니다. 방문자는 콘텐츠가 렌더링될 때까지 오래 기다릴 필요가 없기 때문에 불만을 느끼고 다른 웹사이트로 이동할 가능성이 적습니다.

사전 로드 요청이 Core Web Vitals를 개선합니까?

WordPress에서 키 요청을 미리 로드하면 특히 LCP(Largest Contentful Paint)와 관련하여 Core Web Vitals 점수를 향상시킬 수 있습니다. 실제로 미리 로드할 요소를 결정할 때 '가장 큰' 또는 '주요' 콘텐츠를 포함하는 것이 가장 좋습니다.

키 요청 미리 로드 vs 중요 자산 미리 로드

키 요청을 미리 로드하는 것은 중요 자산을 미리 로드하는 것과 동일하다는 점에 유의해야 합니다. 두 용어 모두 페이지의 콘텐츠를 더 빠르게 렌더링하기 위해 미리 특정 리소스를 로드하도록 브라우저에 지시하는 것을 말합니다.

사전 로드 대 사전 연결 대 프리페치

사전 로드, 사전 연결 및 사전 가져오기는 유사한 개념처럼 보일 수 있지만 실제로는 약간 다른 의미를 갖습니다. 그것들은 모두 콘텐츠를 로드하는 순서를 브라우저에 지시하는 태그이지만 고유한 기능을 제공합니다.

첫째, 사전 로드에는 사용자의 브라우저 내에서 페이지를 렌더링하는 데 필요한 콘텐츠 로드가 포함됩니다. 몇 초 내에 리소스를 준비하는 높은 우선 순위 태그입니다.

대조적으로 프리페치는 로드해야 할 수 있는 후속 요소와 관련이 있습니다. 브라우저는 리소스를 미리 찾아 캐시에 저장합니다. 우선 순위가 매우 낮은 태그이므로 긴급한 리소스에 사용하면 안 됩니다.

마지막으로 사전 연결은 특정 도메인에 연결하도록 브라우저에 지시하려는 경우에 사용됩니다. 사이트가 특정 타사 사이트(예: Google Fonts)의 리소스를 사용하는 경우 사전 연결은 로드 프로세스의 어느 시점에서 해당 도메인에 연결해야 함을 브라우저에 알립니다.

내 사이트의 성능을 개선하기 위해 무엇을 더 할 수 있습니까?

다음과 같은 다양한 작업을 통해 WordPress 사이트의 성능을 개선할 수 있습니다.

  • CDN을 사용하여 전 세계 방문자에게 콘텐츠 제공
  • 사용하지 않는 CSS 연기(또는 삭제)
  • 렌더링 차단 리소스 제거
  • CSS 및 기타 리소스 축소
  • 더 적은 HTTP 요청 만들기

전용 캐싱, 가동 시간 보장, 전 세계 데이터 센터의 방대한 네트워크와 같은 성능 최적화 기능을 제공하는 고품질 WordPress 호스트를 선택하는 것도 가치가 있습니다.

주요 요청을 미리 로드하여 WordPress 사이트의 성능을 개선합니다.

페이지 로드 시간은 웹사이트의 사용자 경험과 검색 엔진 순위에 상당한 영향을 미칠 수 있습니다. 따라서 브라우저가 사이트 콘텐츠를 표시하는 데 걸리는 시간을 단축하기 위해 최선을 다해야 합니다.

페이지 내에서 주요 요청을 미리 로드하면 방문자의 브라우저에 리소스(예: 글꼴, CSS 및 JavaScript)가 준비되어 있습니다. 그러면 콘텐츠를 로드하고 사용자가 액세스할 수 있도록 하는 동안 지연이 발생하지 않습니다.

주요 요청을 미리 로드하는 것은 사이트 성능을 개선하기 위한 한 단계에 불과합니다. Jetpack Boost를 사용하면 이미지를 지연 로드하고 불필요한 자바스크립트를 연기하도록 웹사이트를 쉽게 구성할 수 있습니다. 더 좋은 점은 플러그인을 무료로 사용할 수 있다는 것입니다. 지금 Jetpack 부스트를 확인하세요!