「表示が遅い！」を解決する魔法の杖。`link rel=”preload”` でリソースを賢く先取りしよう
Webサイトを作っていて、「あれ、画像や文字が少し遅れて表示されるな」と感じたことはありませんか？
ブラウザは、Webサイトを表示するときに「よし、まずはHTMLを読んで、次にCSSを読んで……あ、画像もあるからダウンロードしなきゃ！」と、まるで買い物リストを上から順に確認するような動きをしています。でも、もし「絶対に一番大切なもの」がリストの最後の方にあったらどうでしょう？ 読み込みが終わるまで、ユーザーは待たされてしまいますよね。
今日は、そんな待ち時間を解消して、表示をグンと速くする「`link rel=”preload”`（プリロード）」という魔法のテクニックを、一緒に見ていきましょう。
—
そもそも「プリロード」って何？
料理に例えてみましょう。
あなたは今、カレーを作ろうとしています。冷蔵庫の中身を確認して、野菜を切って、お肉を炒めて……。もし、一番大切な「カレールー」が、最後に「あ、そういえば買わなきゃ」となって買いに行くことになったら、お腹を空かせた家族は待ちくたびれてしまいますよね。
Webサイトも同じです。「このファイルは、画面が表示される瞬間に絶対必要になるから、他の作業の合間に、先にこっそりダウンロードしておいて！」とブラウザにお願いするのが、この`preload`の役割です。
どんな時に使うの？
主に、以下のような「後から読み込むと表示がカクついて見えるもの」に使います。
- Webフォント: 文字が最初は見えなくて、後からパッと切り替わるのを防ぎたいとき。
- メインのCSS: 画面の見た目を整える一番大切なスタイルシート。
- メインの画像: ファーストビュー（最初に画面で見える範囲）にある大きな画像。
—
さっそくコードを書いてみよう
使い方はとってもシンプルです。HTMLの `
` タグの中に、一行書き加えるだけ。
コードのポイントを解説
- `rel=”preload”`: 「これは最優先で準備してね！」という合図です。
- `as=”…”`: ブラウザに「何の種類（画像？スタイル？フォント？）のファイルか」を教えてあげます。これを書かないとブラウザが混乱してしまうので、必ずセットで書きましょう。
- `crossorigin`: フォントファイルを読み込むときは、これが必要です。「おまじない」だと思って今はそのまま記述してくださいね。
—
注意点：何でもかんでも「プリロード」すればいいわけじゃない
「じゃあ、全部プリロードすれば爆速になるんだ！」と思いがちですが、ここが落とし穴です。
たくさん詰め込みすぎると、ブラウザは「どれから処理すればいいの！」とパニックになってしまい、かえって表示が遅くなってしまいます。「これがないと、画面が崩れて見えちゃう！」という大切なものだけを厳選して使うのが、プロのコツです。
—
最後に：完璧じゃなくて大丈夫
初めてこの設定に触れるとき、「どれが一番大切なのか判断するのが難しい……」と悩むかもしれません。でも、大丈夫です！
まずは、「一番目立つメインの画像」や「Webフォント」一つだけでいいので試してみてください。それだけでも、ユーザーが感じる「表示の体感速度」は大きく変わります。
Web制作の世界は、こうやって一つずつ「どうすればもっと快適になるかな？」と工夫を積み重ねていくのが一番の醍醐味です。今日の技術を一つ覚えたあなた、明日からのWebサイト制作が少しだけ楽しくなるはずですよ！
また分からないことがあれば、いつでも聞きに来てくださいね。一緒に一歩ずつ進んでいきましょう！
コメント