신택스 하이라이터계 플러그인과 라이브러리형 5종의 사이트 표시 속도를 비교
Syntax Highlighter: 소스 코드를 표시하는 플러그인 및 라이브러리
WordPress에서 어떤 syntax highlighter로 만들려고 할까 고민할 때
・플러그인을 넣으면 무거워진다
・○○○라는 하이라이터가 무겁기 때문에 다른 플러그인으로 환승했다
· JS와 CSS 라이브러리를 이용한 것은 특히 경량
라는 정보를 자주 보았습니다.실제 표시 속도가 플러그인과 라이브러리에서 어느 정도 바뀌는지, 플러그인에 따라 얼마나 다른 것이 계측해 보았습니다.
표시 속도의 비교 대상 일람
- 하이라이터 미도입
- Prismjs(라이브러리)
- Prism Syntax Highlighter(Prismjs 라이브러리의 플러그인 버전)
- Crayon Syntax Highlighter(플러그인)
- Mivhak Syntax Highlighter(플러그인)
각각의 특징은 이하에 정리하고 있습니다.
https://insilico-notebook.com/wp-highlighter-list/
측정방법
웹 페이지의 로드 미속도 비교에는 다음 서비스를 이용했습니다.
PageSpeed 인사이트: Google 제공 웹 실적 측정 도구
GTmetrix: 표시속도와 개선점을 출력하는 사이트
환경
서버: mixhost 표준
디스크 공간 - SSD 150GB
CPU, 호스트 서버 CPU: 가상 3코어, Xeon 24코어 48스레드
메모리, 호스트 서버 메모리: 4GB, 256GB
Wordpress 테마:고치
Cocoon은 표준으로 Highlight.js가 구현되어 있으므로 엄밀하게는 하이라이터 미도입이라고는 할 수 없지만, 차분으로 지연 상태를 측정하기로 했습니다.
결과
| PageSpeed 인사이트 | GTmetrix | |||
| モ バ イ ル | 컴퓨터 | Page Speed Grade | Yslow Grade | |
| 하이라이터 미도입 | 82.5 | 100 | 89 | 76 |
| Prismjs 라이브러리 | 82 | 100 | 89 | 76 |
| Prism Highlighter | 81 | 100 | 89 | 76 |
| Crayon Highlighter | 76.5 | 99 | 88 | 75 |
| Mivhak Highlighter | 71.5 | 99 | 87 | 75 |
GTmetrix의 Page Speed Grade와 Yslow Grade는 각각 Google과 Yahoo의 사이트 속도 계측 서비스의 결과를 수치화한 것입니다(PageSpeed Insight의 결과를 종합 평가한 것이 Gtmetrix의 PageSpeed Grade).모두 2회 측정한 평균값을 결과로 했다.
모바일에서 보면 확실히 라이브러리형이 빠르고, 이어 경량의 플러그인, 무거운 플러그인이라고 하는 순서로 표시 속도의 스코어가 나빠지는 것을 확인할 수 있습니다.다만 PC로 생각하면 거의 차이가 없는 것 같습니다.
코드를 참조하는 경우 대부분이 PC로부터의 액세스라고 생각합니다.모바일 및 PC 액세스의 비율에 따라 플러그인이라도 거기까지 과민하게 신경 쓸 필요는 없을 수도 있습니다.