遅延読込みでコードハイライトが機能しない【LiteSpeed Cache】

スポンサーリンク

cocoonには「ソースコード設定」をしておいて「コードブロック」を挿入すると、コードをカラフルにハイライト表示する機能があります。

なんか見た目にカラフルでいいですよね。

スポンサーリンク

cocoonでコードがハイライトしない

ところが何故かうまく表示されません。

まずは、表示されたコードブロックを見てみてください。

コードブロックの色分けがされていない

このように、コードブロックがあるのにjavascriptの色分けがされていません。

まずはHTMLを検証してクラスを確認する

検証でHTMLを見てみると、ちゃんとjavascriptのクラスは指定できています。

chromeでHTML要素を検証

Cocoonの「ソースコード設定」でハイライト表示をオンにしている?

CocoonではjQueryプラグインのhighlight.jsを利用する、コードハイライト機能があります。設定で簡単にオンにできます。

JavaScriptの非同期処理をするプラグインがある?

Cocoonのソースコードのハイライトに調べてみるとほとんどが設定の仕方の話ですが、「ハイライト系は非同期にするとうまく動かないことがある」という記事を発見しました。

非同期といえば、高速化処理を使っているから怪しい。

LiteSpeed CacheのJavascriptの遅延読込を無効にする

調べてみると、「LiteSpeed Cache」プラグインの中に、Javascriptの遅延読込があります。

まずとは、LiteSpeed Cache の「ページの最適化」設定から、「[2] JS設定」を表示します。

LiteSpeed Cache ページの最適化の上部画面

その中に「インラインJSの読み込み」という項目があります。

これを「オン」から「DOM の準備が整った後」に変更してみます。

すると、ちゃんとコードハイライトがされました。

highlight.jsの動作のしくみとJavaScriptの遅延読み込み

どういう原理かというと。

シンタックスハイライトのライブラリ「highlight.js」では、画面を表示する時にコードの中身を読み込んで、構文要素ごとに<span>タグを挿入します。

これが、表示されるHTMLのソースです。

highlight.jsでパースされたHTMLソース

<span class=”hljs-*”>タグが埋め込まれているのがわかりますよね。

ところが、高速化のためにJavaScriptの読込を待たずに処理を進めていく、遅延読込を有効にしていると、「highlight.js」のスクリプトが完全に読み込まれる前に処理が実行されてしまうので、正しくパースされません。

確かに「LiteSpeed Cache」の「インラインJSの読み込み」の注意書きにちゃんと書いてあります。

DOM が完全に読み込まれた後にインライン JS を読み込むと、JS の互換性が向上し、他の JS 最適化機能が有効になっている場合の JS エラーを減らすことができます。

DOMは「Document Object Model (DOM) 」、ウェブ上の文章と構造をオブジェクトとして表現したデータ形式です。今回は形式の話はよいのですが、要は全てのデータを読み込んでからスクリプトを実行しないと、エラーになることがあるということです。

インラインスクリプト(自分のサイトのスクリプト)が、外部スクリプトがまだ読込中なのに呼び出そうとしてしまうからです。

今度はアイコンフォントが表示されない

ところが、よくページを見てみると、今度はアイコンフォントが表示されていません。

いろいろやってみて、JS結合を「オフ」にして、「遅延」に戻すことで解決しました。

高速化のためにはスクリプトを結合したほうが速いのですが、アイコンフォントの置き換えなど実行順序がおかしくなっているようです。

まとめ

highlight.jsとスクリプトの遅延読込は相性が悪い

今日(2020年9月24日時点)のサイトスピード:61点

問題なさそうです。

こちらもどうぞ

タイトルとURLをコピーしました