Crayon Syntax Highlighterでページ読み込み速度が遅くなる現象を改善する


WordPressには、ソースコードを整形表示してくれるシンタックスハイライトのプラグインがいくつかあります。有名どころだと、Syntax Highlighter for WordPressや、SyntaxHighlighter EvolvedWP-Syntaxと言ったところでしょうか。このブログを運営するにあたり、当然ながら、プラグインの選定を行った訳ですが、デザイン面で好みであったことと、更新頻度が多かったことから、Crayon Syntax Highlighterというプラグインを選び、現在も使い続けています。

こまごまとした設定ができるCrayon Syntax Highlighterを、大変気に入ってはいるのですが、最近、ページの表示速度が遅くなる現象に悩まされています。

例えば、空行を含めて900行くらいある記事(Searchプラグインを使ってCakePHPに検索を実装する)の場合、レイテンシが9秒前後とかなり大きく、結果、ページの表示が遅い状況です。Crayon Syntax Highlighterをプラグイン設定画面でオフにすると、レイテンシが1秒程度になることから、Crayonがページの表示に影響していることは間違いなさそうです。

プラグインを変更することも検討したのですが、まずは現状でできることはないかを調査しました。その結果、それなりの速度改善が見られたので、その方法をメモしておきます。

Crayon Syntax Highlighterの速度改善

Crayon Syntax Highlighterで、ソースコードをハイライトさせるには、ショートコードや、<pre>タグ、<code>タグを用いる等、様々な手段が用意されています。このブログではミニタグを用いています。
他のプラグインからの移行等も考慮して、様々なパターンが用意されているのでしょうが、ふと、これが仇となって、遅くなっているのではないかと思い、プラグインの設定画面のタグの項目(以下のキャプチャを参考)で、ミニタグ以外を全てオフにしてみました。

crayon-syntax-highlighter-performance-improvement-01

ソースコードのハイライト記法を統一し、使っていないタグをオフにする

その結果、レイテンシが4秒程度になりました。完璧とは言えませんが、それなりの効果も見られたので、ひとまずこれで様子を見てみようと思います。

参考サイト