본문 바로가기

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

노랗 2021. 7. 22.
반응형

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

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

 

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

 

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

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

 

WP Rocket 플러그인 워드프레스 최적화 후기 - 노랗IT월드

워드프레스는 무거운 프로그램으로 최적화 및 가볍게 커스터마이즈 하는게 중요합니다. 그러나 코딩을 할줄 모른다면 여러 무료프로그램보단 유료인 WP Rocket 사용하면 모바일최적화 부터 js 쿼

yellowit.co.kr

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도 함께 사용하는것을 추천합니다.
 

워드프레스 이미지최적화 플러그인 Smush - 노랗IT월드

워드프레스는 구글검색엔진에 최적화되어 있지만 무게가 나가 속도가 매우 빠르지 않은 단점이 있습니다. 페이지속도를 올리느것이 SEO 도움이 되기 때문에 홈페이지를 가볍게 하기 위해서는

yellowit.co.kr

Hummingbird 워드프레스 최적화

  Hummingbird Page Speed Optimization

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

 

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

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

Asset Optimization

Asset Optimization  

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

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

HTML, JavaScript Css 압축

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

 

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

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

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

Advanced Tools

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

 

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

 

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

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

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

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

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

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

워드프레스 참고포스팅

반응형

댓글