表示速度改善？
こんにちはchessinuです。
今回の記事はPageSpeed Insigthsの改善項目として、割と頻繁に出てくるキーリクエストのプリロード問題を解決してみました。
<link rel=preload> を使用して、現在ページ読み込みの後のほうでリクエストしているリソースを優先的に取得することをご検討ください。
サイトを運営している方ならば、一度は必ず目にする例のあれです。
ご存知でしょうが、一応このような感じで出るやつです。
preload(プリロード)について
基本的にサイトを開くと、一気に全てのリソース(データ)が読み込まれるというわけではなく、ある決まった順序の通りに読み込まれていきます。
そしてそのリソース(データ)を読み込む順番によって、サイトのスピードが早くなったり遅くなったりします。
またpreloadは「pre(前に)＋load(読み込む)=先読み」という意味になります。
つまり<link rel=preload>を使用することで、指摘されているリソース(データ)を予め先に読み込ませる事が出来ます。そうすることで結果的に、ページ全体としての読み込み速度の短縮が期待できるというわけです。
それでは早速実際の記述コードを作っていきます。
テンプレートはこれで良いかと思います。これに穴埋めをしていきます。
<link rel="preload" href="リソースへのパス" as="〇" type="△/□" crossorigin>
調べる
まず初めにリソースへのパスから調べます。調べると言っても既に指摘されているものなので、マウスカーソルを指摘されているリソースの上へ持っていき「右クリック」→「リンクのアドレスをコピー」でコピーします。
これで先程のテンプレートの穴埋めをすることが出来るようになりました。
テンプレートへの穴埋め
それでは実際にテンプレートへの穴埋めをしていきます。
<link rel="preload" href="リソースへのパス" as="〇" type="△/□" crossorigin> リソースへのパス
先程調べてコピーした奴をペーストします。
https://～/fonts/fontawesome-webfont.woff2?v=4.7.0
as=”○”
○にはリソースの種類を記述します。
ここではFont Awesomeなので”font“になります。
type=”△/□”
MIME(マイム)タイプで記述します。△にはリソースの分類を、□にはその種類(拡張子)を記述します。
ここでは”font/woff2“になります。
crossorigin
必ず書きましょう。記述しないと下の画像の様な警告文が出てくる可能性があります。
完成したコード
完成したコードがこちらになります。
<link rel="preload" href="https://～/fonts/fontawesome-webfont.woff2?v=4.7.0" as="font" type="font/woff2" crossorigin> そしてこれを各自お好きな方法で<head>~</head>タグ内に配置します。
結果
改めてもう一度PageSpeed Insightsにて速度を測ってみると、無事合格した監査リストに入ることができました。
速度スコアについて
| コード記述前 | コード記述後 |
|---|---|
 |  |
上の画像から分かるように速度スコアについては記述前と後ではほぼ変わりませんでした。
実際に但し書きにて、以下のように説明されている事からも納得できます。
改善できる項目これらの提案を実施すると、ページの読み込み時間を短縮できる可能性があります。なお、パフォーマンス スコアには直接影響しません。
デベロッパーツールにて確認
| コード記述前 | コード記述後 |
|---|---|
 |  |
実際にChromeのデベロッパーで調べてみると、確かに「コード記述前」と「コード記述後」では、読み込み位置が変わっていることを確認出来ました。
確認方法について
Webページ上で「F12キー」又は「マウスを右クリック→検証」から、Network欄を選択して「CTRL＋R」を押してください。
終わりに
とりあえず自分の場合は「Font Awesome」や「IcoMoon」などのWebフォント(アイコン)に関しては、これで解決する事が出来ましたが、皆さんはいかがでしたでしょうか？
もし解決できていないのならm(_ _)mｽｲﾏｾﾝ
PageSpeed Insightsを含めGoogleのツールは非常に便利なのですが、少しわかりにくい所があるのも事実です。
自分も少しづつ勉強しながら、地道に解決していきたいと思います。
以上でこの記事は終わりになります。
それではまた別の記事でお会いしましょう！
さようなら～