Web

LCP を意識した Highlight.js の読み込み方

投稿日:2021年2月4日 更新日:

1. はじめに

Core Web Vitals の 1つである LCP (Largest Contentful Paint) の数値を改善するには、外部CSSファイル/JavaScriptファイルをなるべく非同期で読み込む必要があります。

本記事では、highlight.js を利用する際に highlight.js の CSSファイル・JavaScriptファイルを非同期で読み込む記述方法と、その後でハイライトを実行するコードの記述方法を紹介します。

※ highlight.js というのは、Webページ上のプログラミングコードに色を付ける JavaScriptライブラリです。

Web

シンタックス・ハイライト・ライブラリ「highlight.js」の使い方

2018.12.22

2. 記述方法

CDNを利用した場合の記述例は以下になります。

<link rel="preload" as="style"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css">
<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css">
<script defer src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
<script>window.addEventListener('DOMContentLoaded', () => hljs.initHighlighting());
</script>

内容について簡単に説明していきます。

ファイルの読み込む(CDNを利用)

cdnjs というCDNにホストされた CSSファイルと JavaScriptファイルを読み込む記述例は、Getting highlight.js に載っていますが、このままでは LCP の数値が悪くなるため、2つの部分を変更しています。

<link rel="preload" as="style"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css">
<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css">
<script defer src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>

変更点は以下です。

  1. CSSファイルには、rel="preload" を指定した <link> タグを追記する。
  2. <script>タグには、defer 属性を指定する。

この2つによって、それぞれのファイルを非同期で読み込ませています。

Web

ウェブブラウザがページを取得して表示するまでの流れ

2018.11.05

ハイライトを実行する

How to use highlight.js には、ハイライトを実行するスクリプトとして、

<script>hljs.initHighlightingOnLoad();</script>

というコードが紹介されていますが、今回 highlight.min.js ファイルを defer で読み込ませているため、このままだと「hljs がない」というエラーになってしまいます。

そのため、これを以下に変更します。

<script>
window.addEventListener('DOMContentLoaded', () => {
  hljs.initHighlighting();
});
</script>

実は最初に紹介した hljs.initHighlightingOnLoad() という関数では、内部で DOMContentLoad イベントにイベントリスナーを登録しています。今回この登録処理を自分で記述することで、このイベントが発生するまでは hljs オブジェクトが存在してなくてもエラーが発生しません。

3. おわりに

LCP の値を計測するには、PageSpeed Insights や Chrome のデベロッパーツールの Lighthouse を利用してください。

Lighthouse での検証結果
Lighthouse での検証結果
Web

シンタックス・ハイライト・ライブラリ「highlight.js」の使い方

2018.12.22
Web Vitals

highlight.js が引き起こすレイアウト・シフトを防止する

2021.02.01
Web Vitals

highlight.js のハイライト処理を Web Workers で実行する

2021.03.15

📂-Web

執筆者:labo


  1. 宮嶋孝明 より:

    CSSに「rel=”preload”」をつけるとハイライトされなくなります。
    JavaScriptの方の「async」もしくは「defer」の方は影響がないようです。
    他のプラグインの影響でしょうか?
    まだ調べられていません。
    「Simple Code Highlighter」プラグインの方がLighthouseの数値が良いように思います。preloadできていないからでしょうけど。

    • laboradian より:

      詳しい状況が分からないのでなんとも言えないのですが、rel=”preload” を利用する場合、
      <link rel="stylesheet" href="XXXX/foo.css">
      は残したまま、
      <link rel="preload" as="style" href="XXXX/foo.css">
      を追記する必要があります。

      • 宮嶋孝明 より:

        返信ありがとうございます。
        記事中のコードをコピペしてバージョンのみ(10.5.0→11.4.0)に書き換えたつもりでしたが、どこかに誤りがあったのかもしれません。
        もう一度試したところ、今度は正常にハイライトされました。
        ローカルにCSSとJSをダウンロードしてみてもCDNと大して速度的に変わりがないようです。
        Lighthouseの値はあまり改善されていません。
        まだまだ勉強中です。
        ありがとうございました。

        • laboradian より:

          動的にハイライトさせる場合ですと、どうしても画面ロード時のパフォーマンスが下がってしまいます。
          かといって、ハイライトした状態のHTMLを予め生成しておくのもいろいろと面倒ですので、現在、本サイトではハイライト自体していません。
          なかなか難しいですね。
          ご報告ありがとうございました。

laboradian へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。

関連記事

Chrome

Chrome 96 で絵文字を太字にすると色がなくなる問題

Chrome 96 で絵文字を太字にすると色がなくなる問題について書いています。

Web Components

たくさんの Web Components を利用するページを改善する

たくさんの Web Components を利用するページを改善する方法について説明します。

WordPress

【WordPress】JP Markdownプラグインが code タグの属性を削除する問題への対応方法

目次1. 現象2. 原因3. 対応方法 1. 現象 WordPress の JP Markdown プラグインを使っていると、以下のような (<pre> タグを伴わない単独の) <c …

CSS

【CSS】kbd 要素には “white-space: nowrap” を指定しましょう

kbd 要素に何も指定しないと、以下のように途中で改行されてしまうことがあります。 before 通常の状態 これを避けるために、kbd 要素に対して “white-space: nowr …

Firefox

Firefox のコンテンツブロッキング (Enhanced Tracking Protection)

Firefox の コンテンツブロッキング 機能について説明します。