節約・節税・収入源の多角化戦略なら『せつやる』へ

高速でキーリクエストのプリロードを改善するたった一つの方法

この記事のまとめ
  • PageSpeed Insightsで発生するキーリクエストのプリロードの改善方法
  • 解決事例も紹介

 

今回はPageSpeed Insightsの改善項目でキーリクエストのプリロードが表示された場合の対処法を説明します。

PageSpeed Insightsで調べる

まずはPageSpeed Insightsで自分のサイトの表示速度を計測してみてください。

pagespeedinsights使い方1

調べたいサイトのURLを入力して分析をクリックしましょう

pagespeedinsights使い方

上のようにモバイルとパソコンから見た読み込み速度を100点満点で採点してもらえます。

 

PageSpeed Insightsは採点をしてくれるだけではなく、下のような読み込み速度を改善する項目も教えてもらえるので一つ一つ対処することで100点に近づけることができます。

キーリクエストのリプロード改善方法1

マークの見方はとても簡単で下のように理解してください。

優先的に改善すべき項目
が無くなった次に改善すべき項目
合格した項目

今回は優先的に改善すべき項目となっているキーリクエストのプリロードを対処していきたいと思います。


改善策の項目の詳細を確認

表示された改善項目をクリックすると詳しい内容を表示させることができます。

今回の表示内容は下のとおりです。

キーリクエストのプリロード改善方法2

`<link rel=preload>` を使用して、現在ページ読み込みの後のほうでリクエストしているリソースを優先的に取得することをご検討ください。

サイト上で読み込む画像やフォントを優先的に取得すれば表示が早くなることを意味しており、表示されるURLや減らせるデータ量は、使用しているWordPressのテーマによって異なります。

改善すべき詳細が分かったところで実際に対策をしていきましょう。


キーリクエストのプリロード対策

  • プリロードするコードを作成
  • 作成したコードをheader.phpに追記

プリロードするコードの作成

header.phpに追記するコードは下のとおりです。

<!– 編集部分 –>

<link rel=”preload” as=”①” type=”①/②” href=”③” crossorigin>

記入するコードは改善項目に表示された内容により異なるため各自で入力すべき場所を①~③としています。

入力内容
属性を設定します。画像なら「image」、文字なら「font」となります。
①の拡張子を記入します。fontの場合「woff」や「woff2」、「ttf」が多いです。
改善できる項目で表示されるURLを入力

コードの参考例

<!– 編集部分 –>

<link rel=”preload” as=”font” type=”font/woff” href=”URL” crossorigin>
<!– 編集部分 –>

<link rel=”preload” as=”font” type=”font/woff2” href=”URL” crossorigin>
<!– 編集部分 –>

<link rel=”preload” as=”font” type=”font/ttf” href=”URL” crossorigin>

わたしが使用しているWordPressテーマ「THE THOR」では3番目のttfを利用して改善しました。

作成したコードをheader.phpに追記

コードを追記する場所はテーマエディター(header.php)の<head></head>内になります。子テーマではなく親テーマに入力するので間違わないようにしましょう。

キーリクエストのプリロード改善方法4

外観⇒テーマエディター⇒テーマヘッダー(header.php)

WordPressテーマ「THE THOR」の場合

THE THOR(ザ・トール)の場合、カスタマイズ画面で<head></head>内に追記ができます。

キーリクエストのプリロード改善方法3

基本設定⇒高度な設定⇒</head>直上の自由入力エリア

直接親テーマをいじってしまうとテーマのアップデート時に再度追記する必要がありますが、THE THORのカスタマイズ画面で設定した内容は親テーマが更新されても何もしなくてよいので便利です。


キーリクエストのプリロードを改善:まとめ

コードの追記が完了したら再度PageSpeed Insightsで分析を行いましょう。

下のように合格した監査に入っていれば対策成功です。

キーリクエストのプリロード改善方法5

最後に対策方法をもう一度まとめておきます。

  1. PageSpeed Insightsで分析
  2. キーリクエストのプリロードで指摘されたURLを確認
  3. 対策用コードを作成
  4. 作成したコードを<head></head>内に追記
キーリクエストのプリロードを改善する方法
最新情報をチェックしよう!