W3 Total Cache 플러그인은 워드프레스 사이트를 최적화하는 캐쉬 플러그인 입니다. 워드프레스 사이트의 속도가 느린 경우 일차적으로 캐쉬 플러그인의 도움을 받을 수 있습니다.
페이지 속도 측정
페이지가 느리다. 빠르다. 이 개념은 상대적인 것이라 정량적으로 측정할 수 있는 수치 데이터가 있어야 개선되었는지 판단할 수 있습니다. 일반적으로 PageSpeed Insights 통해서 페이지 성능을 측정하고 문제가 되는 부분을 확인할 수 있습니다.
W3 Total Cache 설정하고 PageSpeed Insights를 통해서 성능이 개선되었는지 확인하는걸 추천합니다.
W3 Total Cache 설치
기존에 다른 Cache 플러그인이 설치되어 있으면 해당 플러그인 비활성화 또는 삭제 후 플러그인 메뉴에서 W3 Total Cache 검색 후 설치합니다.
W3 Total Cache 설정
성능(Performance) 메뉴를 클릭하여 W3 Total Cache 설정합니다.
설정 가이드 활용
W3 Total Cache 설정 가이드를 통해서 사이트를 설정할 수 있습니다. 성능 > 설정 가이드 메뉴를 클릭하고 [다음] 버튼을 눌러 설정을 시작합니다.
페이지 캐시
페이지 캐시는 W3 Total Cache의 가장 중요한 기능입니다. 이것만 사용해도 엄청난 이득을 볼 수 있습니다. 페이지 속도를 크게 향상시키는 것 외에도 서버의 부하를 줄여 더 많은 방문자에게 서비스를 제공할 수 있습니다. WordPress 및 W3 Total Cache를 사용한 SSD 호스팅을 적극 권장합니다.
[페이지 캐시 테스트] 버튼을 눌러 테스트를 시작합니다.
일반적으로 페이지 캐시는 [디스크: 향상]을 권장합니다. 실제로 아래와 같이 가장 효율이 좋기 때문에 해당 항목을 선택하고 [다음] 버튼을 클릭합니다.
데이터베이스 캐시
데이터베이스 캐시는 데이터베이스 쿼리 결과를 저장하여 서버가 데이터를 더 빠르게 검색할 수 있도록 하여 웹 사이트 속도를 향상시킵니다.
[데이터베이스 캐시 테스트] 버튼을 눌러 테스트를 시작합니다.
일반적으로 데이터베이스 캐시는 [디스크]를 권장합니다. 만약 Memcached를 사용한다면 해당 항목이 활성화 되어 있고 해당 항목을 선택하면 됩니다. 가장 효율 좋은 [디스크]를 선택 후 [다음] 버튼을 클릭합니다.
객체 캐시
객체 캐시는 워드프레스 캐싱API를 활용하여 객체를 캐시에 저장하여 데이터베이스 호출 수를 줄여줄여 사이트 성능을 개선합니다.
[객체 캐시 테스트] 버튼을 눌러 테스트를 시작합니다.
일반적으로 객체 캐시는 [디스크]를 권장합니다. 만약 Memcached를 사용한다면 해당 항목이 활성화 되어 있고 해당 항목을 선택하면 됩니다. 가장 효율 좋은 [디스크]를 선택 후 [다음] 버튼을 클릭합니다.
브라우저 캐시
브라우저 캐시는 브라우저에서 JavaScript, CSS, 리소스와 같은 파일을 저장하여 사용하도록 설정합니다.
[브라우저 캐시 테스트] 버튼을 눌러 테스트를 시작합니다.
브라우저 캐시를 [활성화]하고 [다음] 버튼을 클릭합니다.
이미지 최적화
압축률이 좋은 WebP를 사용하도록 png, jpeg 포맷을 WebP로 변환합니다. 저는 Convert for media 플러그인을 사용하고 있기에 해당 항목은 비활성화 합니다. 만약 별도 변환 도구가 없다면 해당 항목을 활성화 해도 됩니다.
지연 로드
이미지를 필요할 때 로그 하도록 설정하여 초기 로딩 속도에 영향을 주지 않도록 합니다.
설정 완료
이제 설정 가이드를 통한 설정이 완료되었습니다. 일반 설정 및 각 항목 별 상세 설정을 통해 추가적으로 더 설정해보겠습니다.
일반 설정
성능 > 일반 설정 메뉴로 이동합니다.
페이지 캐시 활성화
다음과 같이 페이지 캐시를 활성화하고 상세 설정을 설정합니다. 만약 memcached를 사용하면 해당 값을 사용합니다.
Advanced Settings 또는 페이지 캐시 메뉴를 클릭하여 상세 설정합니다.
축소 활성화
다음과 같이 축소를 활성화 하고 상세 설정을 설정합니다. 축소란 공백, 주석, 줄 바꿈 등 불필요한 문제를 제거하여 HTML, CSS, Java Script 파일의 크기를 줄여 브라우저가 다운로드 해야 하는 데이터 양을 줄임으로써 웹 페이지의 로드 시간을 줄일 수 있습니다. 또한 축소한 스크립트 파일을 지연실행으로 실행 시켜 웹 페이지의 로드 시간을 줄일 수 있습니다.
축소 모드를 자동으로 할 경우 사이트 기능이 정상 동작하지 않을 수 있습니다. 따라서 수동으로 설정하고 PageSpeed Insights를 통해 분석한 결과를 보고 필요한 CSS 및 Java Script 파일을 추가합니다.
Advanced Settings 또는 축소 메뉴를 클릭하여 상세 설정합니다.
Java Script 축소 및 결합 설정을 할 수 있습니다. 일반적으로 워드프레스의 경우 대부분의 플러그인이 -min 형태로 제공하기 때문에 축소의 효과가 크지 않을 수 있습니다. 아래와 같이 설정 후 PageSpeed Insights 항목에서 Java Script 항목으로 느린 부분이 있으면 링크 주소를 복사 후 아래와 같이 추가합니다.
CSS 축소 및 결합 설정을 할 수 있습니다. 일반적으로 워드프레스의 경우 대부분의 플러그인이 -min 형태로 제공하기 때문에 축소의 효과가 크지 않을 수 있습니다. 아래와 같이 설정 후 PageSpeed Insights 항목에서 CSS 항목으로 느린 부분이 있으면 링크 주소를 복사 후 아래와 같이 추가합니다.
데이터베이스 캐시
다음과 같이 데이터베이스 캐시를 활성화합니다. 만약 memcached를 사용하면 해당 값을 사용합니다.
객체 캐시 활성화
다음과 같이 객체 캐시를 활성화합니다. 객체 캐싱은 자주 액세스하는 데이터베이스 쿼리와 복잡한 데이터 구조를 메모리에 저장하여 동적 콘텐츠를 생성하는 데 필요한 처리 시간이 최소화되어 페이지 로딩 시간을 줄일 수 있습니다.
사용자 경험
이미지 지연 로드 및 이모티콘 비활성화를 체크합니다.
마치며
설정 완료 후 캐시 초기화하고 PageSpeed Insights를 통해서 얼마나 성능이 좋아졌는지 확인해야 합니다. 그리고 수시로 성능 저하가 없는지 체크하고 필요 시 재 설정 해야 합니다.