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


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

ツールを公開するWebサイトを作っています

いろいろなツール(Webページ上で提供できるツールに限ります)を公開するサイトを作っています。 Tools on Web https://tools.laboradian.com/ 載せているツールは …

Web

HSTS が原因で、ウェブサイトが勝手にhttps接続しないようにする

HSTSが原因で、サイトが勝手にhttps接続されないようにする方法について説明します。

Web

cron-job.org を利用して特定のURLに定期的にアクセスさせる

cron-job.org というサービスの利用手順について説明します。

Firefox

Firefox の 強化型トラッキング防止機能

目次1. Firefox の強化型トラッキング防止機能2. 用語トラッカー (Trackers)ソーシャルメディアトラッカートラッキングコンテンツサードパーティのクッキー クロスサイトのトラッキングク …

Web Vitals

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

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