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

1. はじめに

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

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

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

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つによって、それぞれのファイルを非同期で読み込ませています。

ハイライトを実行する

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 を利用してください。