【PageSpeedInsights】キー リクエストのプリロードって何？改善方法を解説
Kこんにちは！CODE CLUB965のKです！
今回は、サイトの表示速度の改善をしていて勉強になったことがあったので記事にしておこうと思います。
サイトの表示速度においては少し前に記事にしていますので、よく分からない方はまずはそちらの記事を読んでみてください！
サイトの表示速度が早ければ、ユーザにとってもいいですし、SEO的にもよくなるので余裕があれば改善していきたいところですね。
ちなみに上の記事でも紹介していますが、サイトの表示速度については以下のサイトでURLを入力すれば、簡単に点数と改善点を出してくれるので非常に便利です。
今回はそのGoogleが公開しているサイト「PageSpeedInsights」で速度評価した時の改善項目にあった「キー リクエストのプリロード」について、その改善方法を紹介したいと思います。
キー リクエストのプリロードとは？
そもそも何の話？という方もいると思うので説明しますが、「PageSpeedInsights」で速度評価した時に以下のような改善項目がありました。
「キーリクエストのプリロード」とありますが、これは、
・キー ：（特定のファイル）
・リクエスト：（要求）
・プリロード：（先に読み込む）
という意味になります。
要するに、表示速度を改善するために「特定のファイルを先に読み込んでくださいね」ということになります。
改善方法
改善項目の「キーリクエストのプリロード」をクリックすると以下のような情報が表示されます。
<link rel=preload>を使用してくださいと記載がありますね。
この記述をすれば改善できるということになります。
<link rel=preload>の記述方法
基本的には以下のような記述を、<head>~</head>の間に記述します。
<link rel="preload" href="改善項目に記載のアドレス" as="xxx" crossorigin>「href="リンクのアドレス"」は、改善項目の「キーリクエストのプリロード」をクリックすると出てくる、対象のURLを右クリックして、「リンクのアドレスをコピー」を選択してコピーしてください。
また、「as="xxx"」の値は、コンテンツの種類によって使い分けるようにしてください。
以下に代表的なものを載せておきますが、asの値は他にもあるので必要に応じて値を変えてください。
・CSSの場合 <link rel="preload" href="xxx.css" as="style" crossorigin> ・JavaScriptの場合 <link rel="preload" href="xxx.js" as="script" crossorigin> ・Fontの場合 <link rel="preload" href="xxx.ttf" as="font" crossorigin>
設定後の確認
設定後、PageSpeedInsightsで再計測して「合格した監査」の欄に「キー リクエストのプリロード」があれば問題解決となります。
最後に
今回は、「キー リクエストのプリロード」の改善について解説しました。
これによってサイトの速度評価も結構変わったので、もし同じような項目が見つかった方はぜひ改善してみてください！
それでは、また！
Follow me!
