워드프레스는 어떻게 설정하느냐에 따라서 속도가 빠를기도 하지만 엄청 느린 퍼포먼스를 보여주는데 기본적으로 워드프레스는 무거운 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 파일 결합하기
- 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 현재 사용중으로 모바일까지 함께 최적화가 되며 오류가 아직까지 없어서 매우 만족스럽게 사용하고 있습니다.
8 thoughts on “Hummingbird 플러그인 Gzip CSS 압축 – 워드프레스 최적화”