こんな方におすすめ
- サイトのスピードを速くしたい
- キーリクエストのプリロードの意味を知りたい
- キーリクエストのプリロードの改善方法を知りたい
WordPressでブログを運営していると、サイトのスピードが遅くなってしまうのは避けられません。
サイトのスピードが遅ければ遅いほどユーザーの離脱率が高くなり、表示に3秒以上かかるモバイルページでは53％のユーザーが離脱しているようです。
いくら良いサイトを作ったとしてもユーザーが離脱してしまえば意味がありません。
なので改善できる項目は改善してユーザーが少しでも離脱しないようにしていきましょう。
google「PageSpeed Insights」で自分のサイトを分析することで、上の画像のようにサイトの速度を数値化して教えてくれます。
また、自分のサイトが遅くなってしまっている原因を突き止めることができます。
まだgoogle「PageSpeed Insights」を使ったことがないという人は使うことをお勧めします。
ブログが遅くなる原因はいくつもありますが、本記事ではその中の１つである「キーリクエストのプリロード」の解決方法を述べていきます。
こちらもCHECK
-
PageSpeed Insightsとは？使い方と各項目をご紹介
続きを見る
INDEX
「キーリクエストのプリロード」とは、どういう意味か
興味がない人は飛ばして下さい
google「PageSpeed Insights」に出てきた「キーリクエストのプリロード」をクリックすると下記のような文章が出てきます。
`<link rel=preload>` を使用して、現在ページ読み込みの後のほうでリクエストしているリソースを優先的に取得することをご検討ください。
この文章に出てきた「preload」とは「pre（前部に）」「load（読み込む）」という意味です。
簡単に言うと、サイトはHTMLやCSS、JavaScriptなどのプログラミング言語によって構成されています。
このプログラミング言語のファイルには読み込まれる順番が決まっていて、読み込まれた順にサイト上に表示されるようになっています。
その中で、指定されたファイルが後の方に読み込まれてしまってるためにサイトの表示速度が遅くなってしまっているので、指定されたファイルを「preload（先に読み込む）」ことでサイトの表示速度を速くして問題を解決して下さいという意味です。
「preload」の意味が理解できたところで、本記事の本題であるキーリクエストのプリロードを改善していきましょう。
「キーリクエストのプリロード」を改善する方法
まず、google「PageSpeed Insightsで自分のサイトを分析します。
すると、改善できる項目の欄に「キーリクエストのプリロード」があるのでクリック、すると「キーリクエストのプリロード」の下にURLが出現がします。
この出現したURLを「先に読み込むようにすればサイトの表示速度が速くなりますよ。」ってことです。
僕のブログの場合だと、18.39秒と横に書いてあるので改善することで18.39秒速くなります。（※画像参照）
それでは実際に改善していきます。
先ほど出現したURLを右クリックして、「リンクのアドレスをコピー」を押して下さい。（URLが複数ある場合はすべてコピー）
先ほどコピーしたリンクのアドレスをメモ帳などに貼り付けて下さい。
（僕の場合は出現したURLが２つあったのでメモ帳に２つ貼り付けました。）
メモ帳に貼り付けたURLを下記の「ここに貼り付け」と書いてある場所に貼り付けて下さい。
僕の場合は下記のようになりました。
（僕の場合は２つだったので２つ）
<!-- キーリクエストのプリロード -->
<link rel="preload" as="font" type="font/woff" href="https://kyochan-freelance.com/wp-content/themes/affinger5/st_svg/fonts/stsvg.ttf?poe1v2" crossorigin>
<!-- キーリクエストのプリロード -->
<link rel="preload" as="font" type="font/woff" href="https://kyochan-freelance.com/wp-content/themes/affinger5/vendor/slick/fonts/slick.woff" crossorigin>
それでは出来上がったコードをコピーして、使用しているテーマの<head>〜</head>の間に貼り付けていきます。
注意
<head>と<header>は似ているので間違えないように注意して下さい。
間違えてしまうとワードプレス にアクセスできなくなる恐れがあります。
「キーリクエストのプリロード」を貼り付ける<head>の場所
注意
この方法は親テーマのテーマヘッダーを変更するため自己責任でお願いします。
使用しているテーマによっては親テーマを変更しないで行うことができる可能性があります、心配な方は探してみて下さい。
僕が使っているテーマ「AFFINGER5」では親テーマを変更しない方法があるので、後々紹介します。AFFINGER5を使用している方はそちらを参考にして下さい。
まず「ダッシュボード」→「外観」→「テーマエディター」の順にクリックしていきます。（※画像参照）
テーマエディターの右上にある「編集するテーマを選択」をクリックして親テーマを選択します。
選択した親テーマのテーマファイルを下にスクロールして「テーマヘッダー（header.php）」を探して下さい。
見つけたテーマヘッダーをクリックするとコードがたくさん出てくるので、<head>と書かれているところを探して下さい（※画像参照）
<head>を見つけたら<head>の真下に先ほど作った<!--キーリクエストのプリロード->を貼り付けて、下にある「ファイルの更新」をクリックすれば完了です。
AFFINGER5（アフィンガー5）で親テーマを変更しない方法
AFFINGER5では、親テーマを変更せずに簡単に<head>に貼り付けることができます。
「ダッシュボード」→「AFFINGER5管理」→「その他」の順に開いて下さい。
下にスクロールして「上級者向け」と書いてある場所を探して下さい。
探したら「</>コードの出力」の下にある「headに出力するコードを....」と書いてあるところに<!--キーリクエストのプリロード->を貼り付けましょう。
すでに何かコードが書かれてる場合は、そのコードは消さずにその下に貼り付けるようにして下さい。
AFFINGER5の他にも、テーマによっては親テーマを変更しなくても改善できるテーマもあるので探してみて下さい。
「キーリクエストのプリロード」が改善されたか確認
<head>〜</head>に<プリロード>を貼り付けることができたら、改善されたかどうか確認するために再度Google「PageSpeed Insights」で自分のサイトを分析してみましょう。
確認してみると画像のように改善できる項目から「キーリクエストのプリロード」が消えていますね。
改善できる項目からさらに下にスクロールしていくと、「合格した監査」と言う項目があります。
上の画像のように、合格した監査の中にキーリクエストのプリロードが入っていれば改善成功です。
消えない場合はキャッシュしてから確認
「Autoptimize」などのキャッシュプラグインを導入している場合は、キャッシュしないと改善されない場合があります。
本記事では、「Autoptimize」のキャッシュのやり方を説明します。（と言ってもすぐ終わります。）
上の画像のように、画面の上部にあるAutoptimizeにカーソルを合わせると「キャッシュの削除」が出てくるのクリック。
これでキャッシュが削除されたと思うので、再度カーソルを合わせて確認しましょう。
画像のようにサイズが0.00 Bとなっていれば成功です。
これで再度、「PageSpeed Insights」で「キーリクエストのプリロード」が改善されたか確認しましょう。
僕の場合は、「キーリクエストのプリロード」の他にも改善できる項目がたくさんあるので、改善に取り組んでいこうと思います。