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

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

関連記事

Web Vitals

<script>タグのdefer/async属性について(その2:実例)

script タグの属性によって、JavaScript ファイルがどのように読み込まれるのか、3パターンを実際のWebページを使って比べます。

MathJax を試してみました。

MathJax は、HTML上で数式を美しく表示するための JavaScriptライブラリです。 基本的な使い方は、 HTMLファイルに以下を記述して MathJax.js を読み込みます。HTMLフ …

Web

Gmail でよく使うキーボードショートカット

Gmail でよく使うキーボードショートカットを紹介します。 1. Gmail のキーボードショートカットを有効にする手順 まず、Gmail でキーボードショートカットを利用するには、設定で有効にする …

PWA

Webブラウザと PWA は切り離して欲しい

マイクロソフトはWeb技術を用いてネイティブアプリケーションのように動作するProgressive Web Apps(PWA)を、WebブラウザのEdgeにとどまらず、Windows10のデスクトップ …

Google

Google マップの地図をウェブページに埋め込む手順

Google マップの地図を、ウェブページに埋め込む手順について説明します。 手順自体は簡単なのですが、Google マップの仕様が時々変わり、操作手順もその影響を受けることがあるため、現時点(201 …