HivePress로 구축된 디렉토리 또는 마켓플레이스 웹 사이트의 속도를 높이는 방법

오늘날 웹사이트 로딩 속도와 전반적인 성능은 우수한 사용자 경험과 검색 엔진 순위에 매우 중요합니다. 최근 Google은 웹사이트가 순위 신호 부스트 자격이 있는지 여부를 결정하기 위해 시각적 안정성 점수 및 페이지 로드 시간과 같은 핵심 웹 바이탈을 측정하기 시작할 것이라고 발표했습니다. 또한 로드 시간이 더 긴 페이지는 이탈률이 더 높고 페이지에 머문 평균 시간이 더 낮은 경향이 있습니다.

이 튜토리얼에서는 캐싱을 설정하고 스타일과 스크립트를 최적화하고 미디어 콘텐츠를 최적화하여 웹사이트 성능을 급증시키는 방법을 설명합니다. 웹사이트를 빠르게 만들기 위한 수많은 도구와 기능을 갖춘 올인원 웹사이트 가속 솔루션인 LiteSpeed ​​Cache 플러그인을 사용할 것입니다.

테스트 목적으로 HivePress 및 기본 ListingHive 테마와 함께 몇 가지 확장으로 구축된 WordPress 디렉토리 웹 사이트를 사용합니다. 그러나 웹 사이트가 HivePress 플러그인으로 구축되지 않은 경우 다른 WordPress 기반 웹 사이트에 대해 동일한 단계를 따를 수 있습니다.

이제 LiteSpeed ​​Cache 설치를 시작하겠습니다.

LiteSpeed ​​캐시 설치

먼저 LiteSpeed ​​Cache 플러그인을 설치해야 합니다. 플러그인 > 새로 추가 섹션으로 이동하여 WordPress 대시보드에서 직접 쉽게 할 수 있습니다. 검색창을 통해 찾아 설치를 진행합니다. 설치가 완료되면 "활성화" 버튼을 클릭하여 플러그인을 활성화하십시오.

설치 및 활성화되면 웹사이트 최적화를 시작할 수 있습니다. 먼저 기본 캐시 설정을 살펴보겠습니다.

캐시 최적화

기본 캐시 설정을 조정하려면 LiteSpeed ​​캐시 > 캐시 페이지로 이동하십시오. 이 페이지에는 다양한 섹션이 있지만 가장 중요한 설정만 살펴보겠습니다.

캐시 설정

여기에서 로그인한 사용자 및 REST API 요청에 대해 캐시를 비활성화하는 것이 좋습니다. 이것은 HivePress 플러그인이 제대로 작동하는 데 필요합니다. 옵션을 활성화 또는 비활성화한 후 변경 사항을 저장하는 것을 잊지 마십시오.

개체 캐시

다음으로 Object Cache 를 활성화하겠습니다. 개체 섹션으로 이동하여 사이트에서 개체 캐시를 사용할 수 있는지 확인합니다. 연결 테스트는 "통과"로 표시되어야 합니다. 그렇다면 개체 캐시를 활성화할 수 있으며, 이렇게 하면 중복 데이터베이스 쿼리를 캐싱하여 웹 사이트 성능을 크게 향상시킬 수 있습니다.

웹 사이트가 OpenLiteSpeed ​​서버를 기반으로 하거나 호스팅 공급자가 개체 캐싱을 지원하는 경우 연결 테스트를 통과하는 데 문제가 없습니다.

브라우저 캐시

마지막으로 브라우저 캐시 섹션으로 이동하여 활성화되어 있는지 확인합니다. 이렇게 하면 사용자 브라우저의 스타일, 스크립트 및 이미지와 같은 모든 정적 콘텐츠가 캐시됩니다.

페이지 최적화

다음 단계는 LiteSpeed ​​Cache > 페이지 최적화 섹션으로 이동하여 스타일, 스크립트 및 글꼴을 최적화하는 것입니다.

CSS 최적화

CSS 설정 섹션부터 시작하겠습니다. 여기에서 CSS 축소 및 CSS 결합 설정을 켜는 것이 좋습니다.

• CSS 축소 – 이 옵션을 활성화하면 모든 추가 공백 문자, 줄 바꿈 문자 및 기타 불필요하거나 중복되는 데이터가 웹 사이트 스타일에 영향을 주지 않고 CSS 파일에서 자동으로 제거됩니다.
• CSS 결합 – 이 기능을 활성화하면 모든 개별 CSS 파일이 단일 CSS 파일로 병합됩니다. 이러한 방식으로 브라우저는 각 CSS 파일을 개별적으로 요청하는 대신 단일 파일 요청을 전송하여 HTTP 요청 수를 줄입니다.

글꼴 최적화

사이트에서 Google 글꼴을 사용하는 경우 글꼴 로드를 최적화하기 위한 몇 가지 옵션이 있습니다. 동일한 CSS 설정 섹션에서 아래로 스크롤하여 글꼴 표시 최적화 옵션을 교체 로 설정할 수 있으므로 사용자 정의 글꼴이 완전히 다운로드될 때까지 대체 글꼴이 텍스트를 표시하는 데 사용됩니다.

Swap 옵션을 설정했으면 페이지가 렌더링되는 동안 백그라운드에서 Google Fonts를 로드하기 위해 동일한 페이지 내의 Optimization 섹션으로 이동하여 Load Google Fonts Asynchronously 옵션을 켭니다.

JS 최적화

이제 JavaScript 파일을 최적화하기 위해 JS 설정 섹션으로 이동합니다. 여기에서 CSS 설정과 동일한 단계를 따르는 것이 좋습니다. JS Minify 및 JS Combine 옵션을 활성화하면 JS 파일도 축소되어 단일 파일로 병합됩니다.

실제로 차이를 만들 수 있는 Load JS Deferred 옵션도 있습니다. 이 설정을 활성화하면 브라우저가 페이지 레이아웃과 스타일을 렌더링하는 동안 스크립트가 백그라운드에서 로드됩니다. 스크립트는 HTML보다 "무거운" 경우가 많으므로 초기 페이지 렌더링에 필요하지 않은 스크립트의 로드 및 실행은 지연되어 나중에 로드될 수 있습니다. 방문자가 거의 즉시 웹 사이트를 사용할 수 있습니다.

일부 스크립트는 페이지가 렌더링되기 전에 로드가 필요할 수 있으므로 이 옵션을 선택한 후 웹사이트 프론트엔드가 손상되지 않았는지 확인하십시오.

미디어 최적화

마지막으로 미디어 콘텐츠를 최적화해야 합니다. 이미지는 종종 웹 페이지 콘텐츠 크기의 약 절반을 차지하기 때문에 모든 이미지를 WebP 형식(다른 형식보다 평균 30% 작음)으로 변환하면 페이지 로드 속도를 크게 향상시킬 수 있습니다.

LiteSpeed ​​캐시 > 이미지 최적화 > 설정 섹션에서 WebP 버전 생성 및 이미지 WebP 교체 설정을 활성화하여 웹사이트 이미지를 WebP 형식으로 변환할 수 있습니다.

이러한 옵션을 선택한 후 이미지 최적화 요약 섹션으로 이동하여 도메인 키를 얻고 이미지 최적화 점수가 100%에 도달할 때까지 "최적화 요청 보내기" 버튼을 클릭하여 이미지를 최적화합니다.

또한 웹사이트에 포함된 콘텐츠(예: YouTube 동영상, Instagram 게시물 또는 트윗)가 있는 경우 사용자가 아래로 스크롤할 때만 포함된 콘텐츠를 로드하는 것이 좋으며 초기 페이지 렌더링 중에는 로드하지 않는 것이 좋습니다. 첫 페이지를 훨씬 빠르게 렌더링하고 브라우저 메모리 사용량을 줄입니다.

LiteSpeed ​​Cache > Page Optimization > Media Settings 섹션으로 이동하여 Lazy Load Iframes 옵션을 활성화합니다.

마무리

아래는 이 튜토리얼의 단계에 따라 웹사이트 성능을 최적화한 후 모바일 및 데스크톱 장치에서 Google PageSpeed ​​결과의 스크린샷입니다.

그게 다야! HivePress (또는 기타 WordPress 기반 솔루션) 를 사용하여 디렉토리 또는 마켓플레이스 웹사이트를 구축한 경우 동일한 단계에 따라 캐싱을 설정하고 스타일, 스크립트 및 글꼴을 최적화하고 이미지 또는 포함과 같은 미디어 콘텐츠를 최적화할 수 있습니다. 결과적으로 Google PageSpeed에서 높은 점수를 얻고 (따라서 SEO 순위가 향상됨) 웹사이트의 전반적인 사용자 경험을 개선할 수 있습니다.

또한 다음 기사를 자유롭게 확인하십시오.

• 최고의 WordPress 디렉토리 플러그인
• 인기있는 WordPress 디렉토리 테마
• WordPress 목록 웹 사이트를 만들 때의 실수