워드프레스 속도 최적화 플러그인
워드프레스 속도 최적화 플러그인 중에서 Autoptimize, WP Super Cache 소개 및 설정 방법을 살펴볼까 합니다.
워드프레스로 웹사이트를 운영하려면 캐시 플러그인의 사용은 필연적입니다.
그중에서 Autoptimize와 WP Super Cache를 선택한 이유는 무료이면서도 탁월한 성능을 경험하였기 때문입니다.
두 플러그인을 설치하고 설정 시 중복되는 동일한 기능은 하나만 활성화하여야 합니다.
중복 설정을 하면 웹사이트의 레이아웃이 깨지거나 특정 기능이 비활성화되는 경우가 발생할 수 있습니다.
해당 플러그인의 설치와 설정은 아바다 테마 하에서 이루어졌습니다.
Autoptimize
Autoptimize는 HTML, CSS 및 자바스크립트 최적화 외에도 최신 워드프레스 웹사이트의 다른 측면인 이미지를 최적화하여 지연 로드를 시행하고 구글 글꼴을 최적화거나 이모티콘을 제거하는 등의 작업을 수행할 수 있는 기능도 포함되어 있어 HTTP/2를 사용하는 경우에도 웹사이트의 속도를 향상시킬 수 있습니다.
1. Autoptimize 설치
Autoptimize를 검색하고 설치 후 활성화 합니다.
2. Autoptimize 설정
(1) JS, CSS & HTML
자바스크립트 옵션 설정은 자바스크립트 코드 최적화하기와 자바스크립트 파일 수집하기를 체크합니다.
CSS 옵션 설정은 CSS 코드 최적화하기와 CSS 파일 수집하기 그리고 인라인 CSS 파일 수집하기까지 체크합니다.
HTML 옵션 설정은 HTML 최적화하기만 체크합니다.
CDN을 사용하고 있다면 CDN 기본 URL을 입력합니다.
Misc 옵션 설정은 수집된 스크립트/CSS를 정적 파일로 저장하기와 수집이 제외된 CSS 및 자바스크립트 파일을 최소화하기 그리고 404 폴백을 활성화하기 거기에 로그인한 편집자/관리자 최적화하기까지 체크합니다.
그리고 나서 Save Changes and Empty Cache 버튼을 클릭합니다.
(2) Images
이미지 최적화는 설정하지 않습니다.
이미지 최적화 플러그인을 따로 사용하던지 아니면 이미지를 미리 최적화하여 웹사이트에 업데이트 하는 것이 좋습니다.
그리고 이미지 지연 로드의 경우에는 캐시 플러그인이나 아바다 테마에서 지원하는 것을 사용하면 되므로 굳이 체크할 필요는 없습니다.
(3) Critical CSS
Critical CSS도 이미지 최적화와 마찬가지로 설정하지 않습니다.
(4) Extra
구글 폰트와 이모티콘 제거 여부만 체크하면 됩니다.
구글 폰트를 사용한다면 그대로 두기로 놔 두거나 그렇지 않으면 구글 폰트를 제거하기를 체크하고 Save Changes 버튼을 클릭합니다.
특히 폰트와 관련하여서 구글 폰트나 외부에서 업로드한 폰트를 사용하지 않는 것이 좋을 것 같습니다.
이런 경우 글 페이지 하나당 평균적으로 소모하는 트래픽의 양이 5MB가 넘어가는 바람에 외부에서 업로드한 폰트를 삭제하고 구글 폰트를 사용하는 대신 테마가 기본으로 제공하는 폰트로 변경한 다음 Autoptimize 옵션에서 구글 폰트를 제거하니까 지금은 페이지 하나당 소모하는 평균적인 트랙픽의 양이 1.2MB로 줄었습니다.
이모티콘을 사용하지 않으면 이모티콘 제거를 체크하여야 하지만 그렇지 않다면 체크하지 말아야 합니다.
이모티콘 사용 여부는 아바다 테마에서도 설정할 수 있습니다.
(5) Optimize More
함께 사용하면 좋은 테마나 플러그인을 소개하고 있습니다.
워드프레스 속도 최적화에 더 좋은 효과를 누리고 싶다면 추천하는 테마나 플러그인을 사용해보는 것도 좋은 선택이지 않을까 생각합니다.
(6) Pro Boosters
유료 버전 사용 안내입니다.
WP Super Cache
WP Super Cache는 동적 워드프레스의 웹사이트에서 정적 HTML 파일을 생성합니다.
정적 HTML 파일이 생성 된 후 웹 서버는 비교적 무겁고 복잡한 워드프레스 PHP 스크립트를 처리하는 대신 해당 파일을 다음과 같은 사용자에게 제공합니다.
– 로그인하지 않은 사용자.
– 웹사이트에 댓글을 남기지 않은 사용자.
– 또는 암호로 보호된 게시물을 읽지 않은 사용자.
방문자의 99%가 정적 HTML 파일을 받게 될 것이고 캐시된 파일 하나가 수천 번 제공될 수 있습니다.
다른 방문자에게는 방문에 맞는 사용자 지정 캐시 파일이 제공됩니다.
로그인이 되어 있거나 댓글을 남긴 경우에는 해당 세부 정보가 표시되고 캐시됩니다.
1. WP Super Cache 설치
WP Super Cache를 검색하고 설치 후 활성화 합니다.
한글화가 잘되어 있어서 설정하기가 쉽습니다.
2. WP Super Cache 설정
(1) 쉬운
1) 캐싱
캐싱 켜기(권장)를 체크하고 상태 업데이트 버튼을 클릭합니다.
2) 캐시 테스트
캐시 테스트를 시행하여 통과 여부를 확인합니다.
통과하였다면 다음 단계 설정으로 이동합니다.
(2) 고급
1) 캐시 전달 방법
간단함(권장)을 체크합니다.
이후 설정은 권장 사항만 체크하면 됩니다.
2) 기타
캐시 제한에서 로그인한 방문자에 대한 캐싱을 비활성화합니다.(권장)를 체크한 후 다음 항목을 체크합니다.
– GET 매개변수가 있는 페이지를 캐시하지 마세요. (URL 끝에?x=y가 있음),
– 페이지를 압축하여 방문자에게 더 빠르게 제공하세요. (권장),
– 캐시 재구축. 새 파일이 생성되는 동안 익명 사용자에게 슈퍼캐시 파일을 제공합니다. (권장),
– 304 브라우저 캐싱. 브라우저가 마지막으로 요청한 이후 페이지가 변경되었는지 확인하여 사이트 성능을 향상시킵니다. (권장)
3) 고급
다음과 같이 설정한 후 상태 업데이트 버튼을 클릭합니다.
– 동적 캐싱을 활성화합니다.
– 게시물이나 페이지가 게시되거나 업데이트되면 모든 캐시 파일을 지웁니다.
(권장)
4) 만료 시간 및 쓰레기 수거
하루에 여러 번 캐시를 삭제하면 서버에 부담을 줄 수가 있기 때문에 하루에 한 번만 캐시를 삭제하도록 만료 시간 및 쓰레기 수거에서는 캐시 시간 초과와 주기를 78000초로 입력한 후 만료를 변경 버튼을 클릭합니다.
(3) CDN
CDN을 사용하고 있다면 CDN 지원 활성화를 체크하고 CDN 기본 URL을 입력하면 되는데 Autoptimize에서 이미 입력하였다면 중복하여 입력할 필요는 없습니다.
(4) 콘텐츠
쉬운, 고급, CDN 설정을 마쳤다면 캐시 삭제 버튼을 클릭하여 캐시를 비워 줍니다.
(5) 나머지 항목 설정
프리로드, 플러그인, 디버그의 설정값은 기본으로 놔둡니다.
아바다 테마
아바다 테마에서도 워드프레스 속도 최적화 기능을 제공하고 있기 때문에 중복 설정된 항목이 있으면 이것을 비활성화하여야 합니다.
설정 변경은 Avada-Option-Performance에서 시행합니다.
1. 지연 로드
이미지와 아이프레임 지연 로드는 워드프레스를 선택합니다.
두 항목 모두 아바다를 선택할 경우 웹사이트의 레이아웃이 깨지는 현상이 발생하였습니다.
만약에 Autoptimize에서 이미지 지연 로드를 체크하였다면 아바다 테마에서는 None을 선택하여야 합니다.
2. 폰트와 이모티콘
font-face 랜더링은 Swap All을 선택합니다.
기본 폰트 미리 로드는 구글 폰트를 사용하면 Google Fonts를, 사용하지 않는다면 None을 선택하여야 합니다.
이모티콘은 사용 유무에 따라 설정을 선택합니다.
이모티콘을 사용하지 않는다면 워드프레스에서 이모티콘 스크립트를 제거하여 속도를 향상시킬 수 있습니다.
3. jQeury Migrate
jQuery Migrate 스크립트는 Disable을, 푸터에서 jQuery 로드와 푸터에서 스타일시트 로드는 Off를 선택합니다.
4. Gzip 압축
Gzip 압축 사용과 비디오 파사드 사용은 On를, 개체 캐시 삭제는 Off를 선택합니다.
5. 동적 CSS와 자바스크립트
Autoptimize, WP Super Cache에서 이미 설정을 하였기 때문에 Disable을 선택하고 나머지는 항목도 모두 Off를 선택하여야 합니다.
마치며…
워드프레스 속도 최적화 플러그인 설정을 마치고 구글 서치 콘솔에서 확인하였더니 적용하였었던 시점인 2023년 12월 27일 이후로 데스크톱과 모바일 모두 속도가 상승하였습니다.
이전에는 워드프레스 속도 최적화 플러그인 중에서 WP Rocket을 사용하였었습니다.
하지만 아바다 테마 하에서는 그리 만족할만한 웹사이트의 속도 향상을 느끼지 못하였습니다.
우연히 WP Rocket 대신 Autoptimize와 WP Super Cache를 조합하면 괄목할만한 성과를 얻을 수 있다는 것을 알게 되어 바로 적용하여 보니 생각 이상의 효과를 확인하였습니다.
실제 체감한 속도 또한 이전보다 훨씬 빠름을 인지할 수 있었습니다.
하지만 이런 설정이 모두에게 동일하게 적용되지는 않을 것입니다.
사용하는 서버 환경과 테마 등과 같이 변수가 많이 존재하기 때문입니다.
그렇더라도 웹사이트의 속도가 느리다면 적용하여 볼만한 가치는 충분하다 할 것입니다.
워드프레스의 속도 향상을 위하여 여러 경험을 통하여 내린 결론은 다음과 같습니다.
– 빠른 서버
– 빠른 테마.
– 폰트 최적화.
– 캐시 플러그인 사용.
빠른 서버는 비용 부담이 가중될 수 있으므로 선택이 쉽지 않을 수도 있지만 나머지 3가지 항목은 비용 부담에서 자유롭고 적용에 제약이 따르지 않으므로 그리 어려운 선택은 아닐 것입니다.
여러 캐시 플러그인을 시험하고 경험한 결과 아바다 테마 하에서 가장 빠른 속도 향상을 보인 것은 Autoptimize와 WP Super Cache를 함께 사용하였을 때였었습니다.
앞의 그래프가 그걸 증명하고 있다고 말할 수 있을 듯하고요.
참고로 캐시 플러그인 사용 시 네이버 웹마스터 도구에서 웹페이지 수집이 안되는 현상이 간혹 발생할 수도 있다고 하니 이 부분은 꼭 확인하시기 바랍니다.
그리고 WP Super Cache가 캐싱 시 소모되는 캐시 파일 용량이 게시 된 글(단어의 개수 600~1,000 정도)당 평균 1MB 정도입니다.
게시 된 글이 1,000개이면 1GB의 웹 하드 용량을 소모하게 된다는 건데 생각보다 소모되는 캐시 파일의 용량이 많은 것 같아서 관련 이슈를 확인하고 있지만 국내는 물론 해외에서도 이에 관한 이슈는 찾지 못하였습니다.
캐싱 시 소모되는 캐시 파일 용량이 저 정도가 기본인지는 모르겠으나 단순 계산으로 보았을 때 지나친 것 같아서 지속적으로 모니터링을 할 예정입니다.
혹여, 캐시 파일 용량 때문에 웹 하드 용량 부족을 겪을 경우에는 WP Super Cache를 삭제하면 됩니다.
2024년 01월 15일
워드프레스 속도 최적화 플러그인
워드프레스 속도 최적화 플러그인 중에서 Autoptimize, WP Super Cache 소개 및 설정 방법을 살펴볼까 합니다.
워드프레스로 웹사이트를 운영하려면 캐시 플러그인의 사용은 필연적입니다.
그중에서 Autoptimize와 WP Super Cache를 선택한 이유는 무료이면서도 탁월한 성능을 경험하였기 때문입니다.
두 플러그인을 설치하고 설정 시 중복되는 동일한 기능은 하나만 활성화하여야 합니다.
중복 설정을 하면 웹사이트의 레이아웃이 깨지거나 특정 기능이 비활성화되는 경우가 발생할 수 있습니다.
해당 플러그인의 설치와 설정은 아바다 테마 하에서 이루어졌습니다.
Autoptimize
Autoptimize는 HTML, CSS 및 자바스크립트 최적화 외에도 최신 워드프레스 웹사이트의 다른 측면인 이미지를 최적화하여 지연 로드를 시행하고 구글 글꼴을 최적화거나 이모티콘을 제거하는 등의 작업을 수행할 수 있는 기능도 포함되어 있어 HTTP/2를 사용하는 경우에도 웹사이트의 속도를 향상시킬 수 있습니다.
1. Autoptimize 설치
Autoptimize를 검색하고 설치 후 활성화 합니다.
2. Autoptimize 설정
(1) JS, CSS & HTML
자바스크립트 옵션 설정은 자바스크립트 코드 최적화하기와 자바스크립트 파일 수집하기를 체크합니다.
CSS 옵션 설정은 CSS 코드 최적화하기와 CSS 파일 수집하기 그리고 인라인 CSS 파일 수집하기까지 체크합니다.
HTML 옵션 설정은 HTML 최적화하기만 체크합니다.
CDN을 사용하고 있다면 CDN 기본 URL을 입력합니다.
Misc 옵션 설정은 수집된 스크립트/CSS를 정적 파일로 저장하기와 수집이 제외된 CSS 및 자바스크립트 파일을 최소화하기 그리고 404 폴백을 활성화하기 거기에 로그인한 편집자/관리자 최적화하기까지 체크합니다.
그리고 나서 Save Changes and Empty Cache 버튼을 클릭합니다.
(2) Images
이미지 최적화는 설정하지 않습니다.
이미지 최적화 플러그인을 따로 사용하던지 아니면 이미지를 미리 최적화하여 웹사이트에 업데이트 하는 것이 좋습니다.
그리고 이미지 지연 로드의 경우에는 캐시 플러그인이나 아바다 테마에서 지원하는 것을 사용하면 되므로 굳이 체크할 필요는 없습니다.
(3) Critical CSS
Critical CSS도 이미지 최적화와 마찬가지로 설정하지 않습니다.
(4) Extra
구글 폰트와 이모티콘 제거 여부만 체크하면 됩니다.
구글 폰트를 사용한다면 그대로 두기로 놔 두거나 그렇지 않으면 구글 폰트를 제거하기를 체크하고 Save Changes 버튼을 클릭합니다.
특히 폰트와 관련하여서 구글 폰트나 외부에서 업로드한 폰트를 사용하지 않는 것이 좋을 것 같습니다.
이런 경우 글 페이지 하나당 평균적으로 소모하는 트래픽의 양이 5MB가 넘어가는 바람에 외부에서 업로드한 폰트를 삭제하고 구글 폰트를 사용하는 대신 테마가 기본으로 제공하는 폰트로 변경한 다음 Autoptimize 옵션에서 구글 폰트를 제거하니까 지금은 페이지 하나당 소모하는 평균적인 트랙픽의 양이 1.2MB로 줄었습니다.
이모티콘을 사용하지 않으면 이모티콘 제거를 체크하여야 하지만 그렇지 않다면 체크하지 말아야 합니다.
이모티콘 사용 여부는 아바다 테마에서도 설정할 수 있습니다.
(5) Optimize More
함께 사용하면 좋은 테마나 플러그인을 소개하고 있습니다.
워드프레스 속도 최적화에 더 좋은 효과를 누리고 싶다면 추천하는 테마나 플러그인을 사용해보는 것도 좋은 선택이지 않을까 생각합니다.
(6) Pro Boosters
유료 버전 사용 안내입니다.
WP Super Cache
WP Super Cache는 동적 워드프레스의 웹사이트에서 정적 HTML 파일을 생성합니다.
정적 HTML 파일이 생성 된 후 웹 서버는 비교적 무겁고 복잡한 워드프레스 PHP 스크립트를 처리하는 대신 해당 파일을 다음과 같은 사용자에게 제공합니다.
– 로그인하지 않은 사용자.
– 웹사이트에 댓글을 남기지 않은 사용자.
– 또는 암호로 보호된 게시물을 읽지 않은 사용자.
방문자의 99%가 정적 HTML 파일을 받게 될 것이고 캐시된 파일 하나가 수천 번 제공될 수 있습니다.
다른 방문자에게는 방문에 맞는 사용자 지정 캐시 파일이 제공됩니다.
로그인이 되어 있거나 댓글을 남긴 경우에는 해당 세부 정보가 표시되고 캐시됩니다.
1. WP Super Cache 설치
WP Super Cache를 검색하고 설치 후 활성화 합니다.
한글화가 잘되어 있어서 설정하기가 쉽습니다.
2. WP Super Cache 설정
(1) 쉬운
1) 캐싱
캐싱 켜기(권장)를 체크하고 상태 업데이트 버튼을 클릭합니다.
2) 캐시 테스트
캐시 테스트를 시행하여 통과 여부를 확인합니다.
통과하였다면 다음 단계 설정으로 이동합니다.
(2) 고급
1) 캐시 전달 방법
간단함(권장)을 체크합니다.
이후 설정은 권장 사항만 체크하면 됩니다.
2) 기타
캐시 제한에서 로그인한 방문자에 대한 캐싱을 비활성화합니다.(권장)를 체크한 후 다음 항목을 체크합니다.
– GET 매개변수가 있는 페이지를 캐시하지 마세요. (URL 끝에?x=y가 있음),
– 페이지를 압축하여 방문자에게 더 빠르게 제공하세요. (권장),
– 캐시 재구축. 새 파일이 생성되는 동안 익명 사용자에게 슈퍼캐시 파일을 제공합니다. (권장),
– 304 브라우저 캐싱. 브라우저가 마지막으로 요청한 이후 페이지가 변경되었는지 확인하여 사이트 성능을 향상시킵니다. (권장)
3) 고급
다음과 같이 설정한 후 상태 업데이트 버튼을 클릭합니다.
– 동적 캐싱을 활성화합니다.
– 게시물이나 페이지가 게시되거나 업데이트되면 모든 캐시 파일을 지웁니다.
(권장)
4) 만료 시간 및 쓰레기 수거
하루에 여러 번 캐시를 삭제하면 서버에 부담을 줄 수가 있기 때문에 하루에 한 번만 캐시를 삭제하도록 만료 시간 및 쓰레기 수거에서는 캐시 시간 초과와 주기를 78000초로 입력한 후 만료를 변경 버튼을 클릭합니다.
(3) CDN
CDN을 사용하고 있다면 CDN 지원 활성화를 체크하고 CDN 기본 URL을 입력하면 되는데 Autoptimize에서 이미 입력하였다면 중복하여 입력할 필요는 없습니다.
(4) 콘텐츠
쉬운, 고급, CDN 설정을 마쳤다면 캐시 삭제 버튼을 클릭하여 캐시를 비워 줍니다.
(5) 나머지 항목 설정
프리로드, 플러그인, 디버그의 설정값은 기본으로 놔둡니다.
아바다 테마
아바다 테마에서도 워드프레스 속도 최적화 기능을 제공하고 있기 때문에 중복 설정된 항목이 있으면 이것을 비활성화하여야 합니다.
설정 변경은 Avada-Option-Performance에서 시행합니다.
1. 지연 로드
이미지와 아이프레임 지연 로드는 워드프레스를 선택합니다.
두 항목 모두 아바다를 선택할 경우 웹사이트의 레이아웃이 깨지는 현상이 발생하였습니다.
만약에 Autoptimize에서 이미지 지연 로드를 체크하였다면 아바다 테마에서는 None을 선택하여야 합니다.
2. 폰트와 이모티콘
font-face 랜더링은 Swap All을 선택합니다.
기본 폰트 미리 로드는 구글 폰트를 사용하면 Google Fonts를, 사용하지 않는다면 None을 선택하여야 합니다.
이모티콘은 사용 유무에 따라 설정을 선택합니다.
이모티콘을 사용하지 않는다면 워드프레스에서 이모티콘 스크립트를 제거하여 속도를 향상시킬 수 있습니다.
3. jQeury Migrate
jQuery Migrate 스크립트는 Disable을, 푸터에서 jQuery 로드와 푸터에서 스타일시트 로드는 Off를 선택합니다.
4. Gzip 압축
Gzip 압축 사용과 비디오 파사드 사용은 On를, 개체 캐시 삭제는 Off를 선택합니다.
5. 동적 CSS와 자바스크립트
Autoptimize, WP Super Cache에서 이미 설정을 하였기 때문에 Disable을 선택하고 나머지는 항목도 모두 Off를 선택하여야 합니다.
마치며…
워드프레스 속도 최적화 플러그인 설정을 마치고 구글 서치 콘솔에서 확인하였더니 적용하였었던 시점인 2023년 12월 27일 이후로 데스크톱과 모바일 모두 속도가 상승하였습니다.
이전에는 워드프레스 속도 최적화 플러그인 중에서 WP Rocket을 사용하였었습니다.
하지만 아바다 테마 하에서는 그리 만족할만한 웹사이트의 속도 향상을 느끼지 못하였습니다.
우연히 WP Rocket 대신 Autoptimize와 WP Super Cache를 조합하면 괄목할만한 성과를 얻을 수 있다는 것을 알게 되어 바로 적용하여 보니 생각 이상의 효과를 확인하였습니다.
실제 체감한 속도 또한 이전보다 훨씬 빠름을 인지할 수 있었습니다.
하지만 이런 설정이 모두에게 동일하게 적용되지는 않을 것입니다.
사용하는 서버 환경과 테마 등과 같이 변수가 많이 존재하기 때문입니다.
그렇더라도 웹사이트의 속도가 느리다면 적용하여 볼만한 가치는 충분하다 할 것입니다.
워드프레스의 속도 향상을 위하여 여러 경험을 통하여 내린 결론은 다음과 같습니다.
– 빠른 서버
– 빠른 테마.
– 폰트 최적화.
– 캐시 플러그인 사용.
빠른 서버는 비용 부담이 가중될 수 있으므로 선택이 쉽지 않을 수도 있지만 나머지 3가지 항목은 비용 부담에서 자유롭고 적용에 제약이 따르지 않으므로 그리 어려운 선택은 아닐 것입니다.
여러 캐시 플러그인을 시험하고 경험한 결과 아바다 테마 하에서 가장 빠른 속도 향상을 보인 것은 Autoptimize와 WP Super Cache를 함께 사용하였을 때였었습니다.
앞의 그래프가 그걸 증명하고 있다고 말할 수 있을 듯하고요.
참고로 캐시 플러그인 사용 시 네이버 웹마스터 도구에서 웹페이지 수집이 안되는 현상이 간혹 발생할 수도 있다고 하니 이 부분은 꼭 확인하시기 바랍니다.
그리고 WP Super Cache가 캐싱 시 소모되는 캐시 파일 용량이 게시 된 글(단어의 개수 600~1,000 정도)당 평균 1MB 정도입니다.
게시 된 글이 1,000개이면 1GB의 웹 하드 용량을 소모하게 된다는 건데 생각보다 소모되는 캐시 파일의 용량이 많은 것 같아서 관련 이슈를 확인하고 있지만 국내는 물론 해외에서도 이에 관한 이슈는 찾지 못하였습니다.
캐싱 시 소모되는 캐시 파일 용량이 저 정도가 기본인지는 모르겠으나 단순 계산으로 보았을 때 지나친 것 같아서 지속적으로 모니터링을 할 예정입니다.
혹여, 캐시 파일 용량 때문에 웹 하드 용량 부족을 겪을 경우에는 WP Super Cache를 삭제하면 됩니다.
2024년 01월 15일
워드프레스 속도 최적화 플러그인
워드프레스 속도 최적화 플러그인 중에서 Autoptimize, WP Super Cache 소개 및 설정 방법을 살펴볼까 합니다.
워드프레스로 웹사이트를 운영하려면 캐시 플러그인의 사용은 필연적입니다.
그중에서 Autoptimize와 WP Super Cache를 선택한 이유는 무료이면서도 탁월한 성능을 경험하였기 때문입니다.
두 플러그인을 설치하고 설정 시 중복되는 동일한 기능은 하나만 활성화하여야 합니다.
중복 설정을 하면 웹사이트의 레이아웃이 깨지거나 특정 기능이 비활성화되는 경우가 발생할 수 있습니다.
해당 플러그인의 설치와 설정은 아바다 테마 하에서 이루어졌습니다.
Autoptimize
Autoptimize는 HTML, CSS 및 자바스크립트 최적화 외에도 최신 워드프레스 웹사이트의 다른 측면인 이미지를 최적화하여 지연 로드를 시행하고 구글 글꼴을 최적화거나 이모티콘을 제거하는 등의 작업을 수행할 수 있는 기능도 포함되어 있어 HTTP/2를 사용하는 경우에도 웹사이트의 속도를 향상시킬 수 있습니다.
1. Autoptimize 설치
Autoptimize를 검색하고 설치 후 활성화 합니다.
2. Autoptimize 설정
(1) JS, CSS & HTML
자바스크립트 옵션 설정은 자바스크립트 코드 최적화하기와 자바스크립트 파일 수집하기를 체크합니다.
CSS 옵션 설정은 CSS 코드 최적화하기와 CSS 파일 수집하기 그리고 인라인 CSS 파일 수집하기까지 체크합니다.
HTML 옵션 설정은 HTML 최적화하기만 체크합니다.
CDN을 사용하고 있다면 CDN 기본 URL을 입력합니다.
Misc 옵션 설정은 수집된 스크립트/CSS를 정적 파일로 저장하기와 수집이 제외된 CSS 및 자바스크립트 파일을 최소화하기 그리고 404 폴백을 활성화하기 거기에 로그인한 편집자/관리자 최적화하기까지 체크합니다.
그리고 나서 Save Changes and Empty Cache 버튼을 클릭합니다.
(2) Images
이미지 최적화는 설정하지 않습니다.
이미지 최적화 플러그인을 따로 사용하던지 아니면 이미지를 미리 최적화하여 웹사이트에 업데이트 하는 것이 좋습니다.
그리고 이미지 지연 로드의 경우에는 캐시 플러그인이나 아바다 테마에서 지원하는 것을 사용하면 되므로 굳이 체크할 필요는 없습니다.
(3) Critical CSS
Critical CSS도 이미지 최적화와 마찬가지로 설정하지 않습니다.
(4) Extra
구글 폰트와 이모티콘 제거 여부만 체크하면 됩니다.
구글 폰트를 사용한다면 그대로 두기로 놔 두거나 그렇지 않으면 구글 폰트를 제거하기를 체크하고 Save Changes 버튼을 클릭합니다.
특히 폰트와 관련하여서 구글 폰트나 외부에서 업로드한 폰트를 사용하지 않는 것이 좋을 것 같습니다.
이런 경우 글 페이지 하나당 평균적으로 소모하는 트래픽의 양이 5MB가 넘어가는 바람에 외부에서 업로드한 폰트를 삭제하고 구글 폰트를 사용하는 대신 테마가 기본으로 제공하는 폰트로 변경한 다음 Autoptimize 옵션에서 구글 폰트를 제거하니까 지금은 페이지 하나당 소모하는 평균적인 트랙픽의 양이 1.2MB로 줄었습니다.
이모티콘을 사용하지 않으면 이모티콘 제거를 체크하여야 하지만 그렇지 않다면 체크하지 말아야 합니다.
이모티콘 사용 여부는 아바다 테마에서도 설정할 수 있습니다.
(5) Optimize More
함께 사용하면 좋은 테마나 플러그인을 소개하고 있습니다.
워드프레스 속도 최적화에 더 좋은 효과를 누리고 싶다면 추천하는 테마나 플러그인을 사용해보는 것도 좋은 선택이지 않을까 생각합니다.
(6) Pro Boosters
유료 버전 사용 안내입니다.
WP Super Cache
WP Super Cache는 동적 워드프레스의 웹사이트에서 정적 HTML 파일을 생성합니다.
정적 HTML 파일이 생성 된 후 웹 서버는 비교적 무겁고 복잡한 워드프레스 PHP 스크립트를 처리하는 대신 해당 파일을 다음과 같은 사용자에게 제공합니다.
– 로그인하지 않은 사용자.
– 웹사이트에 댓글을 남기지 않은 사용자.
– 또는 암호로 보호된 게시물을 읽지 않은 사용자.
방문자의 99%가 정적 HTML 파일을 받게 될 것이고 캐시된 파일 하나가 수천 번 제공될 수 있습니다.
다른 방문자에게는 방문에 맞는 사용자 지정 캐시 파일이 제공됩니다.
로그인이 되어 있거나 댓글을 남긴 경우에는 해당 세부 정보가 표시되고 캐시됩니다.
1. WP Super Cache 설치
WP Super Cache를 검색하고 설치 후 활성화 합니다.
한글화가 잘되어 있어서 설정하기가 쉽습니다.
2. WP Super Cache 설정
(1) 쉬운
1) 캐싱
캐싱 켜기(권장)를 체크하고 상태 업데이트 버튼을 클릭합니다.
2) 캐시 테스트
캐시 테스트를 시행하여 통과 여부를 확인합니다.
통과하였다면 다음 단계 설정으로 이동합니다.
(2) 고급
1) 캐시 전달 방법
간단함(권장)을 체크합니다.
이후 설정은 권장 사항만 체크하면 됩니다.
2) 기타
캐시 제한에서 로그인한 방문자에 대한 캐싱을 비활성화합니다.(권장)를 체크한 후 다음 항목을 체크합니다.
– GET 매개변수가 있는 페이지를 캐시하지 마세요. (URL 끝에?x=y가 있음),
– 페이지를 압축하여 방문자에게 더 빠르게 제공하세요. (권장),
– 캐시 재구축. 새 파일이 생성되는 동안 익명 사용자에게 슈퍼캐시 파일을 제공합니다. (권장),
– 304 브라우저 캐싱. 브라우저가 마지막으로 요청한 이후 페이지가 변경되었는지 확인하여 사이트 성능을 향상시킵니다. (권장)
3) 고급
다음과 같이 설정한 후 상태 업데이트 버튼을 클릭합니다.
– 동적 캐싱을 활성화합니다.
– 게시물이나 페이지가 게시되거나 업데이트되면 모든 캐시 파일을 지웁니다.
(권장)
4) 만료 시간 및 쓰레기 수거
하루에 여러 번 캐시를 삭제하면 서버에 부담을 줄 수가 있기 때문에 하루에 한 번만 캐시를 삭제하도록 만료 시간 및 쓰레기 수거에서는 캐시 시간 초과와 주기를 78000초로 입력한 후 만료를 변경 버튼을 클릭합니다.
(3) CDN
CDN을 사용하고 있다면 CDN 지원 활성화를 체크하고 CDN 기본 URL을 입력하면 되는데 Autoptimize에서 이미 입력하였다면 중복하여 입력할 필요는 없습니다.
(4) 콘텐츠
쉬운, 고급, CDN 설정을 마쳤다면 캐시 삭제 버튼을 클릭하여 캐시를 비워 줍니다.
(5) 나머지 항목 설정
프리로드, 플러그인, 디버그의 설정값은 기본으로 놔둡니다.
아바다 테마
아바다 테마에서도 워드프레스 속도 최적화 기능을 제공하고 있기 때문에 중복 설정된 항목이 있으면 이것을 비활성화하여야 합니다.
설정 변경은 Avada-Option-Performance에서 시행합니다.
1. 지연 로드
이미지와 아이프레임 지연 로드는 워드프레스를 선택합니다.
두 항목 모두 아바다를 선택할 경우 웹사이트의 레이아웃이 깨지는 현상이 발생하였습니다.
만약에 Autoptimize에서 이미지 지연 로드를 체크하였다면 아바다 테마에서는 None을 선택하여야 합니다.
2. 폰트와 이모티콘
font-face 랜더링은 Swap All을 선택합니다.
기본 폰트 미리 로드는 구글 폰트를 사용하면 Google Fonts를, 사용하지 않는다면 None을 선택하여야 합니다.
이모티콘은 사용 유무에 따라 설정을 선택합니다.
이모티콘을 사용하지 않는다면 워드프레스에서 이모티콘 스크립트를 제거하여 속도를 향상시킬 수 있습니다.
3. jQeury Migrate
jQuery Migrate 스크립트는 Disable을, 푸터에서 jQuery 로드와 푸터에서 스타일시트 로드는 Off를 선택합니다.
4. Gzip 압축
Gzip 압축 사용과 비디오 파사드 사용은 On를, 개체 캐시 삭제는 Off를 선택합니다.
5. 동적 CSS와 자바스크립트
Autoptimize, WP Super Cache에서 이미 설정을 하였기 때문에 Disable을 선택하고 나머지는 항목도 모두 Off를 선택하여야 합니다.
마치며…
워드프레스 속도 최적화 플러그인 설정을 마치고 구글 서치 콘솔에서 확인하였더니 적용하였었던 시점인 2023년 12월 27일 이후로 데스크톱과 모바일 모두 속도가 상승하였습니다.
이전에는 워드프레스 속도 최적화 플러그인 중에서 WP Rocket을 사용하였었습니다.
하지만 아바다 테마 하에서는 그리 만족할만한 웹사이트의 속도 향상을 느끼지 못하였습니다.
우연히 WP Rocket 대신 Autoptimize와 WP Super Cache를 조합하면 괄목할만한 성과를 얻을 수 있다는 것을 알게 되어 바로 적용하여 보니 생각 이상의 효과를 확인하였습니다.
실제 체감한 속도 또한 이전보다 훨씬 빠름을 인지할 수 있었습니다.
하지만 이런 설정이 모두에게 동일하게 적용되지는 않을 것입니다.
사용하는 서버 환경과 테마 등과 같이 변수가 많이 존재하기 때문입니다.
그렇더라도 웹사이트의 속도가 느리다면 적용하여 볼만한 가치는 충분하다 할 것입니다.
워드프레스의 속도 향상을 위하여 여러 경험을 통하여 내린 결론은 다음과 같습니다.
– 빠른 서버
– 빠른 테마.
– 폰트 최적화.
– 캐시 플러그인 사용.
빠른 서버는 비용 부담이 가중될 수 있으므로 선택이 쉽지 않을 수도 있지만 나머지 3가지 항목은 비용 부담에서 자유롭고 적용에 제약이 따르지 않으므로 그리 어려운 선택은 아닐 것입니다.
여러 캐시 플러그인을 시험하고 경험한 결과 아바다 테마 하에서 가장 빠른 속도 향상을 보인 것은 Autoptimize와 WP Super Cache를 함께 사용하였을 때였었습니다.
앞의 그래프가 그걸 증명하고 있다고 말할 수 있을 듯하고요.
참고로 캐시 플러그인 사용 시 네이버 웹마스터 도구에서 웹페이지 수집이 안되는 현상이 간혹 발생할 수도 있다고 하니 이 부분은 꼭 확인하시기 바랍니다.
그리고 WP Super Cache가 캐싱 시 소모되는 캐시 파일 용량이 게시 된 글(단어의 개수 600~1,000 정도)당 평균 1MB 정도입니다.
게시 된 글이 1,000개이면 1GB의 웹 하드 용량을 소모하게 된다는 건데 생각보다 소모되는 캐시 파일의 용량이 많은 것 같아서 관련 이슈를 확인하고 있지만 국내는 물론 해외에서도 이에 관한 이슈는 찾지 못하였습니다.
캐싱 시 소모되는 캐시 파일 용량이 저 정도가 기본인지는 모르겠으나 단순 계산으로 보았을 때 지나친 것 같아서 지속적으로 모니터링을 할 예정입니다.
혹여, 캐시 파일 용량 때문에 웹 하드 용량 부족을 겪을 경우에는 WP Super Cache를 삭제하면 됩니다.
2024년 01월 15일