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

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

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

그리고 저는 지금까지 무료의 다양한 최적화 압축 프로그램을 사용했었고 개인적으로 만족스러웠는데요 블루호스트의 가장 저렴한 버전 및 아마다 테마가 무거워서 그런지 구글 속도 측정에서 너무 낮게 나와서 고민을 하다가 이번에 WP ROCKET 플러그인을 구입해서 사용한지 이제 반년이 넘었는데 너무 마음에 들어서 후기를 남겨봅니다.

 

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

제가 현재 사용하는 유일한 유료 플러그인으로서 구입 및 설치 그리고 설정 방법에 대해 알아보도록 하겠습니다.

WP ROCKET 기능 및 가격

워드프레스 로켓 플러그인

우선 워드프레스 최강 최적화 플러그인이라는 로켓은 적은 클릭으로 로딩 속도를 빠르게 만들어줍니다.

WP ROCKET 요금제

개인적으로 기존에 사용하던 무료 플러그인도 만족스러웠지만 설정을 잘못하면 갑자기 먹통이 되는 문제가 많았는데 WP ROCKET은 그런 문제가 현재까지 한 번도 일어나지 않았고 높은 퍼포먼스를 보여줬기 때문에 너무 만족스러운 플러그인입니다.

• 가격은 하나의 웹사이트를 사용하는 사람은 1년에 49달러
• 3개의 웹사이트용은 99달러
• 사이트 무제한으로 사용가능한 라이센스는 249달러입니다.

#1 WordPress Caching Plugin | WP Rocket

참고로 위 링크를 통해 구입 시 조금 더  저렴하게 구입이 가능합니다.

저는 워드프레스를 하나만 사용하기 때문에 49달러로  구입했으며 이후 저는 플러스 라이센스로 라이센스를 업그레이드했습니다.

 

특별히 가입을 하지 않아도 이메일주소와 이름 지역 그리고 카드정보만 입력하면 결제가 이루어집니다.

그리고 사용을 해보고 14일안에 환불도 가능하기 때문에 저도 부담 없이 사용을 해봤는데요 환불할 필요성을 못 느끼는 성능이었습니다

구글 속도 측정 결과

우선 플러그인 설정전 제 워드프레스의 속도를 측정해보았습니다.

모바일 점수는 10점 데스크톱 점수는 35점으로 매우 느린 속도를 보여주는 상태입니다.

WP ROCKET 플러그인 구입 및 활성화

회원가입 없이 결제를 하게 되면 보는 것과 같이 바로 다운로드를 할 수 있습니다.

그리고 메일로도 파일을 다운로드할 수 있는 링크가 전달됩니다.

 

재 다운로드는 언제든지 가능은 하지만 혹시 모르니 백업은 해두는 것을 추천합니다.

 

이후 워드프레스 로그인 후 플러그인 추가 -> 플러그인 업로드 선택합니다.

워드프레스 플러그인 수동 설치

그리고 파일을 선택해서 지금 설치 버튼을 눌러줍니다.

설치가 완료되었다면 플러그인을 활성화합니다.

 

만약 기존에 사용 중인 워드프레스 최적화 플러그인과 겹치는 게 있다면 삭제를 하는 것이 좋습니다.

저는 WP Fastest Cache 플러그인과 기능이 겹치기 때문에 삭제를 했습니다.

설치가 완료되었다면 세팅 설정을 진행합니다.

WP Rocket 설정 최적화 방법

 

기본적으로 영문판이지만 간단한 영어로 되어 있으며 최적화 기능을 on / off로 간단하게 설정할 수 있습니다.

그리고 구글 크롬을 이용하면 해당 페이지를 번역해서도 볼 수 있습니다.

로켓 테스터를 이용하면 최적화의 베타 기능을 조금 빨리 사용해볼 수 있습니다.

캐시 최적화

가장 먼저 캐시를 최적화할 수 있는데 WP ROCKET의 장점은 PC와 모바일 모두 가능하다는 장점이 있습니다.

모바일 장치용 캐싱은 필수로 설정하는 것이 좋습니다.

캐시파일의 수명은 10시간을 추천합니다.

워드프레스 파일 최적화

• 워드프레스의 HTML 크기를 축소 및 공백이나 주석 등을 제거합니다.
• 구글 글꼴의 파일을 결합해서 HTTP 요청수를 줄입니다.
• 정적 리소스에서 쿼리 문자열을 제거합니다.

• CSS 파일 축소합니다.
• CSS 파일 및 Minify 파일을 결합해 HTTP 요청수를 줄입니다.
• CSS 전송을 최적화해 웹사이트에서 렌더링 차단 CSS를 제거해 로딩되는 속도를 빠르게 설정합니다.

• 자바 스크립트 파일을 최적화하기 위해 공백과 주석을 제거해 용량을 줄입니다.
• 타사의 자바스크립트 파일 및 인라인 JS파일을 결합해 HTTP 요청수를 줄입니다.
• 자바스크립트 사이트에서 렌더링 차단 JS를 제거해 로딩 속도를 향상합니다.
• 제이쿼리 (jQuery)의 안전모드를 통해 문서 상단에 있는 제이쿼리 렌더링을 차단해 스크립트 로딩 및 테마, 플러그인, 인라인, 제이쿼리 참조를 지원하며 해당 기능을 활성화하지 않으면 기능이 제대로 작동하지 않을 수 있습니다.

미디어 설정

이미지 및 비디오 등에 들어가는 HTTP 요청수를 줄여 실제 로딩되는 시간을 향상할 수 있습니다.

이미지 사용 및 Iframe 및 동영상 설정, 이모티콘(Emoji) 설정을 체크합니다.

캐시파일 생성

홈페이지의 사이트맵 캐시를 생성해 콘텐츠를 추가하거나 업데이트할대 자동으로 트리거 되는 관리자를 수동으로 설정할 수 있습니다.

 

사전 로드 활성화 및 미리 설치되어 있는 사이트맵 플러그인이 있다면 설정을 해줍니다.

고급 캐시 설정

고급설정에 들어가면 디테일한 캐시 설정을 할 수 있습니다.

캐시설정을 하지 않을 게시물이나 쿠키 캐시를 사용하지 않는 페이지 등을 수동으로 설정합니다.

데이터베이스 최적화

게시물을 수정하거나 초안 작업 휴지통 등에 있는 데이터베이스를 삭제할 수 있습니다.

그리고 스팸 댓글 등이나 만료된 데이터 베이스 등을 삭제해 워드프레스의 용량을 줄일 수 있습니다.

 

자동 정리 기능을 이용하면 간단하게 정리할 수 있으며 저는 한 달 간격으로 설정을 했더니 데이터베이스가 너무 많이 쌓이는 것을 보아 1주간으로 설정하는 것을 추천합니다.

CDN 최적화

CDN 최적화를 통해 CSS 및 JS, 이미지등을 최적화 할 수 있습니다.

CDN 장점	설명
더 빠른 로딩 시간	CDN은 사용자와 가장 가까운 서버에서 콘텐츠를 제공하기 때문에 로딩 속도가 향상됩니다. 사용자가 요청한 콘텐츠가 CDN 서버에 이미 캐시되어 있다면 웹사이트 로딩 시간이 크게 단축될 수 있습니다.
트래픽 감소	CDN은 콘텐츠를 여러 서버에 분산 저장하므로 웹사이트의 트래픽이 분산됩니다. 이로 인해 웹 서버의 부하가 감소하고 대역폭 사용량이 줄어듭니다.
지역별 성능 향상	CDN은 전 세계에 서버를 배치하여 사용자의 지리적 위치에 가장 가까운 서버에서 콘텐츠를 제공합니다. 따라서 사용자의 지역에 따른 성능 향상이 있습니다.
고가용성 및 내결함성	CDN은 여러 서버에 콘텐츠를 복제하여 내결함성을 제공합니다. 특정 서버에 장애가 발생하더라도 다른 서버에서 콘텐츠를 제공하여 웹사이트의 가용성을 높여줍니다.
대역폭 최적화	CDN은 콘텐츠를 압축하고 최적화하여 대역폭 사용을 최소화합니다. 이를 통해 트래픽 비용을 절감할 수 있습니다.

CDN의 성능 향상 및 트래픽 감소는 사용하는 CDN 서비스와 웹사이트의 특성에 따라 다를 수 있습니다. 따라서 실제 성능 변화 및 트래픽 감소량은 특정 상황에 따라 다를 수 있습니다.

Heartbeat 사용량 설정

하트비트에서는 워드프레스의 활동 사용량을 설정할 수 있습니다.

활동 사용량을 완전히 비활성 시에는 api 및 플러그인과 테마에 손상을 입을 수 있으며 너무 빠른 활동은 홈페이지를 과부하 일으킬 수 있습니다.

기타 기능

기타 Rocket 기능을 이용하면 구글 애널리틱스와 페이스북 픽셀용 브라우저 기능을 이용해 브라우저 캐싱을 향상할 수 있습니다.

 

그리고 Varnish 서버가 실행되는 경우 이 기능을 활성화해서 캐시를 지울 때마다 최신 버전을 확인할 수 있습니다.

 

저는 지금까지 워드프레스의 이미지 압축 최적화 플러그인은 Smush 플러그인을 사용했습니다.

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

하지만 ROCKET 플러그인에서는 이미지 최적화 플러그인으로 IMAGIFY를 추천합니다.

무료로 한 달에 최적화하는 개수에 제한이 있는 제한이 있지만 성능적으로 매우 만족스러워서 현재는 이미지 압축은 Imagify 사용합니다.

Imagify 이미지 최적화

Imagify 플러그인을 설치하게 되면 무료 API 키를 받아 사용 가능합니다.

• 업로드 시 이미지 자동 최적화
• 원본 이미지 백업
• 이미지의 모든 EXIF 유지

저는 이미지 자동 최적화와 원본 이미지 백업 두 가지만 설정합니다.

만약 이미지가 너무 크다면 원하는 최대 이미지 해상도를 설정합니다.

디스플레이 옵션을 통해 상단에서 빠른 최적화 설정도 가능합니다.

그리고 워드프레스에 이미지를 업로드할 때 아래 기본적인 정보를 알고 업로드하는 것이 좋으며 WP-Rocket 플러그인을 구입을 고민한다면 아래 링크를 참고하세요

#1 WordPress Caching Plugin | 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으로 압축된 파일 버전(그렇지 않으면 정규 버전)을 반환할 수 있습니다.

이미지 최적화 워드프레스 사진 업로드 주의사항 - 노랗IT월드

워드프레스 참고 포스팅

• [IT 리뷰/블로그 SEO] - 워드프레스 모바일 최적화 AMP PWA 광고설정 속도향상
• [IT 리뷰/블로그 SEO] - 워드프레스 홈페이지 로딩 속도 측정 최적화
• [IT 리뷰/블로그 SEO] - 워드프레스 이미지 CSS 최적화 Gzip 압축 플러그인