워드프레스 최적화 – 플러그인 WP Super Cache과 Autoptimize로 속도 개선

워드프레스(WordPress)를 운영한다는 것은 최적화와 속도의 싸움인 것 같습니다. 개인적으로 플러그인에 의존하는 것을 좋아하지는 않습니다. 하지만 플러그인을 설치함으로써 얻는 게 더 많다면 기꺼이 설치할 의향이 있습니다.

워드프레스의 속도가 확실하게 빨라지는 최적화 플러그인 WP Super Cache와 Autoptimize를 설치 및 설정해보겠습니다.


WP Super Cache

wp super cache 플러그인 캡쳐

플러그인 추가하기에서 WP Super Cache를 검색 후 설치 및 활성화를 해주세요.

 

플러그인 리스트에서 wp super cache setting 표시 캡쳐

플러그인 리스트에서 WP Super Cache 아래의 Settings를 클릭하여 설정 화면으로 이동합니다. 좌측 메뉴의 설정 > WP Super Cache를 클릭하셔도 됩니다.

 

wp super cache setting 캡쳐 화면

Caching에서 Caching On (Recommended)를 선택하시고 아래의 [Update Status]를 클릭해서 상태를 업데이트해 주세요. 그리고 Advanced 탭으로 이동합니다.

Advanced 탭에서 많은 항목을 볼 수 있는데요. 뒤에 (Recommended)가 붙어 있는 항목에 모두 체크를 해줍니다. 저는 아래 리스트에 모두 체크했습니다.

Disable caching for logged in visitors. (Recommended)
Compress pages so they’re served more quickly to visitors. (Recommended)
Cache rebuild. Serve a supercache file to anonymous users while a new file is being generated. (Recommended)
304 Not Modified browser caching. Indicate when a page has not been modified since it was last requested. (Recommended)
Extra homepage checks. (Very occasionally stops homepage caching) (Recommended)

 

wp super cache update status 버튼 부분 캡쳐

그리고 제일 아래에 [Update Status] 버튼을 클릭해서 상태를 업데이트해 줍니다. WP Super Cache 설정은 간단하게 끝났습니다.

 


Autoptimize

autoptimize 플러그인 캡쳐

플러그인 추가하기에서 Autoptimize를 검색 후 설치 및 활성화를 해주세요.

 

플러그인 리스트에서 autoptimize 설정 표시 캡쳐

플러그인 리스트에서 WP Super Cache 아래의 설정을 클릭하여 설정 화면으로 이동합니다. 좌측 메뉴의 설정 > Autoptimize를 클릭하셔도 됩니다.

 

autoptimize 설정 화면 캡쳐

JS, CSS & HTML 탭에서 JavaScript Options, CSS Options, HTML Options를 볼 수 있는데요. 각각 Options 아래 첫 항목에 있는 Optimize JavaScript Code? / Optimize CSS Code? / Optimize HTML Code? 를 체크해 줍니다.

 

Save Changes and Empty Cache 버튼 부분 캡쳐

그리고 [Save Changes and Empty Cache]를 클릭합니다.

 

상단 바에서 autoptimize 메뉴가 펼쳐진 모습 캡쳐

Autoptimize 플러그인을 설치하고 나면 관리자로 로그인 시 상단에서 Autoptimize 메뉴가 추가된 것을 볼 수 있습니다. 마우스 커서 오버 시 위 사진과 같이 캐시 정보를 확인할 수 있습니다. Delete Cache를 클릭해서 쌓여있는 캐시를 삭제할 수도 있습니다.

 


워드프레스 속도 측정

위 두 가지 플러그인 설정이 모두 끝났으니 실제 속도가 얼마나 빨라졌는지 확인해 보겠습니다. 먼저 구글 페이지 스피드 인사이트(PageSpeed Insights)에서 측정했습니다.

pagespeed insigths에서 측정한 플러그인 설정 전 모바일 점수 36점 pagespeed insigths에서 측정한 플러그인 설정 전 데스크톱 점수 73점

플러그인 적용 전 속도 측정 화면입니다. 모바일 36점, 데스크톱 73점입니다.

 

pagespeed insigths에서 측정한 플러그인 설정 후 모바일 점수 58점pagespeed insigths에서 측정한 플러그인 설정 후 데스크톱 점수 95점

플러그인 적용 후 속도 측정 화면입니다. 모바일 58점, 데스크톱 95점입니다. 엄청나게 좋아진 것을 수치로 확인할 수 있습니다.

 

GTmetrix에서 측정해보았습니다.

gtmetrix에서 측정한 플러그인 설정 전 점수 C 79%

플러그인 적용 전 모습입니다. 페이지 스피드 스코어가 C로 79%입니다. 모든 페이지를 불러오는 데 걸린 시간은 4.2초입니다.

 

gtmetrix에서 측정한 플러그인 설정 후 점수 B 80%

플러그인 적용 후 모습입니다. B로 80%입니다. 1% 올랐습니다. 페이지 로딩 시간은 3.3초로 0.9초가 빨라졌습니다. 페이지 사이즈도 줄어든 모습을 볼 수 있습니다.

 

Pingdom에서 측정한 결과입니다.

pingdom에서 측정한 플러그인 설정 전 점수 71점, 1.51초  

플러그인 적용 전입니다. 71점에 1.51초입니다.

 

pingdom에서 측정한 플러그인 설정 후 점수 78점, 0.94초

플러그인 적용 후입니다. 78점에 0.94초입니다. 리퀘스트 값이 73에서 46까지 줄어든 모습을 볼 수 있습니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다