梅雨と夏の間。

じめじめで蒸し暑いし、蚊の襲撃に毎晩怯えているよっし~です。

サイト高速化に関わるといつかは目にするであろうプリロード(preload)。

videoやaudio要素、ヘッダーのlink要素の属性の1つで、意味としては「事前に読み込む」というものです。

WordPressのテーマやプラグインの機能としてもたまに見かけます。

そんなプリロードですが、Webサイトの高速化には本当に必要なのでしょうか。

わたしはこれまでに500件以上のサイトをPageSpeed Insightsベースで高速化してきましたが、link要素のプリロードは見つけ次第削除しています。

だって意味ないんだもん。

その理由を書いていこうと思います。

まずはlink要素のプリロードについて知ろう

link要素のプリロードとは具体的は以下の様なタグです。

<link rel="preload" as="font" href="font.woff">
<link rel="preload" as="image" href="image.png">

他にも種類はあるけど、webサイト高速化によくあるのはこんな感じのです。

このタグをヘッダーに追加することで、指定したものを最初の方で読み込むようになります。

”最初の方”っていうのを掘り下げると、まず、ページの読み込みはhtmlソースの上から順に行われています。

このプリロードタグは<head>タグ内に設置されているので、body要素、つまり実際に表示される部分が読み込まれるよりも前に読み込まれるようになります。

自分で言っといてなんだけど、ややこしいね(汗

まぁ、ざっくりと「最初の方に読み込まれるもの」と覚えておけばいいと思う。

どんな時に何のためにプリロードするの?

わたしはプリロードをしないので、正直なところよく分かりませんorz

でも一応調べてみると、

  • PageSpeed Insightsでキーリクエストのプリロードという警告が出たから
  • CSSを遅延読み込みするため
  • レザリングブロックを回避するため

などの記事を見つけました。

気になる方は検索してみてください。

ただ、わたしからするとどれも疑問に思うところがあり、それで本当に効果があるのかな~というところです。

実際にこうなる!というものを確認できればいいんだけど、どの記事も難しい単語を並べてそれっぽく説明している感じで、結果が見て取れませんでした。

プリロードを削除する理由

いよいよ本題です。

まずプリロードを削除する理由は、「意味がないから」とでも言っておきましょう。

例えばフッターとかページの後の方で読み込んでいたものを最初に読み込ませるって言ってもだよ、そもそもなぜそれを後の方で読み込んでるの?っていうのがあります。

最初からヘッダーやページの最初の方で読み込んでれば、プリロード必要ないじゃんっていうことです。

お仕事で見かけるのはこんなパターンです。

  • ウェブフォント遅延読み込み機能をオンにすると同時にそのウェブフォントをプリロード
  • Googleフォント、fontoawesomeはとりあえずプリロード
  • 画像遅延読み込みをすると同時にファーストビューの画像をプリロード
  • 用途不明のファイルをプリロード

何となく意味ないってわかるかな。

一応それぞれ説明しておきます。

ウェブフォント遅延読み込み機能をオンにすると同時にそのウェブフォントをプリロード

だったら最初から遅延読み込みしないでよって言いたい。

遅延読み込みするのだってリソースはあるんだから、無駄だよね。

Googleフォント、fontoawesomeはとりあえずプリロード

意味はありますか?

こうするとPageSpeed Insightsのスコアは上がるのですか?

わたしが試した限りでは目に見えた効果はありませんでした。

画像遅延読み込みをすると同時にファーストビューの画像をプリロード

画像遅延読み込みの仕方に問題があるよね。

画像遅延読み込みはオフスクリーンに対してするのが効果的なんだよ。

PageSpeed Insightsでも警告は「オフスクリーン画像の遅延読み込み」って書いてあるよね。

ファーストビューの画像は遅延読み込みしないように除外するのが正しいのです。

用途不明のファイルをプリロード

プリロードしたものはファーストビューで必ず読みこまれるんだよ。

ページのどこでも使われていないものをプリロードしたら逆にファーストビューの読み込みが増えて速度は落ちちゃうよ。

PageSpeed Insightsの「キーリクエストのプリロード」警告は何なの?

PageSpeed Insightsでは以下の様な説明書きがあります

`<link rel=preload>` を使用して、現在ページ読み込みの後のほうでリクエストしているリソースを優先的に取得することをご検討ください。

大抵の場合は誤った遅延読み込みです。

PageSpeed Insightsでは以下の詳細のリンクがあるのですが、

https://web.dev/uses-rel-preload/

こちらの例では、

index.html
|--app.js
|--styles.css
|--ui.js

のようにJavascriptを介してCSSやJavascriptを読み込んでいます。

こういった場合はプリロードをすると効果的ですよ~ということですが、、、

こういう設計をファーストビューですること自体が問題じゃないかな?

表示速度の観点から見たらだけど。

プリロードで目に見えた効果があるならやった方がいいとは思う

WordPress高速化のお仕事では、link要素のプリロードは見つけ次第削除しているわたしですが、その理由は先述した通りです。

ここまでプリロードを散々にディスってきましたが、プリロードをしてPageSpeed Insightsのスコアが上がるのならやる価値はあるはずです。

ただ、わたしの経験ではプリロードをしてもPageSpeed Insightsのスコアが目に見えて良くなった、ということが一度もないのでこういう考えに至っています。

あ、遅延読み込みしたものをプリロードしたことで効果があった!っていうのはダメだからね!

あとがき

お仕事の方で余裕が出てきたので、また久しぶりにブログを更新してみました。

書きたいネタはあるけど忙しくて書けない!っていう時は忙しいのキツイって思ってたけど、、、

実際に余裕が出てくるとそれはそれで物足りないというか、休んじゃっていいのかなという危機感というか。

なんかフワフワします。

仕事が忙しいっていうのは嬉しいことなんだとしみじみ。

更新頻度が高くなってきたら、「コイツ暇なんだな~」と思ってやってください(;´Д`)