Autoptimize를 이용한 워드프레스 사이트 속도 향상 방법

2019년 5월 11일

Autoptimize (오톱티마이즈) 는 워드프레스 최적화를 위한 인기있는 플러그인입니다. WP-Rocket이나 WP Super Cache와 같은 플러그인과는 달리, Autoptimize는 최적화 만을 위한 플러그인입니다. 이는 페이지나 오브젝트 캐싱 기능을 포함하고 있지 않기 때문에, 이 점은 미리 고려하셔야만 합니다. Kinsta의 “반드시 사용해야 되는 (must-use)” 캐싱 플러그인을 포함해, Autoptimize만이 제가 대부분의 페이지에 600 ms 혹은 그 이하로 페이지 로드 시간을 단축하기 위해 사용하는 플러그인입니다. 아래에 제 Autoptimize 세팅을 공유하고, 워드프레스 사이트 속도 향상을 위해 어떻게 이 플러그인을 사용해야 하는지에 대해서 알아보겠습니다.

Decrypto.net의 속도 테스트 결과. 사이트 자체는 200 ms 의 속도로 열리지만 구글 애널리틱스가 400 ms 를 추가하고 있음.

Autoptimze 환경설정 사용하기

Autoptimize는 워드프레스 저장소 (repository) 에서 무료로 다운로드 할 수 있습니다. 플러그인을 활성화 한 뒤, 세팅 메뉴로 가보시기 바랍니다.

그러면 다음 4가지 탭을 보게 되실 것입니다.

  1. JS, CSS & HTML
  2. Images
  3. Extra
  4. Optimize More!

JS, CSS & HTML

Autoptimize의 “JS, CSS & HTML” 메뉴는 워드프레스 사이트의 기본 설정을 확인하고 변경할 수 있는 곳입니다.

JavaScript Options

  • Optimize JavaScript Code (자바스크립트 코드 최적화)  – 불필요한 여백을 제거하여 자바스크립트 파일을 최소화합니다.
  • Aggregate JS-files (JS-files 통합하기) – 여러개의 자바스크립트 파일을 하나의 파일로 통합합니다.
  • Also aggregate inline JS (인라인 JS 통합하기) – 인라인 JS를 추출하고 통합합니다.
  • Force JavaScript in <head> (자바스크립트를 <head> 항목에 넣기) – 자바스크립트 파일을 웹사이트 헤더상에 로드합니다.
  • Exclude scripts from Autoptimize (Autoptimize로부터의 스크립트 제외하기) – 최적화 기능으로 부터 제외할 자바스크립트 파일 목록입니다.
  • Add try-catching wrapping (트라이-캐치 랩핑 추가하기) –  집계된 자바스크립트를 트라이-캐치 블락과 함께 포장하여 하나의 공격적인 스크립트로 인한 실패의 확률을 줄여줍니다.

“JavaScript Options” 메뉴에서, 가장 위쪽의 두 가지 옵션만 체크할 것을 추천해 드리는데요. Aggregating inline JS 를 선택하실 경우 여러분 캐시의 사이즈가 컨트롤 할 수 없을 정도로 불어나기 때문에, 이에 대한 전문적인 지식이 있으신 경우에만 선택하시길 바랍니다. Force JavaScript in <head> 의 경우에도 렌더를 차단하기 때문에 방문자들의 로드 속도가 느려지는 경우가 발생할 수 있죠. Try-catching wrapping을 활성화 하는 경우, 공격적인 자바스크립트 파일과 관련하여 문제를 해결할 수 있지만, 이에 따른 성능의 저하가 있을 수 있습니다. Try-catch wrapping이 활성화된 상태에서만 웹사이트가 제대로 로드 되는 경우라면, 차리리 문제가 되는 자바스크립트를 찾아서 고치는 편이 훨씬 좋습니다.

CSS Options

  • Optimize CSS Code (CSS 코드 최적화) – 불필요한 여백을 삭제하여 CSS 파일을 최소화 합니다.
  • Aggregate CSS-files (CSS-files 통합하기) – 여러개의 CSS 파일을 하나의 파일로 통합합니다.
  • Also aggregate inline CSS (인라인 CSS 통합하기) – 인라인 CSS를 추출하고 통합합니다.
  • Generate data: URIs for images (데이터 생성: 이미지를 위한 URI) – 작은 이미지들을 CSS로 옮겨 서비스 리퀘스트 수를 줄입니다.
  • Inline and Defer CSS (CSS 인라인 및 디퍼) – 중요한 “above the fold” CSS와 전제 CSS 파일을 인라인 합니다.
  • Inline all CSS (모든 CSS 인라인) – 서버 리퀘스트를 줄이기 위해 모든 CSS를 HTML로 보냅니다.
  • Exclude CSS from Autoptimize (Autoptimize에서 CSS 제외) – 최적화 대상에서 특정 CSS 파일을 제외시킵니다.

“CSS Option” 메뉴에서, 역시나 가장 위쪽의 두 가지 옵션만 체크할 것을 추천해 드리는데요. 위의 JS 세팅과 비슷하게, 위의 두 CSS 최적화 옵션은 CSS를 최소화시키고 stylesheets를 하나의 파일로 결합시킵니다. 제 웹사이트에서 저는 또한 “Inline all CSS” 옵션을 사용하는데요. 제 웹사이트는 아주 최적화가 잘 되어 있고 제 거의 모든 포스트가 100% 텍스트 기반이기 때문에, CSS를 인라인하여 HTML로 보내게 되면 단 한 번의 서버 리퀘스트로 페이지 전체 로드가 가능해집니다. 저는 또한 Cloudflare의 “모든것 캐시화 하기” (cache everything) 기능을 사용하여 Cloudflare의 엣지에서 싱글 리퀘스트 HTML 페이지들을 캐시화 합니다.

HTML Options

  • Optimize HTML Code (HTML 코드 최적화) – 불필요한 여백을 제거해 HTML 아웃풋을 최소화 시킵니다.
  • Keep HTML comments (HTML 명령어 유지하기) – 최적화 과정 중 HTML 명령어를 유지합니다.

“HTML Options” 메뉴는 거의 설명이 다 되어 있는데요. 저는 “Optimize HTML Code” 만 선택 할 것을 권유해 드립니다. 대부분의 경우, HTML 명령어는 개발 목적으로만 사용되는데요, 이는 여러분 페이지의 소스 코드를 부풀릴 가능성이 있습니다. 따라서, “Keep HTML comments” 란을 체크하지 않는 것이 현명합니다.

CDN Options

“CDN Options” 메뉴는 여러분의 고정 자산을 위해 커스텀 CDN URL을 지정할 수 있는 란인데요. 만약 CDN을 사용하지 않으시거나, Cloudflare와 같은 프록시 스타일의 CDN을 사용하신다면 이 박스에 특별히 입력을 할 필요가 없습니다.

Cache Info

“Cache Info (캐시 정보)” 메뉴는 Autoptimize 플러그인의 일반적인 정보를 보여줍니다. 이곳에서 Autopitmize의 캐시 폴더를 볼 수 있고, 플러그인의 사용 상태, 최적화된 파일의 수와 용량 등을 확인할 수 있습니다.

Misc Options

저는 “Misc Options (기타 사항)” 란의 모든 박스를 체크할 것을 추천해 드립니다.

Images

Autoptimize의 “Images” 탭은 이미지와 관련하여 최적화 할 수 있는 공간입니다. “Images” 메뉴에는 단지 두 가지 옵션만이 있습니다.

  1. Optimize images (이미지 최적화)
  2. Lazy-load images (레이지 로드 이미지)

“Optimize images” 옵션은 여러분으로 하여금 워드프레스를 ShortPixel의 이미지 최적화 서비스와 연결할 수 있도록 합니다. 심지어 Autoptimize내의 링크를 이용해 가입한다면, ShortPixel 서비스를 할인 받을 수도 있습니다. “Lazy-load images” 옵션은 여러분 웹사이트의 자바스크립트에 추가로 작은 정보를 포함시켜, 원하는 시점에 이미지를 로드할 수 있도록 해주는데요. 여러분의 워드프레스 사이트에 이미지가 많이 포함되어 있다면 레이지-로딩은 여러분의 페이지 로드 시간을 아주 크게 줄여줄 것입니다. 저 같은 경우에 이 두 가지 옵션이 딱히 제게 이익을 가져다 주지는 못하기 때문에 체크를 하지는 않았는데요. 저는 또한 Cloudflare의 Polish 서비스를 이용하는데, 이는 자동으로 제 이미지들에 WEBP 버전을 사용하고 최적화 합니다. 마지막으로, 제 웹사이트는 딱히 많은 이미지를 포함하고 있지 않은데요, 이러한 것들을 고려했을 시, 딱히 추가로 자바스크립트 코드를 포함시키는게 이익이 아니라는 판단이 들었습니다.

Extra

Autoptimize의 “Extra” 탭에서는 여러분의 워드프레스 사이트의 성능을 향상시키기 위해서 추가로 최적화 기능을 설정할 수 있습니다. “Extra” 메뉴는 다음의 것들을 포함하고 있습니다.

  • Google Fonts (구글 폰트)
  • Remove emojis (이모지 제거)
  • Remove query strings from static resources (고정 자산에서 쿼리 스트링 제거)
  • Preconnect to 3rd party domains (써드 파티 도메인으로의 프리컨넥트)
  • Async Javascript files (자바스크립트 파일 비동기통신)
  • Optimize YouTube videos (유투브 비디오 최적화)

여러분이 워드프레스에서 구글 폰트를 사용하고 있다면, 최고의 성능을 위해서 이것 저것 최적화 테스트를 해볼 것을 권해드립니다. 제 웹사이트를 위해서 저는 “Remove emojis” 와 “Remove query strings from static resources” 란을 체크했는데요. 저는 이모지를 사용하지 않기 때문에 관련된 JS와 CSS를 제거하는 것이 페이지 로드 시간에 도움이 되었습니다. 쿼리 스트링은 종종 새로운 버전의 고정 자산을 분류하는데 사용되는데요. 대부분의 경우, URL에서 쿼리 스트링을 제거 하는 것이 더 빠른 로드에 도움이 되지는 않지만, GTmetrix와 Pingdom 성능 점수를 향상 시킬 수는 있습니다.

HTML (preconnect, 프리컨넥트) 는 HTTP 리퀘스트가 최초의 서버에 이르기 전 브라우저로 하여금 DNS, TCP 그리고 TLS 니고시에이션을 설정하도록 하는데 사용되는데요. HTML preconnect를 사용함으로서, 페이지 로드 타임을 줄일 수 있습니다. 여러분의 워드프레스 사이트가 외부 소스로 부터 자산을 가져오게 된다면 사용할 것을 추천해 드리는데요. 예를 들어서, 저는 구글 애널리틱스를 사용하는데, 이는 https://www.google-analytics.comhttps://stats.g.doubleclick.net에 자산을 요구하게 됩니다. 이 두 도메인을 HTML preconnect 리스트에 포함함으로써, 웹 브라우저는 구글 서버로 미리 접속하게 되는 것이죠.

또한 Autoptimize는 특정 자바 스크립트 파일을 비동기로 로드할 수 있도록 하는데, 이는 JS 코드가 실행 되는 동시에 페이지의 HTML이 렌더링 되도록 합니다. 만약 JS가 비동기로 디퍼나 로드 되지 않으면, 이는 HTML의 렌더링을 차단하고 리퀘스트의 초기 시점에서 로드 되게 됩니다. “Extra” 메뉴의 마지막 항목은 유투브 최적화에 관한 것인데요, 여러분 웹사이트에 유투브 비디오를 포함시키지 않는 이상 무시하셔도 괜찮습니다.

Optimize More

Autoptimize의 “Optimize More” 메뉴는 대부분의 경우 딱히 관심을 기울이지 않아도 괜찮습니다. 이 페이지는 WP-Rocket, WP-Engine, ShortPixel 등의 광고를 포함하고 있는데요. 위의 과정들만 따랐어도, 이미 여러분의 사이트는 훨씬 빠른 로드 시간을 보여줄 것입니다. 다만, 추가적인 것들을 원하신다면, Autoptimize의 추천 페이지를 확인하셔도 되겠습니다.

결론

말씀드렸다시피, 워드프레스 사이트를 최적화 하는데 크게 비용이 들지는 않습니다. 대부분의 워드프레스 사용자들은 WP-Rocket과 같이 비싼 최적화 플러그인을 사용할 필요가 없죠. 무료 플러그인인 Autopitmize는 HTML, CSS 그리고 JS을 훌륭하게 최적화 할 수 있습니다. Autoptimize는 또한 탑 티어 웹 호스트인 Kinsta와 함께 사용될 시, 여러분의 워드프레스 사이트의 성능을 다음 단계로 끌어올릴 수 있는 힘을 지니고 있습니다.


궁금한게 있으세요?

트위터이메일을 통해 연락주시기 바랍니다.