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

日記 , 7 Comments

このエントリーをはてなブックマークに追加

WordPressには、ソースコードを整形表示してくれるシンタックスハイライトのプラグインがいくつかあります。有名どころだと、Syntax Highlighter for WordPressや、SyntaxHighlighter Evolved、WP-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秒程度になりました。完璧とは言えませんが、それなりの効果も見られたので、ひとまずこれで様子を見てみようと思います。

参考サイト

関連性の高い記事

  1. エラー対応：Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes with query…
  2. PHPのarray()を[]に置換する方法
  3. Twitter Bootstrap v3.xのグリッドシステムのカラム数を変更する
  4. CSSで選択中のラジオボタンに続く要素を太字にする
  5. Themifyの日付表示を英語から日本語したときのメモ