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

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

워드프레스를 사용하는 사용자라면 인터넷 검색 최적화 SEO 만들기 위해 많은 노력을 기울일테고 자신의 블로그가 인터넷 최적화가 되어 있는지 확인하는것에 매우 민감할 것입니다.

 

그리고 이러한 인터넷 최적화에는 웹페이지 속도를 측정하는 것이 포인트인인데 이 웹페이지의 속도를 좌지우지하는 것은 매우 다양하지만 그중에서 직과적으로 확인할하고 수정할 수 있는 방법으로는 "두가지"를 뽑을 수 있습니다.

• 무거운 스킨 or 가벼운 스킨
• 이미지 최적화

실제로 저는 유료스킨이 제일 최적화도 잘되고 꾸미기도 쉬울 것이라 생각해 처음부터 유료 스킨을 아무 생각 없이 구매했는데 페이지 속도가 10초 정도 걸리는 상황에서 돈 주고 구매한 거니 안 쓰기도 아까워 한 달 이상을 고민하다가 결국은 버렸습니다.

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

이렇듯 유료스킨을 구매하더라도 화려함보다는 많은 사람들이 이용하는 스킨이 속도도 빠를뿐더러 검색 최적화에 잘 되어 있으며 다음으로는 인터넷 페이지의 속도를 좌지우지하는 요소가 바로 이미지 최적화 부분입니다.

워드프레스 속도 측정방법

PageSpeed Insights

PageSpeed Insights 를 통하면 웹페이지에 대한 모바일과 데스크탑 속도 측정이 가능합니다.

실제 구글에서 제공하는 "웹페이지 속도측정"을 해보면 제일 문제시되는 부분이 바로 이미지 부분임을 알 수 있습니다

워드프레스 모바일 / 데스크탑 페이지속도 측정

.현재 모바일은 보통이고 데스크탑의 최적화 상태는 53점으로 매우 낮은 것을 볼 수 있습니다.

 

 

 

워드프레스 최적화 권장사항

1. 최적화 권장사항으로 해결방법을 볼 수있습니다.
2. 현재 제가 실행 중인 최적화 방법으로는 html 코딩을 축소가 되어 있습니다.
3. 홈페이지를 느리게 만드는 요소는 역시나 이미지 (80%)의 개선사항임을 확인할 수 있기에 이미지최적화를 위해 압축을 하러 가보겠습니다.

WP Smush 기능 설치하기

워드프레스 이미지 압축 플러그인

워드프레스 플러그인에 Smush 검색해서 활성화시킵니다.

업데이트도 빠르고 사용하는 사용자나 추천이 매우 높은 플러그인으로 무료라는 장점이 있습니다.

플러그인을 실행하면 이미지 최적화 부분이 보이지만 우선 아래로 내려보면 자동으로 이미지를 최적화시켜주는 부분입니다.

 

그 외에도 다양한 이미지 최적화 세팅값이 있으며 정보성 위주의 사진이라면 메타데이터 (카메라 세팅값 / 사진 날짜 / 시간 / 위치)등의 정보는 필요가 없다면 해당 메타정보도 제거하여 이미지를 보다 더 최적화 압축할 수 있으며 이미지 의의 투명도 PNG 파일을 JPG로 변환하여 용량을 더욱 축소시킬 수 도 있습니다.

추가 플러그인 Hummingbird 추천 "CSS Gzip 압축

추가 플러그인 Hummingbird 추천 "CSS Gzip 압축

Smush와 같은 회사에서 제공하는 HummingBird 플러그인을 이용하면 보다 다양한 웹페이지 최적화를 위한 압축이 가능합니다.

 

이미지의 최적화나 html css 상태를 점수로 바로 확인할 수 있으며 이러한 스크립트를 Gzip으로 압축하여 보다 더 가볍게 최적화할 수도 있습니다.

그리고 해당 플러그인은 1달간 프로버전의 강력한 기능을 사용할 수 있어서 저도 최적화를 위해 한 달간 프로버전을 사용하고 있습니다.

최적화 후에는 결제를 해제할 생각인데 우선은 이렇게 프로버전을 사용할 수 있다는 점은 매우 좋은 부분인 거 같습니다.

아쉽게도 해당 플러그인에는 모바일 최적화(AMP) 가 존재하지 않으며 더욱 강력한 최적화를 원한다면 WP-Rocket 사용해 본느 것도 추천합니다.

웹페이지 속도 측정에서도 개선될 뿐만 아니라 실제로 접속하는데도 개선 효과가 있었으며 모바일도 최적화시켜주기 때문에 현재 구입 후 만족하며 사용하고 있는데요 구매 후 마음에 들지 않는다면 환불도 가능합니다.

워드프레스 수동 Gzip 압축방법

워드프레스의 텍스트 Gzip 수동으로 압축하거나 압축유무를 확인하기 위해 아래사이트로 접속합니다.

무료 GZIP 압축 검사기 – 정확도 100% 온라인 도구

그럼 현재 내 웹사이트의 Gzip 압축유무 및 용량을 확인할 수 있습니다.

현재 압축되지 않은 상태로서 파일질라등을 통해 FTP 접속 후 .htaccess 파일을 수정합니다.

compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# Or, compress certain file types by extension:
<files *.html>
SetOutputFilter DEFLATE
</files>

 .htaccess 파일 하단에 위 코드를 추가하면 Gzip 압축이 수동으로 됩니다.

만약 .htaccess 파일을 수정할 수 없다면 PHP를 사용해 압축된 콘텐츠를 전송할 수 있습니다. HTML 파일을 .php 확장자로 지정하고 PHP 파일에 아래와 코드를 추가합니다.

<?php if (substr_count($_SERVER[‘HTTP_ACCEPT_ENCODING’], ‘gzip’)) ob_start(“ob_gzhandler”); else ob_start(); ?>

“Accept-encoding” 헤더를 확인할 수 있고 gzip으로 압축된 파일 버전(그렇지 않으면 정규 버전)을 반환할 수 있습니다.

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

워드프레스 참고

블루호스트가 추천하는 워드프레스 최적화 방법 개선방법 - 노랗IT월드

 

PWA Progressive Web App - 워드프레스 최적화 플러그인 - WordPress

 

워드프레스 최적화 WP-Optimize 원클릭 플러그인 - 노랗IT월드