シンタックスハイライター系プラグインとライブラリ型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/
測定方法
Webページの読み込未速度の比較には以下のサービスを利用しました。
PageSpeed Insight：Google提供のWebパフォーマンス測定ツール
GTmetrix：表示速度と改善点を出力するサイト
環境
サーバー：mixhost スタンダード
ディスク容量-SSD 150GB
CPU, ホストサーバーCPU：仮想3コア, Xeon 24コア48スレッド
メモリ, ホストサーバーメモリ：4GB, 256GB
Wordpressテーマ：cocoon
Cocoonは標準でHighlight.jsが実装されているので厳密にはハイライター未導入とは言えませんが、差分で遅延具合を測ることにしました。
結果
| PageSpeed Insight | 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のアクセスの割合によってはプラグインでもそこまで過敏に気にする必要はないかもしれません。