・表示速度のキークエストのプリロードの改善方法を教えて欲しい！
こんな悩みを解決します。
この記事の信頼性
大学で学校の勉強をする傍ら、副業でブログ収益6桁を稼いでいる僕が、ブログ運営についてわかりやすく解説します。
ブログのサイトスピードが計測できる「PageSpeed Insights」ですが、以下のような画面が出てくることありませんか？
『キークエストのプリロード』を改善するように求められますが、具体的にどうやって改善すればいいかわからない人も多いはず。
そこで今回は、キークエストのプリロードの改善方法について紹介します。
✔ キークエストのプリロードとは？
✔ 3分でできる改善方法
この記事を読めば、具体的な改善方法がわかるので、さらにサイトスピードを上げることができますよ。
＼ 当サイトで使用中WordPressテーマ ／
期間限定プラグイン＆当サイト限定特典付き
キークエストのプリロードとは読み込む順番を変えること
プリロードとは、『pre（先に）load（読む）』という意味です。
ブログはHTMLなど、様々なコードからできていますが、それぞれ読み込む順番というものが存在します。
コードの読み込む順番を変えることで、サイトの表示速度を変えることができるのです。
「読み込む順番」が変わると、サイトスピードが変わるんだ～、程度でOKです！
それでは、具体的にキークエストのプリロードを改善していきましょう。
キークエストのプリロードの改善方法
この作業はとても単純なので、3分くらいあれば終わりますよ。
具体的な作業手順は以下の5つです。
➀問題があるキークエストを右クリック
➁リンクをコピー
➂Wordやメモに貼り付け
➃プリロードコードに挿入
⑤〈head〉～〈/head〉にコピペ
それでは早速作業していきましょう！
キークエストの部分で右クリックしてリンクをコピー
まずは、自分のブログのサイトスピードを「PageSpeed Insights」で測定します。
「キークエストのプリロード」の部分に表示されたリンクを、『右クリック』➔『リンクのアドレスをコピー』で、リンクをコピーしてください。
人によっては3つほど表示されますが、表示されたリンクの数だけコピーしてください。
Wordやメモにリンクをコピペ
先ほどコピーしたリンクを、上のようにWordやメモなどにコピペしてください。
プリロードコードをコピペしてコードを作成
次に、以下のコードをコピーして、リンクと同じ場所にコピペしてください。
コード
<link rel="preload" as="font" type="font/woff" href="URL" crossorigin>
上が「リンク」、下が「コード」
コードの中に、「URL」と書いてある場所がありますので、その部分にリンクをコピペして挿入しましょう。
「URL」の部分にリンクを挿入
〈head〉～〈/head〉にコピペ
最後に、上のコードを〈head〉～〈/head〉にコピペします。
まずは、WordPress管理画面から、『外観』➔『テーマエディター』を選択してください。
『親テーマ』に切り替えて、『テーマヘッダー（header.php）』の部分を開きます。
※テーマをいじるので、念のためバックアップを取っておきましょう。
すると、〈/head〉という場所が見つかるので、直前の部分に先ほどのコードをコピペしましょう。
コードが3つある場合は3つともコピペしてください！
コピペが完了したら、『ファイルを更新』を押して完了です。
実はアフィンガーだと安全にキークエストのプリロードを改善可能！
当ブログでも使用しているアフィンガー5の場合、コードを〈/head〉の部分に挿入する必要はありません。
実は、アフィンガーの管理画面から挿入できます！
WordPress管理画面から、『AFFINGER5管理』➔『AFFINGER5管理』をクリックして、『その他』を選択します。
下の方にスクロールしていくと、「コードの出力」という部分がありますので、『headに出力するコード』の部分に先ほどのコードをコピペすれば完了です。
ちなみに、〈/body〉に出力したいコードがあるときも、同じようにすることができます。
こうすることで、安全にキークエストのプリロードを改善することが可能です。
アフィンガー以外にも同じような場所があるかもなので、確認してみてください！
まとめ：キークエストのプリロードを改善してサイトスピードを上げよう！
今回は、キークエストのプリロードの改善方法について紹介しました。
➀問題があるキークエストを右クリック
➁リンクをコピー
➂Wordやメモに貼り付け
➃プリロードコードに挿入
⑤〈head〉～〈/head〉にコピペ
ステップは多いですが、3分くらいあれば完了できるので、時間があるときに改善してみてください。
サイトスピードの改善方法については、以下の記事で詳しく紹介しているので、参考にしてみてください。
関連記事【SEO対策】サイト高速化のためにやった5つのこと【解決策あり】
