Smush, Hummingbird 및 The Hub를 사용하여 WordPress 사이트 성능 최적화

게시 됨: 2020-10-20

여러 WordPress 사이트를 관리하는 경우 각 개별 사이트에 로그인하여 성능 설정을 조정하는 것은 지루하고 시간이 많이 걸릴 수 있습니다. 허브의 성능 탭을 사용하면 단일 탭에서 Hummingbird 및 Smush를 사용하여 사이트 성능을 빠르게 최적화하고 관리할 수 있습니다.

허브는 하나의 중앙 위치에서 하나 이상의 WordPress 사이트를 관리할 수 있는 완전한 WordPress 관리 콘솔입니다.

허브의 대시보드는 여러 탭으로 나누어져 있어 사이트 관리자가 WordPress 사이트를 효과적으로 관리하는 데 필요한 모든 주요 기능에 빠르게 액세스할 수 있습니다.

이 튜토리얼은 Hummingbird(속도 최적화 및 캐싱 플러그인)와 Smush(수상 경력이 있는 이미지 압축 및 최적화 플러그인)의 유용한 '한눈에' 데이터, 설정, 정보를 결합한 The Hub의 성능 탭 에 중점을 두고 있습니다. 관리하는 모든 WordPress 사이트의 성능 설정을 빠르고 쉽게 보고 조정할 수 있습니다.

허브의 성능 탭
The Hub의 성능 탭을 사용하여 모든 WordPress 사이트의 성능 설정을 관리하고 조정할 수 있습니다.

이 튜토리얼에서는 허브의 성능 탭을 최대한 활용하는 방법을 보여줍니다. 우리는 다음 방법을 다룹니다.

  • 허브에서 WordPress 사이트 성능 설정 및 관리
  • 페이지 속도 테스트 실행
  • 속도 테스트 결과 분석
  • 서버의 응답 시간 모니터링
  • 사이트 이미지 관리 및 최적화
  • 사이트 자산 관리 및 최적화
  • GZip 압축 관리
  • 사이트 캐싱 관리
  • 고급 도구 구성
  • 보고서 실행

허브에서 WordPress 사이트 성능 설정 및 관리

허브에서 사이트를 관리하려면 먼저 사이트를 연결해야 합니다. 이 작업은 허브 자체에서 자동으로 수행하거나 WPMU DEV 대시보드 플러그인을 사용하여 원격으로 수행할 수 있습니다.

사이트가 연결되면 Hub의 관리 콘솔에서 직접 사이트를 관리하고 로그인할 수 있습니다.

귀하의 사이트에 Hummingbird 및/또는 Smush 플러그인을 설치하고 활성화할 때까지 The Hub의 성능 탭은 회색으로 표시됩니다(비활성화).

허브 - 플러그인 및 테마 - 성능 탭이 비활성화되어 있습니다.
Hub의 성능 탭은 사이트에서 Hummingbird 또는 Smush가 활성화될 때까지 비활성 상태로 유지됩니다.

회색 성능 탭을 클릭하면 사이트에서 Hummingbird를 활성화하도록 초대하는 스플래시 화면이 나타납니다.

허브 - 성능 탭 - Hummingbird를 활성화합니다.
성능 탭에서 Hummingbird를 활성화할 수 있습니다.

개요 > 권장 서비스 섹션에서 성능 모듈을 활성화할 수도 있습니다.

허브 - 성능 모듈
개요 탭에서 성능 모듈을 활성화합니다.

활성화되면 Hummingbird의 모듈은 성능 탭 내의 다양한 패널에 주요 정보를 자동으로 표시합니다.

응답 시간 과 같은 일부 모듈은 활성화될 때까지 비활성 상태로 유지됩니다. 성능 탭 자체 내에서 모듈과 Smush 플러그인을 활성화할 수 있습니다.

허브 - 성능 탭 - 기타 성능 도구
성능 탭 > 기타 성능 도구 섹션에서 응답 시간과 같은 모듈을 활성화합니다.

또는 The Hub의 플러그인 및 테마 탭에서 Smush와 같은 플러그인을 활성화할 수 있습니다.

허브 - 플러그인 및 테마 - Smush 활성화
스머시 활성화

Hummingbird 및 Smush를 활성화하면 성능 탭에 두 플러그인의 결합된 정보 패널이 표시됩니다.

허브 - Hummingbird 및 Smush가 활성화된 성능 대시보드.
Hummingbird 및 Smush가 활성화된 허브의 성능 대시보드.

허브의 개요 섹션에서는 성능 탭에 대한 빠른 액세스도 제공합니다. 패널을 클릭하면 해당 탭으로 이동합니다.

허브: 개요 섹션 -성능 패널
성능 패널을 클릭하면 개요 섹션에서 성능 탭으로 이동할 수 있습니다.

이제 The Hub에서 성능 탭을 활성화하는 방법을 알았으니 기본 패널을 살펴보겠습니다.

페이지 속도 테스트 실행

성능 탭을 사용하면 허브에서 바로 사이트에 대한 Google Page Speed ​​테스트를 실행할 수 있습니다. 여러 WordPress 사이트를 관리하는 경우 이 기능을 사용하면 시간이 절약됩니다.

성능 패널 에서 테스트 실행 버튼을 클릭하고 몇 초간 기다립니다. 사이트의 데스크톱 및 모바일 속도 테스트가 실행됩니다.

성능 패널에서 사이트의 데스크톱 및 모바일 속도 테스트를 실행하세요.

이 패널에서 Hummingbird 문서에 액세스하고 더 많은 옵션을 볼 수도 있습니다.

허브: 성능 탭 - 추가 옵션
더 많은 성능 옵션을 보려면 줄임표 아이콘을 클릭하세요.

완료된 Page Speed ​​테스트 결과는 속도 테스트 패널에 표시되며, 이에 대해서는 아래의 다음 섹션에서 설명합니다.

속도 테스트 결과 분석

속도 테스트 패널에는 세 개의 하위 탭이 있습니다.

  • 점수 지표 – 색상으로 구분된 점수(녹색, 노란색, 빨간색)와 속도 결과를 통해 사이트의 주요 속도 테스트 지표를 '한 눈에' 스냅샷으로 확인하세요.
  • 감사 – 자세한 테스트 결과를 보고, 사이트 성능을 향상할 수 있는 기회와 영역을 식별하고, 수정이 필요한 문제에 대한 항목별 권장 사항을 얻습니다.
  • 과거 현장 데이터 – 이 섹션은 잘 확립된 사이트를 대상으로 하며 다양한 장치 및 네트워크 조건에서 실제 사용자의 익명화된 성능 데이터를 기반으로 시간이 지남에 따라 특정 URL이 어떻게 수행되었는지에 대한 정보를 수집합니다.

이 패널에서 활성 항목을 클릭하면 자동으로 사이트의 wp-admin으로 이동하고 권장 수정 사항이나 개선 사항이 포함된 특정 섹션으로 직접 이동됩니다.

속도 테스트 패널에서 수정 사항이 포함된 성능 개선 권장 사항을 확인하세요.

속도 테스트 지표에 대해 자세히 알아보세요.

서버의 응답 시간 모니터링

응답 시간 패널은 성능 탭에서 자주 참조하고 싶은 기본 패널 중 하나입니다.

가동시간 모니터링 기능의 데이터를 표시합니다. 여기에서 서버 응답 시간을 모니터링하고 사이트가 작동 중인지, 다운되었는지 또는 느리게 실행되는지 즉시 알 수 있습니다.

무료 전자책
수익성 있는 웹 개발 비즈니스를 위한 단계별 로드맵입니다. 더 많은 클라이언트를 확보하는 것부터 미친 듯이 확장하는 것까지.

이 eBook을 다운로드함으로써 나는 WPMU DEV로부터 가끔 이메일을 받는 데 동의합니다.
우리는 귀하의 이메일을 100% 비공개로 유지하며 스팸을 보내지 않습니다.

무료 전자책
문제 없이 다음 WP 사이트를 계획, 구축 및 시작하세요. 우리의 체크리스트는 프로세스를 쉽고 반복 가능하게 만듭니다.

이 eBook을 다운로드함으로써 나는 WPMU DEV로부터 가끔 이메일을 받는 데 동의합니다.
우리는 귀하의 이메일을 100% 비공개로 유지하며 스팸을 보내지 않습니다.

더 자세한 내용을 보려면 데이터 포인트나 평균 응답 시간 선의 섹션 위로 마우스를 가져가거나 모듈 제목을 클릭하거나 세부정보 보기 를 클릭하세요.

허브: 성능 탭 - 응답 시간 패널.
서버 응답 시간을 모니터링하십시오.

응답 시간 패널에 대해 자세히 알아보세요.

사이트 이미지 관리 및 최적화

이미지 최적화 패널을 사용하면 Smush가 사이트 이미지를 어떻게 압축하고 최적화하는지 확인할 수 있습니다. 또한 모든 사이트의 이미지를 대량으로 최적화하고 , 지연 로딩을 활성화/비활성화하고, CDN을 관리하고, 플러그인의 추가 도구 설정에 액세스하는 등의 작업을 수행할 수 있습니다.

허브: 성능 탭 - 이미지 최적화 패널.
이미지 최적화 패널에서 Smush가 이미지를 어떻게 처리하는지 확인하세요.

이 패널을 보려면 사이트에 Smush를 설치하고 활성화해야 합니다.

이미지 최적화 모듈에 대해 자세히 알아보세요.

사이트 자산 관리 및 최적화

자산 최적화 패널은 Hummingbird에서 사이트에 최적화된 자산에 대한 빠른 개요를 제공합니다.

여기에는 파일 크기에서 달성된 총 감소 , 현재 최적화된 총 파일 , 최적화된 자산이 DEV CDN 에서 제공되는지 여부, 설정 섹션의 최적화된 파일 유형이 포함됩니다.

사이트의 wp-admin에서 해당 Hummingbird 화면으로 직접 이동하려면 모듈 제목 , 총 감소 섹션의 세부정보 보기 링크 또는 설정 섹션의 기어 아이콘을 클릭하세요.

허브: 성능 탭 - 자산 최적화.
최적화된 자산의 개요를 확인하세요.

자산 최적화 설정에 대해 자세히 알아보세요.

GZip 압축 관리

Gzip은 웹페이지와 스타일시트를 방문자의 웹 브라우저로 보내기 전에 압축합니다.

이 패널을 사용하면 현재 사이트에서 Gzip으로 최적화된 콘텐츠 유형과 사이트가 실행 중인 서버 유형을 빠르게 확인할 수 있습니다.

Hummingbird에서 다른 서버 유형을 구성하려면 서버 유형 섹션에서 기어 아이콘을 클릭하세요.

허브: 성능 탭 - GZIP 압축 패널
GZIP 압축 패널.

Gzip 옵션 구성에 대해 자세히 알아보세요.

사이트 캐싱 관리

캐싱은 방문자의 장치에 임시 데이터를 저장하여 페이지 로드 시간을 단축하므로 방문자가 자산을 다시 로드할 필요가 없습니다.

Hummingbird를 사용하면 사이트에서 다양한 유형의 캐시를 구성할 수 있으며 캐싱 패널을 사용하면 플러그인을 사용하여 사이트에 어떤 캐시 옵션이 구성되었는지 확인할 수 있습니다.

여기에는 설정 섹션의 각 파일 형식에 대해 설정된 브라우저 캐시 만료 시간, 페이지 캐싱, Gravatar 캐싱, RSS 캐싱 및 Hummingbird를 통해 사이트에서 활성화된 기타 캐싱 유형이 포함됩니다.

패널 제목이나 설정 섹션의 기어 아이콘을 클릭하면 사이트의 wp-admin에 있는 Hummingbird 캐시 설정 화면으로 직접 이동할 수 있습니다.

허브: 성능 탭 - 캐싱 패널.
캐싱 패널.

캐시 지우기 링크를 클릭하면 허브에서 사이트의 다양한 캐시를 지울 수도 있습니다.

그러면 다양한 옵션이 포함된 모달 창이 나타납니다. 지우고 싶은 캐시를 선택하고 버튼을 클릭하세요.

허브: 성능 탭 - 캐시 링크 지우기.
The Hub에서 사이트 캐시를 삭제하세요.

캐싱 패널에 대해 자세히 알아보세요.

고급 도구 구성

고급 도구 패널을 사용하면 사용 가능한 모든 Hummingbird 도구 목록과 현재 상태를 볼 수 있습니다.

톱니바퀴 아이콘의 제목을 클릭하면 사이트 wp-admin의 Hummingbird > 고급 도구 화면으로 자동 이동됩니다.

허브: 성능 탭 - 고급 도구 패널.
고급 도구 패널.

Hummingbird의 고급 도구 섹션 사용에 대해 자세히 알아보세요.

보고서 실행

보고서 패널을 사용하면 사이트 성능 및 응답 시간 보고서의 상태를 빠르게 볼 수 있습니다.

이 패널의 항목을 클릭하면 사이트의 wp-admin에 있는 해당 보고서 화면으로 직접 이동하며, 여기서 해당 기능에 대한 일정을 활성화하거나 구성할 수 있습니다.

허브: 성능 탭 - 보고서 패널.
받은 편지함으로 맞춤형 성과 보고서를 받아보세요.

허브에서 사이트 성능을 계속 확인하세요

WPMU DEV의 주요 목표 중 하나는 사용자에게 WordPress 사이트 관리에 더 빠르고 쉬운 액세스를 제공하기 위해 The Hub를 계속 개발하고 개선하는 것입니다.

성능 탭도 예외는 아닙니다. 중앙 위치에서 다양한 사이트의 성능을 쉽고 빠르게 관리하고 모니터링할 수 있으면 상당한 시간을 절약할 수 있을 뿐만 아니라 여러 WordPress 사이트를 관리하는 웹 개발자 또는 대행사인 경우 비즈니스를 확장하고 더 많은 고객에게 서비스를 제공하세요.

위에 설명된 성능 탭에만 해당되는 기능 외에도 허브는 다른 언어로 번역될 수 있으므로 귀하의 언어로 사이트 성능을 관리할 수 있습니다. (귀하의 언어를 현재 사용할 수 없는 경우 저희에게 알려주십시오.) 걱정하지 마세요. 곧 그렇게 될 것입니다!)

허브를 사용하면 귀하의 언어로 사이트 성능을 볼 수 있습니다.

또한 곧 The Hub를 완전히 화이트 라벨링하고 클라이언트와 함께 The Hub를 사용할 수 있으며 청구서, 자체 템플릿 및 선택한 호스트가 포함됩니다.

마지막으로, Hummingbird 및 Smush 플러그인에서 사용할 수 있는 광범위한 최적화 기능을 통해 곧 선호하는 구성을 저장하고 원하는 만큼 새로운 사이트와 기존 사이트에 대량 적용할 수도 있습니다.

성능 탭 사용에 대한 자세한 내용은 설명서를 확인하세요. 또한, The Hub와 모든 플러그인에 대해 우리가 작업하고 있는 모든 흥미로운 개발 사항을 계속 확인하려면 로드맵을 방문하세요.

마지막으로, 성능 탭 사용에 대해 질문이 있거나 WordPress 관련 도움이 필요한 경우 연중무휴 전담 지원팀에 언제든지 문의하세요. 우리는 귀하가 관리하는 모든 WordPress 사이트에서 가능한 최고의 성능을 얻을 수 있도록 돕고 싶습니다. 허브의 성능 탭을 사용하면 가능합니다.

[편집자 주: 이 게시물은 원래 2020년 10월에 게시되었으며 정확성을 위해 2023년 12월에 업데이트되었습니다.]

귀하의 사이트에서 Hummingbird 및 Smush 설정을 관리하기 위해 The Hub의 성능 탭을 사용하고 계십니까? 아래 댓글로 여러분의 생각과 제안을 공유해 주세요.