当サイトでは記事内のソースコードのハイライト表示に「Enlighter – Customizable Syntax Highlighter」というプラグインを使用しています。
先日CSSを最適化していた時に気が付いたのですが、初期設定だとソースコードが存在しないページであってもEnlighter用のCSSが読み込まれるようです。
約80KBほどのファイルですが、使わないページでは読み込まないでほしい…
調べるとDRIという設定で必要な場合だけCSSを読み込むようにできました。
DRI設定をオンにするとコードが存在する記事でのみCSSが読み込まれます。
関連記事
【プラグインについてはコチラ】
[WP]記事内のソースコードを見やすくハイライト表示するプラグイン「Enlighter」の設定、使い方とテーマ一覧！
この記事の目次
EnlighterのCSSを必要な場合だけ読み込む
Enlighter専用のCSSは約80KB
Chromeの機能で使用していないCSSを確認すると、Enlighter専用のCSSがファイルの中でそこそこの容量を占めている割に使用率が少ないことが分かります。
関連記事
Enlighterには13種類ほどのハイライトテーマ（色合い）があり、各言語どのような色合いでハイライトするか、それぞれのテーマごとにCSSスタイルが記述されているのでCSSだけで容量は約80KBと意外と大きいです。
テーマの一つGodzillaだけでも74個CSSの記述がある
ソースコードが存在するページでこのプラグイン専用のスタイルシートが読み込まれるのは納得できますが、実はEnlighterは初期設定だとソースコードを全く使用していないページでもこのスタイルシートが読み込まれてしまいます。
そこで次に紹介するDRI設定でソースコードのブロックが存在する場合にのみ、このスタイルシートを読み込むように設定します。
「必要のないファイルは読み込まない」がサイト高速化の定石です。
Dynamic Resource Invocation(DRI)とは？
Dynamic Resource Invocationは直訳すると動的リソースの呼び出しとなります。
機能についてはプラグインの設定画面に説明がありますので、そちらの原文と日本語訳を用意しました。
Optimization
The Dynamic-Resource-Invocation features adds a small javascript observer (~1KB) to your website which invokes the EnlighterJS assets loading (styles+scripts) automatically when codeblocks with matching CSS selectors have been found. It also works with the dynamic content extension as well as with third party optimization plugins.
【Chromeによる日本語訳】
このDynamic-Resource-Invocation機能により、Webサイトに小さなJavaScriptオブザーバー（〜1KB）が追加され、CSSセレクターが一致するコードブロックが見つかったときにEnlighterJSアセットの読み込み（スタイル+スクリプト）が自動的に呼び出されます。また、動的コンテンツ拡張機能やサードパーティの最適化プラグインとも連携します。
難しく書かれていますが、ソースコードが存在している記事でのみEnlighterのスタイルシートとスクリプトを呼び出すようにする機能です。
この機能を使用するために1KBまでのJavascriptが使用されますとのこと。
DRI機能の有効化
有効化するのはすごく簡単です。
「Enlighter – Customizable Syntax Highlighter」をインストールしたあと、
管理画面左メニュー ＞ Enlighter ＞ Options
に進んでDRI設定をオンにするだけです。
DRI機能の有効化
「Dynamic Resource Invocation (DRI)」のEnableをクリックしてをONにするだけです。
有効化されるとボタンが青色に変化します。
説明は以下の通りでした。
To optimize your website load-time it`s possible to load the EnlighterJS library only if codeblocks are used on the current page. In case it`s enable, the plugin will observer it`s invocation (visual editor, shortcodes, markdown).
【Chromeによる日本語訳】
ウェブサイトの読み込み時間を最適化するために、現在のページでコードブロックが使用されている場合にのみEnlighterJSライブラリを読み込むことができます。有効になっている場合、プラグインはその呼び出し（ビジュアルエディター、ショートコード、マークダウン）を監視します。
DRIの動作確認
ボタンをONにしただけでは不安なので上手く動作しているか確認してみました。
ソースコードを全く記事内に使用していないページを開き、ChromeでCSSを確認するとEnlighterに使われているCSSが読み込まれなくなりました。
DRI機能により必要が無いページでCSSが読み込まれなくなる
これでソースコードを使用していないページが少し軽量になりました。
この機能はデフォルトでONでも良いのでは？
Javascriptを使うので安定動作の為にOFFになっているのかな？
CSSを削減してみる―失敗
先述の通りEnlighterテーマの一つGodzillaだけでもCSSの記述が74個もありました。
では全く使用しないテーマのCSSは削除しておくとさらに軽量になるのでは？と考えやってみましたがうまくいきませんでした。
どうもDRI機能を使用する際にEnlighterのキャッシュ機能が使われているようで、ランダムなタイムスタンプが付与されたものがページで読み込まれるようになっているため上手くいかないようです。
ページ読み込み時にソースコードの有無を判定しているのではなく、あらかじめ判定しておいてソースコードがある場合のみキャッシュからCSSを読み込んでいるような感じ？
日本語が下手すぎて上手く伝えられないのですが、とにかく
- ページにソースコードがあるかどうか？
- ある場合だけ軽量化したCSSを読み込む
この２つの両立が非常に困難っぽいです。
ソースコードをゴリゴリやれば可能だと思いますが、約80KBのうち何KBか削ったところで割に合わないと判断したため諦めました。
プラグイン内のソースコードを触るとアップデート時に元に戻ってしまうしね…
まとめ
EnlighterのDRI設定1つでソースコードが存在していないページでのCSSの読み込みを停止することで少し軽量化できますという話でした。
この記事内にもソースコードは一切使っていないので、設定前よりは少し軽量になっているはずです。
Enlighterを導入している方は是非ご検討ください。
