Hummingbird 플러그인 Gzip CSS 압축 - 워드프레스 최적화

워드프레스는 어떻게 설정하느냐에 따라서 속도가 빠를기도 하지만 엄청 느린 퍼포먼스를 보여주는데 기본적으로 워드프레스는 ^{무거운 CMS 플랫폼}으로 _{GZIP이나 CSS 압축}등을 통해 워드프레스 최적화를 하느것이 속도개선의 주요 포인트로서 사용하지 않는 플러그인은 설치하지 않는 것이 중요합니다. 그리고 이번에는 이러한 워드프레스 속도 최적화 플러그인 중에서 무료로 좋은 기능을 제공하는 Hummingbird “^허밍버드“라는 최적화 플러그인을 알아보겠습니다.

기본적으로 좋은 호스팅 회사의 제품을 구입 하느것이 빠르고 안정적인 속도를 낼수 있는데요 그만큼이나 좋은테마나 적절한 플러그인을 사용하는 것이 좋습니다. 기존에 WP-Optimize 플러그인을 이용한 간단한 최적화 방법을 알아보았다면 이번에는 Hummingbird 플러그인으로^{Gzip 부터 CSS 압축}까지 다양한 워드프레스의 성능을 향상시킬수 있는 방법을 알아보겠습니다.

노랗 목차 보이기

WP Hummingbird 플러그인 기능

워드프레스 허밍버드 기능 — Hummingbird 플러그인 Gzip CSS 압축 워드프레스 최적화

기존의 이미지최적화 플러그인 Smush을 이용해 이미지 크기 최적화 및 WP-Optimize 로 다양한 데이터 압축에 성공했습니다.

이미지 크기 적절하게 설정하기
오프 스크린 이미지 지연하기
CSS 축소하기
자바스크립트 줄이기
효율적으로 이미지 인코딩하기
차세대 형식을 사용해 이미지 제공하기
텍스트 압축 사용
필수 원본 미리 연결하기
여러 차례의 페이지 리디렉션 피하기
중요한 요청을 미리 로드하기
애니메이션 콘텐츠에 동영상 형식 사용하기
대규모 네트워크 페이지로드 방지하기
과도한 DOM 크기 지양하기

하지만 아직 부족한 부분에 대해서 ^{Smush 회사}에서 개발한 허밍버드를 사용해보겠습니다.

허밍버드를 검색 해 설치해줍니다.

해당 플러그인을 이용하면 다양한 최적화 기능을 쉽게 on / off 가 가능합니다.

워드프레스 Hummingbird 기능

실적 보고서 – 초고속으로 사이트를 운영하기위한 전문가 팁
자산 최적화 – 최고의 성능을 위해 파일 배치, 축소 및 결합
Caching Suite – 전체 페이지, Gravatar 및 브라우저 캐시 도구로 페이지로드 속도 향상
GZIP 압축 – 빠른 HTML, 자바 스크립트 및 스타일 시트 전송

검사 및 권장 사항

Hummingbird는 사이트를 검색하여 속도를 늦추는 파일을 찾고 사이트를 최고의 속도로 실행하기위한 팁과 수정 사항을 제공합니다.
Hummingbird는 한 번의 클릭으로 성능을 신속하게 최적화 할 수 있습니다.
캐싱 플러그인 재 방문자자들에게 빠른 속도를 제공하기 위한 플러그인으로 워드프레스에서는 특히 필요한 요소라고 강조하고 있습니다.
이러한 재 방문자의 경우 홈페이지의 변화가 없다는 과정하게 동일한 서버를 재 요청을 할 필요가 없기 때문에 캐싱플러그인을 이용하면 속도를 비약적으로 개선시킬수 있습니다.
그리고 WPMU DEV의 Hummingbird 플러그인를 사용하게 되면 브라우저 캐싱을 관리하는 것 외에도 파일 압축, CSS, JavaScript 및 HTML 축소를 처리하고 CDN을 추가하여 작업 속도를 더욱 높일수 있으며 다른 플러그인중에서도 최고의 성능을 보일 수 있다고 합니다.

CDN 사용 트래픽 및 속도개선

CDN(Content Delivery Network)은 웹 콘텐츠를 전 세계적으로 분산된 서버 네트워크를 통해 전달하는 서비스입니다. 이를 통해 웹 사이트의 성능과 가용성을 향상시키고, 트래픽을 효과적으로 관리할 수 있습니다.

CDN을 사용하면 일반적으로 다음과 같은 이점이 있습니다:

속도 향상: CDN은 사용자와 가까운 지역에 위치한 서버를 사용하여 콘텐츠를 전송합니다. 이로 인해 사용자는 빠른 응답 시간과 빠른 다운로드 속도를 경험할 수 있습니다.
대역폭 절약: CDN은 콘텐츠를 원본 서버에서 가져와 사용자에게 전달하는 동안 캐싱을 수행합니다. 이는 원본 서버로의 요청 횟수를 줄여 대역폭 사용을 절약할 수 있습니다.

아래는 일반적인 예시를 통해 CDN 사용 시 속도 향상과 대역폭 절약의 정도를 보여주는 표입니다. 이는 일반적인 시나리오를 기반으로 하며, 실제 결과는 여러 요소에 따라 다를 수 있습니다.

	CDN을 사용하지 않을 때	CDN을 사용할 때	성능 향상 (%)	트래픽 감소 (%)
페이지 로드 시간	4초	2초	50%	N/A
대역폭	100GB	50GB	N/A	50%

위의 표에서 “페이지 로드 시간”은 일반적인 웹 페이지의 로딩 시간을 나타냅니다. “대역폭”은 일정 기간 동안의 트래픽 양을 의미합니다.

CDN을 사용하면 페이지 로드 시간이 약 50% 감소할 수 있으며, 대역폭은 약 50% 감소할 수 있습니다. 하지만 이는 일반적인 예시이며, 사이트의 특성, 콘텐츠의 크기, 사용자의 지리적 위치 등에 따라 실제 결과는 다를 수 있습니다.

CSS와 JavaScript 파일 결합하기

WordPress 웹 사이트는 수 많은 ^{CSS 및 JavaScript 파일}이 주위에 결합되지 못하고 떠다니며 데이터가 커집니다.
하지만 각 파일을 방문자의 브라우저에 별도의 서버 요청으로 계속 보내지 않고 단일 파일로 병합을 한다면 워드프레스 최적화에 도움이됩니다..
병합된 CSS 파일은 웹 사이트 헤더 “_Header.PHP“에 있어하며 JavaScript의 경우 파일의 바닥 글에 있어야합니다.
그리고 ^{Asset Optimization}를 통해 손쉽게 이동이 가능합니다.

외부 이미지 제한

가장 일반적인 예는 블로그의 댓글 피드에 표시합니다.

워드프레스의 코멘트 시스템을 남겨두면 자동으로 Gravatar (다른 Automattic 속성)를 사용하여 의견 작성자의 사진과 바이오스를 가져올 수 있으며 해당 사진은 브라우저에 보내야하는 추가 서버 요청이되며 인기있는 블로그를 실행하면 지저분해질 수 있습니다.

최적화 진행방법

플러그인을 실행 후 성능테스트를 해볼수 있습니다

^{Performance Rport}에서 Run Test 해줍니다.

그럼 현재 Minify Html 이나 CSS / Images Optimize 모두 100점을 받은 상태임을 볼 수 있습니다.

하지만 리소스나 서버 시간을 개선해야 한다고 문제가 나옵니다.

기본적으로 워드프레스의 GZIP Compression 을 통해 Html 과 JavaScript / CSS 를 모두 활성화 해줍니다.

활성화를 위해서는 기본적인 서버설정이 필요한데 아파치 서버거 제일 간단합니다.

다음은 Asset Optimization 부분으로 활성화를 해주면 페이지의 속도향상을 크게 향상 시킬수 있습니다.

_{워드프레스 최적화}를 진행합니다.

그럼 _{총 154개의 결과 값}이 나오며 이를 수정할 수 있습니다 하지만 홈페이지에 무리가갈수도 있다고 합니다.

그렇기 때문에 하나하나의 테스트가 필요합니다.

Asset Optimization 실행하면 다양한 CSS 와 JAVA 가 보입니다.

이부분을 하나하나 체크하는것으로 바닥글로 보낼수 있습니다.

하지만 이중에서 현재 홈페이지의 디자인에 문제를 일으키는부분이 있을수 있기 때문에 하나하나 체크해서 홈페이지로 접속해 문제가 없는지 확인해야합니다.

dvanced Tools

다음은 Advanced Tools 로서^{Url Query 와 Emojis}를 제어할 수 있습니다.

저 같은 경우는 쿼리와 이모지 모두 활성화로 변경했습니다.

데이터베이스에서는 워드프레스의 리비전 포스팅 데이터나 썸네일등을 제거할 수 있습니다.

Page Caching

페이지 캐싱의 경우 페이지 및 게시물의 정적 HTML 사본을 저장하여 정적 파일을 방문자에게 제공합니다.
이렇게 하면 서버의 처리 부하가 줄어들고 ^{페이지로드 시간}이 크게 늘어나지만 현재 제가 사용하는 Avada 테마에서는 문제가 발생하여 이 부분은 체크하지 않았습니다.
다른분들은 체크 후 홈페이지 접속에 문제가 없다면 체크해주세요

저 같은경우는 페이지캐싱을 제외한 브라우저 캐싱과 그라비타 캐싱 / RSS 캐싱만 적용했습니다.

그리고 유료플러그인중에서는 WP-Rocket 현재 사용중으로 모바일까지 함께 최적화가 되며 오류가 아직까지 없어서 매우 만족스럽게 사용하고 있습니다.

Hummingbird 플러그인 Gzip CSS 압축 – 워드프레스 최적화