ワードプレス キーリクエストのプリロード

その他

「キーリクエストのプリロード」意味と改善する方法【ワードプレス】

 

はたらく細胞BLACK アニメ 無料視聴

無料視聴

2021/1/13

「はたらく細胞BLACK」アニメフル動画無料視聴!

  2018年から「モーニング」にて連載されており、2019年からは『月刊少年シリウス』にも連載されている「はたらく細胞BLACK」 「はたらく細胞BLACK」は、病気を患っている不健康な人間の体内をブラック企業と見立てた作品であり、本編ある「はたらく細胞」では出番が少ない薬剤や抗生物質が頻繁に登場しています。   こんな方におすすめ 「はたらく細胞BLACK」を見たいけどお金を払うのはちょっと・・・ 「はたらく細胞BLACK」のアニメ全話を無料で見たい!   結論から言って ...

ReadMore

ソシャゲ最短最速サービス終了ランキング

ソシャゲ

2021/1/12

【2021】歴代ソシャゲの最短最速サービス終了ランキング【サ終】

  どうもみなさん、こんにちは。 今では大盛り上がりを見せているソシャゲ業界ですが、中には、リリース開始から直ぐにサービス終了となってしまったものも多数存在します。 ということで、今回は「歴代のソシャゲで最速でサービス終了となってしまったソシャゲ」について紹介していきたいと思います。   目次1 【2021】歴代ソシャゲの最短最速サービス終了ランキング【サ終】1.1 カオスサーガ1.2 漫☆画太郎ババァタワーバトル1.3 パズルキングダム1.4 暗黒英雄 -Dark Age-1.5 妖 ...

ReadMore

ダンまち アニメフル動画 無料視聴

無料視聴

2021/1/13

「ダンまち 一期&二期&三期」アニメフル動画無料視聴!

   2013年から「GA文庫」にて刊行され、現在では外伝を含め30巻が刊行されている「ダンジョンに出会いを求めるのは間違っているのだろうか(ダンまち)」 またテレビアニメが、2015年に第一期、2019年に第二期、2020年に第三期が放送されています。 駆け出し冒険者である主人公「ベル・クラネル」が、憧れの冒険者である「アイズ・ヴァレンシュタイン」と、釣り合う冒険者になるために繰り広げる大冒険は見どころ満載です!   こんな方におすすめ 「ダンまち」を見たいけどお金を払うのはちょっ ...

ReadMore

とある魔術の禁書目録(インデックス)強さランキング

最強キャラランキング

2021/1/12

【2021】とある魔術の禁書目録(インデックス)強さランキング

  目次1 とある魔術の禁書目録(インデックス)とは?1.1 とある魔術の禁書目録(インデックス)のあらすじ2 とある魔術の禁書目録(インデックス)のアニメを視聴するなら?3 【2021】とある魔術の禁書目録 強さランキング3.1 アンナ= シュプレンゲル3.2 魔神オティヌス3.3 アウレオルス=イザード3.4 上条当麻3.5 コロンゾン3.6 エイワス3.7 上里翔流3.8 一方通行3.9 アレイスター=クロウリー3.10 サミュエル=リデル=マグレガー=メイザース3.11 ガブリエル3.1 ...

ReadMore

オーバーロード 強さランキング 2021年

最強キャラランキング

2021/1/12

【2021最新】オーバーロード 強さランキング

目次1 オーバーロードとは?1.1 オーバーロードのあらすじ2 オーバーロードのアニメを視聴するなら?3 オーバーロード 強さランキング3.1 第8階層のあれら3.2 ルベド3.3 ツァインドルクス・ヴァイシオン3.4 アインズ・ウール・ゴウン3.5 キュアイーリム=ロスマルヴァー3.6 ガルガンチュア3.7 シャルティア・ブラッドフォールン3.8 デュープダークネスドラゴンロード3.9 マーレ・ベロ・フィオーレ3.10 漆黒聖典 番外席次3.11 セバスチャン3.12 アルベド3.13 コキュートス3. ...

ReadMore

転生したらスライムだった件(転スラ)強さランキング 2021

最強キャラランキング

2021/1/12

【2021】転生したらスライムだった件(転スラ) 強さランキング TOP50

  目次1 転生したらスライムだった件(転スラ)とは?1.1 転生したらスライムだった件のあらすじ2 転生したらスライムだった件(転スラ)を視聴するなら?3 転生したらスライムだった件(転スラ) 強さランキング TOP503.1 リムル・テンペスト3.2 ヴェルダナーヴァ3.3 ギィ・クリムゾン3.4 神楽坂優樹3.5 ミリム・ナーヴァ3.6 クロエ・オベール3.7 ルドラ・ナスカ3.8 ラミリス3.9 ルシア3.10 ヴェルザード3.11 ヴェルグリンド3.12 ヴェルドラ・テンペスト3.13 ...

ReadMore

オーバーロード アニメ動画 無料視聴

無料視聴

2021/1/13

【2021】「オーバーロード 一期&二期&三期」アニメフル動画無料視聴!

  また、2015年にアニメ第一期、2018年にアニメ第二期&第三期が放送されている『オーバーロード』 2012年から現在までKADOKAWA エンターブレインにて刊行されている異世界ダークファンタジー。   こんな方におすすめ オーバーロードを見たいけどお金を払うのはちょっと・・・ オーバーロードのアニメ全話を無料で見たい!   大丈夫です! 結論から言ってしまうと、動画配信サービスの無料トライアルを利用することで、『オーバーロード』を無料で視聴することができます。 ...

ReadMore

Re:ゼロから始める異世界生活 リゼロ強さランキング 2021年

最強キャラランキング

2021/1/12

【2021年最新】Re:ゼロから始める異世界生活(リゼロ)強さランキングTOP46

  目次1 Re:ゼロから始める異世界生活(リゼロ)とは?1.1 Re:ゼロから始める異世界生活(リゼロ)のあらすじ2 Re:ゼロから始める異世界生活(リゼロ)を視聴するには?3 Re:ゼロから始める異世界生活(リゼロ)強さランキング3.1 ラインハルト・ヴァン・アストレア3.2 サテラ3.3 レイド・ヴァン・アストレア3.4 ラム(角あり)3.5 パンドラ3.6 レグルス・コル二アス3.7 セクメト3.8 神龍ボルカニカ3.9 フリューゲル3.10 セシルス・セグメント3.11 ハリベル3.1 ...

ReadMore

 

こんな方におすすめ

  • サイトのスピードを速くしたい
  • キーリクエストのプリロードの意味を知りたい
  • キーリクエストのプリロードの改善方法を知りたい

 

WordPressでブログを運営していると、サイトのスピードが遅くなってしまうのは避けられません。

サイトのスピードが遅ければ遅いほどユーザーの離脱率が高くなり、表示に3秒以上かかるモバイルページでは53%のユーザーが離脱しているようです。

いくら良いサイトを作ったとしてもユーザーが離脱してしまえば意味がありません。

なので改善できる項目は改善してユーザーが少しでも離脱しないようにしていきましょう。

 

PageSpeed Insights

 

google「PageSpeed Insights」で自分のサイトを分析することで、上の画像のようにサイトの速度を数値化して教えてくれます。

また、自分のサイトが遅くなってしまっている原因を突き止めることができます。

まだgoogle「PageSpeed Insights」を使ったことがないという人は使うことをお勧めします。

ブログが遅くなる原因はいくつもありますが、本記事ではその中の1つである「キーリクエストのプリロード」の解決方法を述べていきます。

 

こちらもCHECK

PageSpeed Insights 使い方
PageSpeed Insightsとは?使い方と各項目をご紹介

続きを見る

 

 


「キーリクエストのプリロード」とは、どういう意味か

興味がない人は飛ばして下さい

 

PageSpeed Insights

 

 

google「PageSpeed Insights」に出てきた「キーリクエストのプリロード」をクリックすると下記のような文章が出てきます。

 

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

参考:Preload Key requests

 

この文章に出てきた「preload」とは「pre(前部に)」「load(読み込む)」という意味です。

簡単に言うと、サイトはHTMLやCSS、JavaScriptなどのプログラミング言語によって構成されています。

このプログラミング言語のファイルには読み込まれる順番が決まっていて、読み込まれた順にサイト上に表示されるようになっています。

その中で、指定されたファイルが後の方に読み込まれてしまってるためにサイトの表示速度が遅くなってしまっているので、指定されたファイルを「preload(先に読み込む)」ことでサイトの表示速度を速くして問題を解決して下さいという意味です。

「preload」の意味が理解できたところで、本記事の本題であるキーリクエストのプリロードを改善していきましょう。

 



 

「キーリクエストのプリロード」を改善する方法

 

ワードプレス キーリクエストのプリロード

 

まず、google「PageSpeed Insightsで自分のサイトを分析します。

すると、改善できる項目の欄に「キーリクエストのプリロード」があるのでクリック、すると「キーリクエストのプリロード」の下にURLが出現がします。

この出現したURLを「先に読み込むようにすればサイトの表示速度が速くなりますよ。」ってことです。

僕のブログの場合だと、18.39秒と横に書いてあるので改善することで18.39秒速くなります。(※画像参照)

それでは実際に改善していきます。

 

ワードプレス キーリクエストc

 

先ほど出現したURLを右クリックして、「リンクのアドレスをコピー」を押して下さい。(URLが複数ある場合はすべてコピー)

 

メモ帳

 

先ほどコピーしたリンクのアドレスをメモ帳などに貼り付けて下さい。

(僕の場合は出現したURLが2つあったのでメモ帳に2つ貼り付けました。)

 

メモ帳に貼り付けたURLを下記の「ここに貼り付け」と書いてある場所に貼り付けて下さい。

 

<!--キーリクエストのプリロード --><link rel="preload" as="font" type="font/woff" href="ここに貼り付け" crossorigin>

 

僕の場合は下記のようになりました。

 

(僕の場合は2つだったので2つ)

<!-- キーリクエストのプリロード -->

<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管理 アフィンガー5

 

「ダッシュボード」→「AFFINGER5管理」→「その他」の順に開いて下さい。

 

AFFINGER5 上級者向け

 

 

下にスクロールして「上級者向け」と書いてある場所を探して下さい。

探したら「</>コードの出力」の下にある「headに出力するコードを....」と書いてあるところに<!--キーリクエストのプリロード->を貼り付けましょう。

すでに何かコードが書かれてる場合は、そのコードは消さずにその下に貼り付けるようにして下さい。

AFFINGER5の他にも、テーマによっては親テーマを変更しなくても改善できるテーマもあるので探してみて下さい。

 



 

「キーリクエストのプリロード」が改善されたか確認

PageSpeed Insights キーリクエストのフリロード

 

<head>〜</head>に<プリロード>を貼り付けることができたら、改善されたかどうか確認するために再度Google「PageSpeed Insights」で自分のサイトを分析してみましょう。

確認してみると画像のように改善できる項目から「キーリクエストのプリロード」が消えていますね。

 

ワードプレス キーリクエストのプリロード

 

改善できる項目からさらに下にスクロールしていくと、「合格した監査」と言う項目があります。

上の画像のように、合格した監査の中にキーリクエストのプリロードが入っていれば改善成功です。

 

消えない場合はキャッシュしてから確認

ワードプレス Autoptimize

 

「Autoptimize」などのキャッシュプラグインを導入している場合は、キャッシュしないと改善されない場合があります。

本記事では、「Autoptimize」のキャッシュのやり方を説明します。(と言ってもすぐ終わります。)

上の画像のように、画面の上部にあるAutoptimizeにカーソルを合わせると「キャッシュの削除」が出てくるのクリック。

これでキャッシュが削除されたと思うので、再度カーソルを合わせて確認しましょう。

 

ワードプレス Autoptimize

 

画像のようにサイズが0.00 Bとなっていれば成功です。

これで再度、「PageSpeed Insights」で「キーリクエストのプリロード」が改善されたか確認しましょう。

 

僕の場合は、「キーリクエストのプリロード」の他にも改善できる項目がたくさんあるので、改善に取り組んでいこうと思います。

 

 

-その他
-,

© 2021 HiEA-ブログ- Powered by AFFINGER5