본문 바로가기
티스토리 애드센스 워드프레스

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

by 노랗_NX_블로그 노랗 2019. 12. 9.

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

워드프레스는 꽤나 무거운 CMS형 플랫폼으로서 호스팅서버가 제대로 받쳐주지 않는다면 속도에 꽤 신경을 쓰게 됩니다.

 

그렇기 때문에 워드프레스에는 다양한 최적화 플러그인이 존재하는데 저는 그중에서 슈퍼캐쉬등 유명한 플러그인들보다 허밍버드라고 하는 Hummingbird 플러그인CSS와 Gzip 압축의 기능성능향상이 무료플러그인중에서 가장 만족스러웠습니다.

 

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

물론 유료플러그인에서는 로켓(WP Rocket)을 따라오진 못하지만 무료 플러그인으로서 매우 만족스러웠던 플러그인입니다.

 

 

워드프레스 WP ROCKET 최적화 플러그인 기능 및 설정방법

워드프레스 WP ROCKET 최적화 플러그인 워드프레스에는 다양한 최적화 플러그인이 있으며 이런 플러그인을 이용하면 웹페이지를 잘 모르더라도 쉽게 설정을 할 수 있는 장점이 있습니다. 그리고 저는 지금까지 무..

yellow-nx-blog.tistory.com

Hummingbird 플러그인 기능

영어 한글
Is your Google PageSpeed performance test telling you to:
– Enable text compression
– Preconnect to required origins
– Preload key requests
– Avoids enormous network payloads
– Uses efficient cache
– Fix your JavaScript execution time
– Minify CSS
– Minify JavaScript
– Eliminate render-blocking resources
– Defer unused CSS
– Lazy Load offscreen images (Smush free integration)
Google PageSpeed ​​성능 테스트에서 다음과 성능을 보여줍니다.
– 텍스트 압축 사용 
– 필수 오리진에 사전 연결 
– 사전 요청 키 요청 
– 막대한 네트워크 페이로드 방지 
– 효율적인 캐시 사용 
– JavaScript 실행 시간 수정 
– CSS 압축 
 JavaScript 압축 - 렌더 차단 리소스 제거 
– 사용하지 않는 CSS 지연
– 지연로드 오프 스크린 이미지 (스매쉬 플러그인)
  1. Hummingbird는 사이트를 스캔하고 한 번의 클릭으로 수정하여 WordPress의 속도를 빠르게 향상시킵니다.
  2. Hummingbird의 WordPress 속도 최적화 기능을 사용하면 더 빠른 로딩 페이지, 더 높은 검색 순위 및 PageSpeed ​​점수 및 더 행복한 방문자를 얻을 수 있습니다.
  3. 이미지 압축 플러그인인 스매쉬 Smush도 함께 사용하는것을 추천합니다.

 

 

워드프레스 이미지 CSS 최적화 압축 플러그인

워드프레스 이미지 CSS 최적화 압축 플러그인 워드프레스를 사용하는 사용자라면 인터넷 검색 최적화 SEO 매우 민감할 것입니다. 그리고 이러한 인터넷 최적화에는 웹페이지 속도를 측정하는 것이 포인트인인데 이..

yellow-nx-blog.tistory.com

Hummingbird 최적화방법

 

우선 워드프레스에서 Hummingbird Page Speed Optimization설치하고 실행합니다.

 

 

최적화를 하기전에 Performance Report 에서 성능테스트를 진행합니다.

그럼 현재 개선해야하는 부분에 대해서 % 확인할 수 있습니다.

Asset Optimization

Asset Optimization 기능을 활성하합니다.

그럼 홈페이지의 로딩속도를 향상시킬수 있습니다.

 

 

HTML 과 자바스크립트,CSS 모두 활성화를 시켜줍니다.

 

 

페이지로드에 시간을 단축할 수 있는 방법이 저는 154개가 나옵니다.

각각에 대한 성능을 개선시킬수 있도록 설정을 변경하고 프론트 엔드에서 문제가 없는지 확인이 필요합니다.

 

 

Asset Optimization에서 필요없는 기능들을 아래로 내려 홈페이지 속도를 비약적으로 빠르게 설정합니다.

 

Advanced Tools

URL 쿼리이모지"Emoji"기능을 삭제해서 로딩속도를 향상시킵니다.

 

 

데이터베이스에서는 포스팅을 했던 리비전들과 휴지통,스팸글등 필요없는 데이터를 삭제할 수 있습니다.

 

하단의 서버를 통해 호스팅서버를 향상시킬수 있습니다.

 

HTML 페이지캐싱도 활성화합니다.

해당 기능을 사용후 홈페이지의 디자인이 모두 정상적으로 나오는지도 함께 확인합니다.

 

이렇게 브라우저캐싱과 그라비팅캐싱,RSS캐싱등을 활성화해줍니다.

 

다음 홈페이지속도를 확인합니다.

이미지 크기 및 CSS 축소압축,자바스크립트 줄이기,효율적으로 이미지 인코딩 및 텍스트 압축,모든 부분에서 만족스럽게 워드프레스 성능이 개선되었습니다.

워드프레스 참고포스팅

댓글0