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

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

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

WP Hummingbird 플러그인 기능

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

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

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

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

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

워드프레스 Hummingbird 기능

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

검사 및 권장 사항

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

CSS와 JavaScript 파일 결합하기

1. WordPress 웹 사이트는 수 많은 ^{CSS 및 JavaScript 파일}이 주위에 결합되지 못하고 떠다니며 데이터가 커집니다.
2. 하지만 각 파일을 방문자의 브라우저에 별도의 서버 요청으로 계속 보내지 않고 단일 파일로 병합을 한다면 워드프레스 최적화에 도움이됩니다..
3. 병합된 CSS 파일은 웹 사이트 헤더 “_Header.PHP“에 있어하며 JavaScript의 경우 파일의 바닥 글에 있어야합니다.
4. 그리고 ^{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 현재 사용중으로 모바일까지 함께 최적화가 되며 오류가 아직까지 없어서 매우 만족스럽게 사용하고 있습니다.

워드프레스 최적화

• 블루호스트가 추천하는 워드프레스 최적화 방법 개선방법
• PWA Progressive Web App & 워드프레스 최적화 플러그인
• 워드프레스 최적화 WP Rocket 플러그인 구입 설치