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を予め生成しておくのもいろいろと面倒ですので、現在、本サイトではハイライト自体していません。
          なかなか難しいですね。
          ご報告ありがとうございました。

宮嶋孝明 へ返信する コメントをキャンセル

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

関連記事

Web Vitals

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

highlight.js のハイライト処理を Web Workers で実行する方法を紹介します。

Web

Webフォントを使う場合に font-display 記述子を使ってすぐにテキストを表示させる

目次1. Webフォントの読み込みと font-display 記述子(概要)2. font-display 記述子を使ってテキストをすぐに表示させる方法3. font-display 記述子の詳しい …

Web Vitals

Web Vitals patterns の Responsive Images を試してみました

Web Vitals patterns に載っている「Responsive Images」を実際に試してみました。

Web

未ログイン状態で Facebook を開いた時に表示されるログインウィンドウを消す

目次1. Facebook の仕様変更?2. ブックマークレットの使い方3. 仕組み4. 注意点5. おわりに 1. Facebook の仕様変更? 未ログイン状態で Facebook のページを開く …

インターネット上での検索方法

Google 画像検索を表すURL http://images.google.com/search?tbm=isch&q=検索キーワード 執筆中