今回はPageSpeed Insightsで確認ができる、キーリクエストのプリロードに注目して、サイトの速度の改善をしていこうと思います。
サイトの速度の早い、遅いはそのままGoogleさんからの評価（つまりSEO）にもなります。
よって、遅いより早いことに越したことはないのです。
Contents
【SEO 完全理解】キーリクエストのプリロード対策
今回対処するのは以下の画像にある、キーリクエストのプリロードなのですが、
一体これはなんなのでしょうか？
いまいちイメージがわかない割に、処理に3秒以上かかっているという悪い子です。
キーリクエストのプリロードとは何者なのか？
「キーリクエスト＝ページを表示するために必要な要素」
「プリロード（preload）＝あらかじめ読み込む」ということです。
HTML、CSS、画像、フォントなどの各種ファイルを読み込む順序について、優先度を指定することを指します。
そのため、これらの読み込みが終わらないとページが表示されません。
一般的に、何も指定しなかった場合データを読み込む時は
親＝＞子供＝＞孫＝＞ひ孫 の順番でデータを読み込んでいくのですが、
親(10秒)＝＞子供(10秒)＝＞孫(10秒)＝＞ひ孫(10秒)
となった場合は、ページの表示まで合計で４０秒の時間がかかります。
しかしこのキーリクエストのプリロードを、例えば孫に行うことによって、以下の様に並列で読み込みを行うことができます。
親(10秒)＝＞子供(10秒)＝＞ひ孫(10秒) 孫(10秒)
すなわち、全体で掛かる時間を30秒に減らすことができます。
先ほどの画像の例の場合、
3秒以上ブログが表示される時間がロックされていることになります。これでは、みる気が失せてしまう可能性もあります。
【キーリクエストのプリロード】ワードプレスでの対処方法
それでは、キーリクエストのプリロード問題を解決していきましょう。
キーリクエストのプリロードのためのテンプレートを作る
実は解決のためのフォーマットが決まっています。それは以下です。
hrefにおけるダブルクォーテーションの中を先ほど問題と表示されたURLに置き換えます。
今回はこのリンク
<link rel="preload" as="font" type="font/woff" href="https://corporate-fufu.com/wp-content/plugins/elementor/assets/lib/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0" crossorigin>どのリンクをコピーしていいかわからない場合は、以下の画像の様に、
対象のURLのところで右クリックして、Copy Link Address(リンクをコピーする)を選択すればOKです
<head>~</head>テンプレートを貼り付ける
お次はこのテンプレートを実際のブログに適用していきます。
使っているブログのテーマによって変わってしまうので、方法については一概には言えないのですが
どのテーマにもheader.phpというものあり、その中に先ほど作成したテンプレートの内容を放り込むことによって完了します。
各ブログの管理画面をくまなく探してみましょう。
必ずどこかに<head>~</head>に値を入れる。と言った項目が出てきます！
【キーリクエストのプリロード】対処できたかを確認する
<head>まで反映した状態で、ここで再度チェックをかけてみると。。。。
無事に消えました！！！！！！ 感覚的にも速度の違いを感じるほどだと思います。
数秒ですが、現代では非常に長く感じると思います。
たかが数秒と思わずに地道に改善を続けていくことでより利用しやすいサイトになっていくと思います。
以上、キーリクエストのプリロードでした！
