방문자가 링크를 즉시 로드할 수 있도록 하려면 어떻게 해야 할까요? 바로 링크 로딩이라는 기술이 필요합니다. 이 기술은 링크를 자동으로 미리 로드하여 방문자가 링크를 클릭하는 즉시 콘텐츠를 볼 수 있도록 해줍니다. 이 글에서는 워드프레스 블로그에 미리 로드되는 링크를 추가하는 방법을 안내합니다.
이 게시글의 목적은 워드프레스에서 링크를 미리 로드하는 방법에 대한 자세한 설명을 제공하는 것입니다.
워드프레스에서 링크를 미리 로드해야 하는 이유는 무엇일까요?
브라우저에서 링크를 백그라운드에서 미리 로드하도록 설정하면 로딩 속도를 향상시킬 수 있습니다. 방문자는 링크를 클릭했을 때 이미 로드된 페이지를 보게 됩니다. 방문자가 웹사이트에서 필요한 정보를 빠르게 찾을 수 있다면 웹사이트에 머무를 가능성이 높아집니다. 따라서 이러한 설정을 통해 SEO 측면에서 상당한 이점을 얻을 수 있습니다.
내부 페이지가 미리 로드되면 방문자가 웹사이트에 더 오래 머물면서 더 많은 페이지를 볼 가능성이 높아집니다. 웹사이트 속도가 빨라지기 때문입니다. 따라서 WordPress SEO를 웹사이트 속도를 향상시키면
워드프레스 웹사이트 속도를 향상시키는 방법은 여러 가지가 있지만, 링크 사전 로딩은 가장 쉽고 효과적인 방법 중 하나이며 웹사이트 속도 개선에 큰 도움이 될 수 있습니다.
하지만 사전 로딩을 올바르게 설정하려면 몇 가지 일반적인 오류를. 예를 들어, 지나치게 공격적인 설정으로 모든 내부 링크를 사전 로딩하면 오히려 역효과를 초래하여 서버가 다운될 수도 있습니다.
WordPress에서 Flying Pages 플러그인을 사용하여 링크를 미리 로드하는 방법
먼저 Flying Pages 플러그인을 다운로드하여 WordPress 관리자 화면에 설치하세요.
이제 WordPress 관리자 화면에서 설정 > 플라잉 페이지(Flying Pages) 플라잉 페이지 옵션을 선택하세요. 설정 탭에서 플러그인 구성을 확인하고 필요한 변경 사항이 있으면 수정해 주세요.
가장 먼저 '사전 로딩 시작 지연 시간' 옵션이 표시됩니다. 기본값은 0이지만 변경할 수 있습니다. 하지만 기본값을 유지하는 것이 좋습니다. 값을 높이면 프로세스 시작이 지연될 수 있습니다.
따라서 초당 최대 요청 수를 선택해야 합니다. 이 수치가 낮을수록 서버에 미치는 영향이 줄어듭니다. 방문자 수가 많은 대규모 웹사이트가 아니라면 기본값도 괜찮습니다.
나머지 설정은 그대로 두거나 필요에 따라 변경할 수 있습니다. 변경 사항을 저장하려면 마지막에 '변경 내용 저장' 버튼을 누르는 것을 잊지 마세요.
주요 요청 사전 로드 방법: 글꼴, JavaScript 및 CSS
리소스 사전 로딩은 웹 페이지 성능을 향상시키는 데 사용할 수 있는 기술입니다. 주요 요청을 미리 로드함으로써 사용자가 필요로 할 때 필요한 리소스를 사용할 수 있도록 보장할 수 있습니다. CSS, JavaScript, 글꼴은 모두 사전 로딩할 수 있는 리소스의 예입니다. CSS를 사전 로딩하려면 `@font-face` 규칙을 사용할 수 있습니다. JavaScript의 경우 `PreloadJS` 라이브러리를 사용할 수 있습니다. 글꼴의 경우 `Font Awesome` 또는 `Google Fonts`를 사용할 수 있습니다.
로드하는 방법미리CSS를
다음은 CSS 파일에 대한 주요 요청을 미리 로드하는 구문입니다
<link rel=”preload” href=”style.css” as=”style”>
JS 프리로드
다음은 JavaScript 파일의 주요 요청을 미리 로드하는 구문입니다
<link rel=”preload” href=”main.js” as=”script”>
글꼴을 미리 로드합니다
폰트 파일의 키 요청을 미리 로드하는 구문은 다음과 같습니다
<link rel=”preload” href=”font.woff2″ as=”font” type=”font/woff2″ crossorigin>
구글 폰트
다음은 Google 글꼴의 주요 요청을 미리 로드하는 구문입니다
<link rel=”preload” href=”https://fonts.googleapis.com/css2?family=Roboto&display=swap” as=”style” crossorigin>
폰트 어썸
다음은 Font Awesome의 키 요청을 미리 로드하는 구문입니다
<link rel=”preload” href=”/wp-content/theme/fonts/fontawesome-Webfont.woff2” as=”font” crossorigin>
의 사전 로드 키 요청 경고에서 가장 흔히 볼 수 있는 파일 유형입니다 Google PageSpeed Insights
위의 방법들은 Google PageSpeed Insights의 사전 로드 키 요청 경고를 해결하는 데 도움이 될 수 있습니다. 이러한 방법들은 모든 웹사이트에 적용할 수 있습니다.
요약: 글꼴 사전 로딩
<link rel=’preload’ href=’/image.png’ as=’image’>
<link rel=’preload’ href=’/style.css’ as=’style’>
<link rel=’preload’ href=’/script.js’ as=’script’>
<link rel=’preload’ href=’/font.woff2′ as=’font’ crossorigin>
WordPress 플러그인을 사용하여 키 요청을 미리 로드합니다
의 키 요청 사전 로드 플러그인을 사용하면 WordPress에서 키 요청을 미리 로드할 수 있습니다. Pre* Party Resource Hints, Autoptimize, WP Rocket, Asset CleanUp 이러한 플러그인은 됩니다 .
다음은 키 요청 사전 로드 기능을 제공하는 가장 인기 있는 플러그인입니다.
파티 전 준비 자료 팁
Pre* Party Resource Hints는 사용자가 원하는 주요 리소스를 시각적으로 미리 로드할 수 있도록 다양한 제어 기능과 추가 기능을 제공하는 최고의 플러그인 중 하나입니다.
이 플러그인을 워드프레스 사이트에 설치 및 활성화한 다음, 워드프레스 대시보드에서 '파티 전' 메뉴로 이동하세요. 그러면 다음 화면이 나타납니다.
플러그인 설정의 '힌트 삽입' 탭에서 '새 리소스 힌트 추가' 상자를 확인할 수 있습니다. 에셋을 미리 로드하려면 PageSpeed Insights 보고서에서 '키 요청 사전 로드' 경고를 찾으세요.
WP 로켓
키 요청 사전 로드는 WordPress 사이트 성능을 향상시키는 좋은 방법입니다. WP Rocket은 이러한 기능을 제공하는 인기 플러그인입니다. 사용하기 쉽고 사이트 성능 향상에 도움이 되는 다양한 기능을 갖추고 있습니다.
WordPress 대시보드에서 설정 > WP Rocket > 사전 로드로 이동하여 WP Rocket 플러그인을 사용하여 WordPress에서 키 요청을 미리 로드하세요. 그런 다음 페이지 하단으로 스크롤하면 글꼴 사전 로드 섹션이 있습니다.
자동 최적화
워드프레스 사이트 성능을 개선하고 싶다면 가장 먼저 해야 할 일 중 하나는 Autoptimize 플러그인을 설치하는 것입니다. Autoptimize는 CSS 및 JavaScript 파일을 최적화하여 웹사이트 속도를 향상시켜 줍니다. 또한 HTML을 최소화하고 페이지를 캐싱하여 재방문자가 더 빠르게 페이지를 로드할 수 있도록 합니다. 특히 워드프레스 사이트에서 인기 있는 기능 중 하나는 '키 요청 사전 로드' 옵션입니다.
WordPress 대시보드에서 설정 > Autoptimize > Extra Autoptimize를 사용하여 키 요청 사전 로드를 설정하세요. PageSpeed Insights에서 키 요청 사전 로드 경고에 표시된 링크들을 입력란에 입력하기만 하면 됩니다. 여러 링크를 입력할 때는 쉼표로 구분하세요.
퍼프매터스
이 프리미엄 플러그인은 사전 로드, 사전 연결 및 사전 가져오기 옵션을 제공합니다. 이러한 옵션은 Perfmatters 설정 → 추가 기능 → 사전 로드에서 확인할 수 있습니다.
웹사이트의 링크 및 요청 사전 로딩 기능이 성공적으로 활성화되었습니다.
에서 이와 같은 기사를 더 찾아보실 수 있습니다 Seahawk Media.
