シンタックスハイライター系プラグインとライブラリ型5種のサイト表示速度を比較

2018年11月24日

Syntax Highlighter:ソースコードを表示するプラグインとライブラリ

WordPressでどのsyntax highlighterにしようか悩んでいるときに
・プラグインを入れると重くなる
・○○○というハイライターが重いので別のプラグインに乗り換えた
・JSとCSSライブラリを利用したものは特に軽量
との情報をたびたび見かけました。実際表示速度がプラグインとライブラリでどの程度変わるのか、プラグインによってどれほど違うのが計測してみました。

表示速度の比較対象一覧

それぞれの特徴は以下にまとめております。

https://insilico-notebook.com/wp-highlighter-list/

測定方法

Webページの読み込未速度の比較には以下のサービスを利用しました。

PageSpeed Insight:Google提供のWebパフォーマンス測定ツール
GTmetrix:表示速度と改善点を出力するサイト

環境
サーバー:mixhost スタンダード
ディスク容量-SSD 150GB
CPU, ホストサーバーCPU:仮想3コア, Xeon 24コア48スレッド
メモリ, ホストサーバーメモリ:4GB, 256GB
Wordpressテーマ:cocoon

Cocoonは標準でHighlight.jsが実装されているので厳密にはハイライター未導入とは言えませんが、差分で遅延具合を測ることにしました。

結果

PageSpeed InsightGTmetrix
モバイルパソコンPage Speed GradeYslow Grade
ハイライター未導入82.51008976
Prismjsライブラリ821008976
Prism Highlighter811008976
Crayon Highlighter76.5998875
Mivhak Highlighter71.5998775

GTmetrixのPage Speed GradeとYslow Gradeは、それぞれGoogleとYahooのサイト速度計測サービスの結果を数値化したものです(PageSpeed Insightの結果を総合評価したのがGtmetrixのPageSpeed Grade)。いずれも2回測定した平均値を結果としました。

モバイルで見ると確かにライブラリ型が早く、次いで軽量のプラグイン、重めのプラグインという順序で表示速度のスコアが悪くなるのが確認できます。ただPCで考えるとほとんど差がないようです。

コードを参照する場合ほとんどの方がPCからのアクセスと思います。モバイルとPCのアクセスの割合によってはプラグインでもそこまで過敏に気にする必要はないかもしれません。