Webサイトの表示速度、ちょっと気になりますよね。「パッと表示されてほしいのに、なんだかモタつく……」そんな悩みを抱えるあなたに、今日はとっておきの「先回りテクニック」をご紹介します。

今回スポットを当てるのは、HTMLの``という少し長ったらしい名前のタグです。名前を聞いただけで「うっ……」となったあなた、大丈夫です！実はこれ、私たちが日常生活でよくやっている「準備」と同じくらいシンプルで賢い仕組みなんですよ。

—

想像してみてください。あなたは今、友人を招いての「手料理パーティー」の準備をしています。

もし、友人が玄関のチャイムを鳴らしてから「さて、冷蔵庫から食材を出して、包丁を研いで、まな板を出して……」と始めたらどうでしょう？料理が食卓に並ぶまで、ものすごく時間がかかりますよね。

Webサイトもこれと同じです。ブラウザが「あ、このJavaScriptのプログラムが必要だ！」と気づいてからダウンロードを始めていては、ユーザーは待ちぼうけ。そこで登場するのが`modulepreload`です。

これはブラウザに対して、「これから必要になるから、今のうちにダウンロードして、中身の解析（パース）まで終わらせておいてね！」と先回りをお願いする魔法のタグなんです。

—

最近のWeb開発では「ESモジュール」という仕組みを使って、プログラムを小さな部品に分けて管理するのが当たり前になりました。

部品が分かれていると管理は楽なのですが、ブラウザから見ると「この部品を読み込んだら、あっちの部品も必要だ……あ、さらにその先の部品も！」というように、「読み込みの連鎖」が発生してしまいます。これが表示速度を遅くする原因の一つなのです。

`modulepreload`を使うと、ブラウザは「よし、その部品、あとで使うんだね。じゃあ暇なうちに先に用意しておくよ！」と、バックグラウンドでこっそり準備を済ませてくれます。チャイムが鳴る前に下ごしらえを完璧にしておくイメージですね。

—

使い方はとても簡単です。HTMLの``タグの中に、たった一行書くだけです。

先回り読み込みの練習

準備万端で表示します！

—

「じゃあ、全部のファイルを先読みさせれば最強じゃない？」と思われたかもしれませんが、そこは注意が必要です。

お弁当箱におかずを詰め込みすぎるとフタが閉まらないように、ブラウザも一度に処理できる量には限界があります。本当に「絶対に最初に必要になる重要なファイル」だけに絞って使うのが、パフォーマンスアップの秘訣です。

「これを読み込まないと画面が真っ白になっちゃう！」というような、メインのプログラムを優先して指定してあげてくださいね。

—

Webサイトを速くすることは、単なる技術的な工夫ではなく、訪れてくれた人への「おもてなし」だと私は考えています。

「早く見せてあげたい」「待たせたくない」。そんなあなたの優しい気持ちが、この`modulepreload`という小さな一行に宿ります。最初は難しく感じるかもしれませんが、まずは一つのファイルで試してみてください。

「あ、ちょっと速くなったかも？」というその小さな成功体験が、あなたを一人前のフロントエンド・エンジニアへと確実に導いてくれます。焦らず、楽しみながら一緒に学んでいきましょうね！

また次の記事でお会いできるのを楽しみにしています。あなたのWeb制作ライフが、より快適なものになりますように！

【入門編】linkタグのrel=modulepreload – HTML実践ガイド