Happist.com이 현재(2017년 5월) 사용하고 있는 Newspaper7 테마에서 비쥬얼 컴포우져가 속도에 어느 정도 미치는 지 살펴보겠습니다.
우리나라에 워드프레스 테마 관련 글들이 많지 않아 처음 접근하는 분들은 고생을 하기 마련인데요. (저도 무수히 많은 시행착오를 거쳤습니다. ) 이런분들에게 조금이라도 도움이 되었으면 하는 마음에 간략 공유합니다.

Nwewspaper7테마에 대해서는 [워드프레스 Tips] 베스트 뉴스 매거진 테마인 Newspaper 7의 6개월 사용기포스팅을 참고하세요.

1. Visual Composer(비주얼 컴포저)가 무엇일까?

Visual Composer(비주얼 컴포저)는 워드프레스에서 페이지와 포스팅을 쉽게 만들 수 있도록 도와주는 플러그인입니다.

단독으로 구입 시는 34달러라는 비교적 높은(/?) 가격에 판매되고 있으며 많은 테마에서 이 Visual Composer(비주얼 컴포저)를 기본 페이지 빌더 플러그인으로 채택해서 판매하고 있습니다. 이렇게 테마에 끼워 팔리는 Visual Composer(비주얼 컴포저)가 급격히 증가하면서 Visual Composer(비주얼 컴포저)는 가장 많이 사용하는 페이지 빌더 플러그인이 되었습니다.

그런데 테마에 딸려오는 Visual Composer(비주얼 컴포저)는 독립적으로 사업데이트가 되지 않습니다. 개인에게 Visual Composer(비주얼 컴포저) 소유권이 없어서 테마 업데이트 시 딸려오는 Visual Composer(비주얼 컴포저)로 매뉴얼로 업데이트를 해야 합니다.

저는 Nespaper7 테마가 업데이트 되어 관련 파일을 받으면 Visual Composer(비주얼 컴포저)를 지우고 다시 테마와 함께 받은 Visual Composer(비주얼 컴포저) 설치 파일로 다시 설치해 줍니다.
불편하지만 이렇게라도 하지 않으면 계속 Visual Composer(비주얼 컴포저)를 업데이트하라는 메세지를 받아야 합니다.

2. Visual Composer(비주얼 컴포저)를 사용하면 속도가 어느 정도 느려질까?

일반적으로 Visual Composer(비주얼 컴포저)를 사용하면 속도가 느려진다고 이야기합니다. 저의 경우도 느려진다고 알고 있고 막연히 그렇게느끼고 있었습니다.

사이트 접근 속도를 어떻게 빠르게 할까 고민할 시 늘 빠지지않는 주제가 바로 이 Visual Composer(비주얼 컴포저) 비적용 방안입니다.
이번에도 모바일 등 속도를 빠르게 하기 위한 고민을 많이 했는데요. 이 고민중의 많은 부분이 이 Visual Composer(비주얼 컴포저)를 빼고 가는 방안이었습니다.

그래서 몇가지 케이스로 나누어 테스트를 해 보았습니다.
첫번째는 Visual Composer(비주얼 컴포저) 비적용 + 최근 글 15개 보여주기
두번째는 Visual Composer(비주얼 컴포저) 비적용 + 홈페이지 메인을 특정 카테고리(Case study 카테고리)로 보여주기
세번째는 Visual Composer(비주얼 컴포저) 사용

속도라는 게 사람마다 기대치가 달라서 빠르다 느리다 이야기하기가 애매하기 때문에 비교치 기준을 명확히 세우고 정량적인 수치를 측정, 비교해서 조금은 객관화 해 보겠습니다.

2.1. 테스트 조건 설정 및 측정

속도 테스트는 WEBPAGETEST를 사용했으며 테스트 기준은 지역은 서울 EC2, 통신망은 케이블에서 3회 측정했습니다.

1. 비교치를 설정하기 위해 네이버를 측정했습니다.
   naver.com은 Load Time 2.269s First byte 0.358s

2. happist.com에서의 측정은 아래와 같은 결과를 얻었습니다.

   • Visual Composer(비주얼 컴포저) 비적용+최근글로 15개 보여주기 적용 시
     Load Time 3.767s First byte 0.867s

   • Visual Composer(비주얼 컴포저) 적용+별도 카테고리형식으로 홈 보여주기 시
     Load Time 3.441s First byte 0.671s

   • Visual Composer(비주얼 컴포저) 적용 시
     Load Time 3.789s First byte 0.859s

수치로 적어 놓고 보니 아주 큰 차이가 나지는 않네요..
어제 테마를 업그레이드했고 이어서 Visual Composer(비주얼 컴포저)도 최신 버젼으로 업데이트했는데 이 업데이트가 성능이 더 좋아진 것같다는 생각이 듭니다. (막연한 느낌)

2.2. Visual Composer(비주얼 컴포저) 비적용+최근글로 15개 보여주기

첫번째로 검토한 것은 Visual Composer(비주얼 컴포저) 비적용 + 최근 글 15개 보여주기입니다.

이 옵션은 몇개를 보여주는냐에 따라 속도 차이가 납니다. 5개정도만 보여주겠다는 옵션에서는 비교적 빠른 속도를 보여주었지만 제가 원하는 15개정도로 늘리니 로딩 속도가 조금 느려집니다.

아래 테스트 결과는 15개를 구현했을 시 사이트 메인 및 속도 측정 결과입니다.

Load Time 3.767s First byte 0.867s

2.2. Visual Composer(비주얼 컴포저) 비적용 + 홈페이지 메인을 특정 카테고리(Case study 카테고리)로 보여주기

이번에는 Visual Composer(비주얼 컴포저)를 사용하지 않으며서 조금 폼나게 홈페이지 메인을 Case study 카테고리로 보여주는 방식입니다.

이 점이 나름 강점은 Newspaper7에서 제공하는 Big Grid라는 디자인 요소를 사용할 수 있어서 메인 페이지가 다소 짜임새 있게 보여줄 수 있으며, 무한 로딩( Infinite loading)을 지원해서 계속해서 컨텐츠를 보여줄 수 있습니다.

지금까지 작업한 결과는 Big Grid에서 보여주는 리스트와 아래 일괄 리스트가 서로 겹쳐 중복 컨텐츠가 표현된다는 점입니다. 그리고 특정 카테고리만 보여줄 수 있는 것은 매우 아쉬운 점입니다.

Load Time 3.441s First byte 0.671s

2.3. Visual Composer(비주얼 컴포저) 적용

이번에는 논란의 중심에 서 있는 Visual Composer(비주얼 컴포저) 적용한 경우입니다.

속도만 충분히 난다면 계속 사용하고 싶은 옵션인데요.

Load Time 3.789s First byte 0.859s

3. 마치며 – 아무래도 Visual Composer(비주얼 컴포저)를 계속 써야할 듯

세가지 케이스를 검토해 보았는데요. 물론 투철한 실험정신에 입각해 몇십회씩 테스트를 했으면 좋겠지만 그럴 여력이 되지않어 3~4번의 테스트만으로 결론을 냅니다.

Visual Composer(비주얼 컴포저)를 적용하면 확실히 무거워 집니다. 따라 속도도 느려집니다. 그런데 그 무거워지고 속도가 느려지는 속도가 어느 정도냐에 따라 판단을 달리할 수 있습니다.

Visual Composer(비주얼 컴포저)를 사용하지 않으면 3.5초 전후의 속도를 보여주는 것 같습니다. 반면에 Visual Composer(비주얼 컴포저)를 적용하면 3.9초 전후의 속도를 보여줍니다.

아마 Visual Composer(비주얼 컴포저) 사용 유무에 따라 0.3~0.4초정도의 차이는 나는 것 같습니다. 이 정도 속도의 차이는 큰 것일까요? 우선 직관적인 대답은 Yes입니다. 단순 계산만으로도 10% 정도 속도가 저하되었다고 해석할 수 있습니다.

네이버에 비교하면 67% 속도가 저하되었다고 계산 결과는 보여주고 있습니다. 1.5초정도 느리죠.

그러나 Visual Composer(비주얼 컴포저)를 사용해도 3초대(비록 후반이지만)에 로딩이 되고 제대로 컨테츠를 보여줄수 있다는 점에서 조금 늦드라도 사용하는게 맞겠다는 최종 판단을 합니다.