그냥 돈주고 테마 사서 설치하고 플러그인 사서 설치한다고 워드프레스가 이상적인 퍼포먼스를 낼 수 있다고 생각하면 큰 오산입니다. 각각의 조합마다 서로 간섭이 일어날 수 있기 때문에 아무리 좋은 플러그인을 사용한다고 해도, 상당한 실험과 연구를 거치지 않으면 제 성능을 낼 수 없습니다.
오늘 테스트해본 조합은 다음과 같습니다.
- 테마: Ashe Pro
- 캐쉬 플러그인: WP Super Cache
- JS, CSS 옵티마이징: Autopitimize
- 구글폰트 관리: OMGF
- WebP 전환: Performance Lab
Ashe Pro
여행 블로그 등 각종 취미 블로그를 운영하는 데에 적합하도록 만들어진 테마입니다. 시각적으로 매력적인 요소와 감칠맛있는 색상 조합으로 감성적으로 만족스러운 디자인을 제공합니다. 2022년 전후로 해서 상당히 유명했던 테마입니다.
최근에는 퍼포먼스 등 효율성면에서 기능이 더 뛰어난 테마들이 등장하면서, 인기를 조금씩 잃어가는 상황입니다. 그럼에도 불구하고, 잘 조율하면 저렴하고 괜챦은 테마가 될 수 있는 매우 훌륭한 테마입니다.
유료 버전의 단점
무료 Ashe Pro를 사용해보면 괜챦은 퍼포먼스를 보여줍니다만, 막상 유료버전으로 진입하면, 테마가 보다 복잡은 요소들을 포함하고 있기 때문에 요즈음 미니멀리스트 테마로 잘나가는 GeneratePress와 같은 성능이 느껴지지 않습니다. 코드의 최적화와 효율도 조금 떨어지는 것 같습니다. 또한 추가적인 스크립트, 스타일, 외부 리소스 등을 담고 있기 때문에 실제 사용감이 만족스럽지 못 할 수 있습니다.
그럼에도 여러가지 플러그인들을 잘 조합해서 사용한다면 이러한 테마의 단점을 어느 정도 극복할 수 있습니다.
해결책
- 캐쉬 플러그인을 통한 최적화: WP Rocket, W3 Total Cache, 또는 Autoptimize를 통해 CSS, JavaScript, and HTML을 최적화하여 캐쉬에 저장하고 사이트의 속도를 개선할 수 있음.
- 이미지 최적화: Smush, ShortPixel 등의 이미지 최적화 플러그인을 통해 로딩시간 감축.
- Content Delivery Network(CDN): Cloudflare 나 MaxCDN의 서비스를 사용하여 전세계 독자들에게 보다 빨리 컨텐츠를 제공할 수 있음.
- 데이타베이스 최적화: WP-Optimize 같은 데이타베이스 최적화 플러그인으로 정기적으로 데이타베이스를 최적화하고 청소하는 것으로 퍼포먼스를 유지하는 데 도움이 됨.
- 좋은 질의 호스팅: 신뢰할 수 있는 호스팅 업체를 선정하여, 필요한 경우 더 상위 호스팅 서비스로 업그레이드 하는 것도 도움이 됨. 호스팅 업체를 바꾸는 것이 큰 차이를 보여주는 경우가 있음.
- 플러그인 최소화: 꼭 필요한 플러그인이 아니면 사용하지 말고 삭제할 것. 사이트 속도를 저하시킴.
- 테마 최적화: 테마 내에 사용하지 않는 기능들은 비활성화하여 부하를 줄임.
WP Rocket도 좋겠지만, 유료버전이 아닌 무료로 최대한 해결하기 위해 WP Super Cache 와 Autoptimize의 조합으로 캐쉬를 해결하고, 구글폰트 로드 블락킹 문제를 해결하기 위해 OMGF를, 또한 WebP 이미지 사용을 위해 Performance Lab을 이용하기로 결정하고 테스트했습니다.
워드프레스 플러그인 비교
WP Rocket
Pros:
- 셋업과 사용이 간편한 종합 캐싱 솔로션.
- 페이지 캐싱, 브라우저 캐싱, 데이타베이스 최적화, 구글폰트 최적화
- HTTP requests의 크기를 줄이기 위해, CSS와 JavaScript를 최적화
- 페이지 로딩 시간을 줄이기 위해 이미지 레이지 로딩 기능 제공
Cons:
- 다 좋은데 비용이 발생함.
Best For:
- 올인원 솔루션을 원하고 비용을 지불할 의사가 있는 유저들에게 좋음.
- 쉬운 인터페이스와 잘 정리된 설명서를 원하는 초보 유저들에게 좋음.
WP Super Cache
Pros:
- 무료이면서 널리 사용됨.
- 정적 HTML 파일을 생성하여 제공하는 기능으로 서버 부하를 현격히 줄임.
- 경험있는 사용자들에게 보다 상세한 세팅을 제공.
Cons:
- 인터페이스가 WP Rocket에 비해 조금 어려움.
- 퍼포먼스를 높이려면 세팅을 직접 살펴보고 정리해야함.
Best For:
- 성능 좋은 무료 캐싱 솔루션을 찾는 유저
- 직접 세팅을 하는 데에 거부감이 없는 경험있는 유저
Autoptimize
Pros:
- CSS, JavaScript, 그리고 HTML 최적화에 초점을 맞춤.
- 스타일과 스크립트를 조합하고 미니파이하고 캐싱함.
- 구글 폰트를 옵티마이즈 할 수 있으며, emojis를 제거하고, 이미지 레이지 로딩을 할 수 있음.
- WP Super Cache 와 함께 잘 작동함.
Cons:
- 풀페이지 캐싱을 제공하지 않음
- 최선을 결과를 이끌어내려면 여러가지 시행착오를 통해 최적의 세팅값을 찾아야함.
Best For:
- 이미 캐싱솔루션이 있으나, 추가적인 CSS/Javascript 최적화가 필요한 유저
- 특정 최적화 부분만 해결하고자하는 유저
여기서 나는 유료이면서 토탈 솔루션인 WP Rocket 보다는 WP Super Cache와 Autoptimize 및 OMGF구성으로 무료 구성을 해보았습니다.
아래는 영문 세팅 항목에 대해 Yes/No로 세팅값을 정리해놓은 것입니다. 그대로 따라하신 후, 테스트해보고 자신의 상황에 맞게 바꾸시면 되겠습니다.
WP Super Cache Configuration
- Enable Caching:
- Enable Caching: Yes
- Cache Delivery Method: Simple (Recommended)
- Cache Restrictions:
- Enable caching for all visitors: Yes
- Disable caching for visitors who have a cookie set in their browser: No
- Disable caching for logged in visitors: Yes (Recommended)
- Don’t cache pages with GET parameters: Yes
- Compress pages so they’re served more quickly to visitors: Yes (Recommended)
- Cache rebuild: Yes (Recommended)
- Cache HTTP headers with page content: Yes
- 304 Browser caching: Yes (Recommended)
- Make known users anonymous: No
- Advanced Settings:
- Enable dynamic caching: No (unless you have a specific need for it)
- Mobile device support: No (unless your theme/plugin specifically requires it)
- Remove UTF8/blog charset support from .htaccess file: No (only if needed)
- Clear all cache files when a post or page is published or updated: Yes
- Extra homepage checks: Yes (Recommended)
- Only refresh current page when comments made: No (optional)
- List the newest cached pages on this page: Optional (for monitoring purposes)
- Coarse file locking: No (it will slow down your website)
- Late init: No (only if necessary)
Autoptimize Configuration
설치와 기본 설정
- Install and Activate Autoptimize:
- Navigate to Plugins > Add New, search for Autoptimize, install, and activate it.
- Basic Settings:
- Navigate to Settings > Autoptimize.
- Check the following options:
- Optimize JavaScript Code?: Yes
- Optimize CSS Code?: Yes
- Optimize HTML Code?: Yes
- Click Save Changes and Empty Cache.
- Extra Settings:
- Expand the Extra tab.
- Check the following options:
- Remove emojis: Yes (optional)
- Remove query strings from static resources: Yes (optional)
- Images Settings:
- Expand the Images tab.
- Enable Lazy-load images? if desired (this defers loading of images until they are in the viewport).
- Click Save Changes and Empty Cache.
JavaScript 옵션
- Optimize JavaScript Code?: Yes
- Aggregate JS-files?: Yes. This combines all your JavaScript files into one, reducing the number of HTTP requests.
- Do not aggregate but defer?: No. Aggregating JS files usually works better, but deferring is an option if you have issues.
- Also defer inline JS?: Yes. This helps in making inline JavaScript non-render-blocking.
- Exclude scripts from Autoptimize:Leave this blank unless you find specific scripts causing issues. Then, add them here (e.g., whatever.js, my_var).
CSS 옵션
- Optimize CSS Code?: Yes
- Aggregate CSS-files?: Yes. This combines all your CSS files into one.
- Also aggregate inline CSS?: Yes. This will also include inline CSS.
- Generate data: URIs for images?: No. Only enable if you have small background images you want to include in CSS.
- Eliminate render-blocking CSS?: Yes. This is a critical setting for improving page load speed. You might need to configure Critical CSS separately.
- Inline all CSS?: NoGenerally not recommended due to increased HTML size.
- Exclude CSS from Autoptimize:The default exclusions are fine. Add more if specific CSS files cause issues (e.g.,
admin-bar.min.css, dashicons.min.css, wp-content/cache/, wp-content/uploads/).
HTML 옵션
- Optimize HTML Code?: Yes.Minifies your HTML to reduce page load times.
- Also minify inline JS/CSS?: Yes. This ensures all inline scripts and styles are also minified.
- Keep HTML comments?: NoRemoving comments can help reduce page size slightly.
CDN Options
- CDN Base URL: Leave this blank unless you are using a CDN. If using a CDN, enter the base URL here.Misc Options
- Save aggregated script/css as static files?: Yes. This improves performance by saving the aggregated files.
- Minify excluded CSS and JS files?: Yes. This ensures that even excluded files are minified, unless they are already minified.
- Enable 404 fallbacks?: YesThis can help prevent broken sites if Autoptimized files are removed.
- Also optimize for logged in editors/ administrators?: No. Uncheck this to avoid issues when editing posts/pages.
- Enable configuration per post/page?: No. Leave unchecked unless you need specific settings per post/page.
- Disable extra compatibility logic?: No. Leave this enabled to ensure maximum compatibility with various plugins.
WP Super Cache와 Autoptimize의 간섭을 최소화 하는 법
- Clear Caches Regularly:
- After making changes to your settings or content, clear the caches in both WP Super Cache and Autoptimize to ensure changes are properly reflected.
- WP Super Cache: Settings > WP Super Cache > Contents > Delete Cache
- Autoptimize: Settings > Autoptimize > Save Changes and Empty Cache
- Exclude Specific Files if Necessary:
- If you experience issues with specific JavaScript or CSS files, you can exclude them from Autoptimize optimization.
- Navigate to Settings > Autoptimize and expand JS, CSS & HTML options.
- Add problematic files to the exclusion list under Exclude scripts from Autoptimize or Exclude CSS from Autoptimize.
- Exclude Cache Directories:Ensure that WP Super Cache does not cache the Autoptimize cache directory by excluding
/wp-content/cache/autoptimize/if necessary.
- Test Your Site:
- Thoroughly test your site after configuring both plugins to ensure everything works correctly. Check for issues with site functionality, layout, or performance.
- Use tools like Google PageSpeed Insights, GTmetrix, or Pingdom Tools to analyze site performance before and after changes.
기타 플러그인 정리
Performance Lab과 Autoptimize는 각각 약간 다른 이미지 레이지 로딩 기능을 제공합니다. Performance Lab은 아직 실험단계에 있습니다만, 더 뛰어난 성능을 보일 수도 있습니다. 두 플러그인 중 하나에서만 이미지 레이지 로딩을 활성화하는 것이 좋겠습니다.
또한 OMGF는 구글 폰트 관리에 초점을 맞춘 거의 자동화된 플러그인인데 반해, Autoptimize도 해당 기능을 제공합니다. 만약 OMGF에서 구글 폰트를 관리한다면 Autoptimize에서는 관련기능 leave as it is로 설정해놓으시면 됩니다.