WP-ROCKET과 AWS CLOUDFRONT를 이용한 워드프레스 속도 최적화 작업

워드프레스 제작 상담을 하다보면 어디서 듣고 오셨는지 “워드프레스는 느리지 않나요?” 라는 질문을 많이 듣게 됩니다. 실제로 워드프레스로 제작된 사이트중에서 엄청 느린 사이트들이 많이 있는 것은 사실입니다. 하지만 그 원인이 전부 워드프레스에 있는 것은 아닙니다. 캐시플러그인설치, 이미지최적화, 적절한 플러그인사용 등으로 최적화된 워드프레스는 결코 느리지 않습니다. 국내에서 제작된 사이트들이 느린 이유는 아래처럼 다양합니다.

  1. 기술력이 없는 웹에이전시들의 무분별한 플러그인 사용
  2. 페이지빌더의 과도한 사용과 에러 방치
  3. 이미지 최적화 작업 무시
  4. 캐시 플러그인의 잘못된 설정 또는 미설치
  5. 잘못된 개발방식과 CSS 코드 사용
  6. 과도한 페이지 용량과 리퀘스트 숫자

그 외에 비용 절감을 위해 사양이 너무 낮은 호스팅을 사용하거나 해외 호스팅을 사용하는 경우도 있습니다. 하지만 이것은 개발자의 잘못이 아니라 일부 클라이언트의 문제일 수도 있는부분도 있어서 제외했습니다. 페이지 사이즈나 호스팅 서버 스펙에 따라 다르기는 하지만 보통 속도최적화를 하지 않은 워드프레스 사이트는 평균 로딩속도가 3~6초 사이가 나옵니다. 3~6초라는 시간은 웹서비스에 있어서 느리다는 느낌을 받을수 있는 로딩타임입니다. 구글, 아마존, 네이버 같은 일류 대기업들은 600ms (0.6초) 이하로 맞출려고 속도최적화에 엄청난 노력을 하고 있습니다. 보통의 웹사이트는 보통 1~2초 정도 되야지 고객들이 불평을 하지 않습니다.

그럼 최적화된 워드프레스의 속도는 어느 정도 나올까요?
WP-SUPER CACHE, WP FASTEST CACHE, W3 TOTAL CACHE, WP-ROCKET 같은 캐시플러그인과 EWWW IMAGE OPTIMIZER 를 이용해 이미지 최적화만 제대로 해도 1~3초 정도의 로딩타임을 만들어낼수 있습니다. 그 외 CDN 설정, 서버설정, 페이지사이즈 조정, 브라우저캐시사용을 하면 더욱 빠른 속도를 만날수 있습니다. 크몽이나 여러 경로를 통해서 다른 곳에서 개발한 사이트가 너무 느려서 의뢰를 주시는 분들이 많아지고 있습니다. 그런 사이트 작업을 하다보면 정말 사용을 못할 정도로 느린 경우도 있습니다. 하지만 그런 사이트도 속도높이기 작업을 하면 어느 정도 만족할 결과를 얻는 경우가 대다수입니다. 저는 캐시 플러그인은 WP-ROCKET 을 사용해서 작업을 해드리고 있고, 원하시면 AWS CLOUDFRONT 나 CLOUDFLARE 를 이용해 CDN 설정도 해드리고 있습니다.

[wpsm_ads2]

워드프레스 속도 측정

제 홈페이지 최적화 작업 내용에 대해서 간략히 설명을 드리면, 현재 스마일보이랩은 AWS EC2 T2.MICRO 를 사용하고 있습니다.
이것은 가장 낮은 서버 스펙을 가지고 있어, 다소 프로덕션 사이트로 이용하기에 부족해도 로딩 속도가 0.5초~3초 사이가 나오고 있습니다.
이 서버에 개발용테스트사이트가 5~6개정도 같이 돌아가고 있는 것에 비해 속도가 잘나오는 편이네요.
핑덤이나 구글 페이지스피드 인사이트의 결과를 보면 최적화 점수대가 괜찮습니다.

스마일보이랩 측정 페이지

핑덤 툴 바로가기

핑덤툴 측정결과핑덤툴 측정결과

핑덤툴은 웹사이트의 로딩속도를 측정할때 제일 많이 사용되는 도구입니다. 웹사이트 속도를 측정하고자 하시면 한번 이용해보시면 좋을것 같네요. 현재 점수를 살펴보면 퍼포먼스 및 최적화 점수는 96점의 A 등급으로 우수한편입니다. 그리고 로드 타임은 3.03초라고 나오는데, 측정지가 미국 캘리포니아이기 물리적인 거리가 있어서 높게 나오는데, 한국으로 치면 1초대로 보시면 됩니다. 중요한 것은 FASTER THAN 53% 인데, 측정한 사이트들 중 훨씬 빠른 편에 속해있다는 내용입니다. 페이지사이즈는 1메가 이하면 괜찮은데 보통 100~500K 정도로 맞추는 게 좋다고 봅니다. 리퀘스트는 44회로 양호한편입니다.

구글페이지스피드인사이트 데스크탑 측정결과

구글 페이지스피드 인사이트 데스크탑 측정결과

There are no ways to buy Bitcoin with PayPal directly. Read this article to learn how to buy Bitcoin with PayPal: https://sites.google.com/site/buybitcoinswithpaypal/
구글페이지스피드인사이트 모바일 측정결과

구글페이지스피드인사이트 모바일 측정결과

페이지 스피드 인사이트 바로가기

구글페이지스피드 인사이트 ( Google pagespeed insights )도 웹사이트의 최적화를 측정하는데 가장 많이 이용되는 도구입니다.
보통 모바일은 70점 이상, 데스크탑은 90점 이상이 괜찮다고 보시면 됩니다. 그런데 이 점수는 높을 수록 좋기는 하지만 이 점수가 높다고 해서 엄청 좋거나 속도가 엄청 빠르다는 것을 의미하지는 않습니다. 많은 개발자분들이 이 점수에 대해서 맹신하지 말라고 이야기를 하고 있기도 합니다. 그래서 저도 빨간색으로 나오는 필수적으로 해야되는 최적화 작업만 진행하고 나머지는 그냥 그대로 두는 편입니다. 현재 모바일은 69점, 데스크탑은 88점인데, 이 정도면 괜찮은 편입니다. 물론 둘다 99점이면 좋겠지만, 그 점수를 만들기 위해 투자해야되는 비용과 시간을 고려하면 그렇게 안하는 것을 추천합니다.

[wpsm_ads1]

[wpsm_ads2]

CDN 사용

그리고 저는 현재 CDN ( Content Delivery Network ) 으로 AWS CLOUDFRONT ( 클라우드프론트) 를 이용하고 있습니다.
CDN 은 이미지나 CSS, JS 파일 같이 정적인 파일을 접속지역에서 가장 가까운 서버에 캐싱을 해둠으로서  페이지 로딩 속도를 높여주는 것입니다. 국내용 사이트는 굳이 CDN을 사용할 필요가 없다는 분들도 많이있습니다. 하지만 저같이 T2.MICRO 같은 낮은 사양의 서버를 사용하시는 분들은 CDN을 사용하면 꽤 괜찮은 효과를 얻을수 있습니다. CDN 도 풀타입 (PULL TYPE)과 푸쉬타입 (PUSH TYPE)이 있는데, 풀타입보다 푸쉬타입이 설정이 복잡한  반면 속도가 더 빠릅니다. 하지만 저는 풀타입으로만 사용을 해도 속도가 만족스럽네요.

파이어폭스나 크롬을 사용하면 아래와 같이 로드타임을 측정해주는 플러그인이 있습니다.
이것을 이용하면 페이지의 로드타임을 볼수 있는데, 스마일보이랩은 0.5~2초 사이가 나오네요. 그리고 좀더 좋은 서버를 사용하거나 페이지 사이즈 조정 및 최적화 작업을 하면 속도는 더 빨라질 수 있어보입니다. 이 결과들을 보면 워드프레스 사이트는 결코 느리지 않다는 것을 알수 있습니다. 지금 설명드린 방법외에도 최적화에 대한 내용이 많이 있습니다. 캐쉬플러그인 설정 방법, 이미지최적화 방법 등에 대해서는 다른 레퍼런스글을 통해 정리를 해서 게재를 할예정입니다. 느린 워드프레스 사이트를 운영하고 계셔서 최적화가 필요하신 분들은 의뢰를 주시면 최고의 퍼포먼스를 낼수 있도록 도와드리겠습니다.

파이어폭스 – app.telemetry Page Speed Monitor

크롬 – Page load time

Write a comment