SEO対策

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

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

kyousuke

元会社員 / 独立3年目 - 2020年3月 → 収入7桁達成 - 2020年3月 →「HiEA-ブログ-」開設。 - 年齢22歳 生年月日1998 / 03 / 06 - 普段は自宅に引きこもりつつ読書や映画鑑賞、記事を書いています。 ゲームも好きなので、たまにゲームもやったりしています。

 

過剰同調性 特徴 克服方法

コミュニケーション

2020/10/13

空気を読みすぎる過剰同調性の克服方法と付き合い方

    「相手に気を使いすぎてしまう」「相手の機嫌を伺ってしまう」 仕事や恋愛などにおいてこのような経験がありませんか? このような人はその場の空気を読みすぎてしまう「過剰同調性」の傾向があります。空気を読むことはコミュニケーションにおいて非常に重要なことですが、空気を読みすぎてしまうのは別です。 本記事では、過剰同調性について解説し、改善する方法をご紹介します。     INDEX1 過剰同調性とは2 過剰同調性の特徴とは2.1 空気を読みすぎてしまう2.2 とに ...

ReadMore

自尊心とは 自尊心の高め方

コミュニケーション

2020/10/11

「自尊心」とは?自尊心が低い人の特徴と高める方法

    「自分はどうせ何も出来ない」「他の人が褒められていると嫉妬してしまう」「周囲に流されやすい」 自尊心が低い人というのは、このような気持ちに陥りやすいです。みなさんはこのような気持ちがありますか? 少しでも当てはまるようなら、本記事でご紹介する「自尊心を高める方法」を是非実践してみてください。きっと自分に自信が持てるようになりますよ。   INDEX1 自尊心とは何か2 「自尊心」と「プライド」の違いとは3 「自尊心」と「自己肯定感」の違いとは4 自尊心が低い人の特徴4 ...

ReadMore

傾聴 意味 効果 使い方

コミュニケーション

2020/10/9

【傾聴とは?】傾聴の意味や効果、使い方をご紹介

    コミュニケーション能力は現代社会において、最も重要なスキルであり、仕事やプライベートなど様々な場面で必要とされています。 そのためコミュニケーション能力が低いために、職場の人間関係や友人関係などにおいて悩んでいる人も少なくありません。 コミュニケーション能力が高い人=会話力が高い人と捉えられがちですが、それだけではありません。相手の話を真剣に聞き共感することで相手が本音で話せる環境を作ることのできる「傾聴」もコミュニケーションにおいては非常に重要です。 傾聴は、カウンセリングや ...

ReadMore

バックトラッキング オウム返し コミュニケーション

コミュニケーション

2020/10/8

信頼関係を構築する「バックトラッキング」の心理学的効果と具体例

     「上手にコミュニケーションを取りたい」「人に好意や親近感を抱いてほしい」 こんな経験が誰にでもあると思います。 コミュニケーションが上手な人や人に好意や親近感を抱かれる人になるには、相手の話をよく聴いてあげて、受け入れてあげることが重要です。 そんな時に役に立つのが「バックトラッキング」という心理学テクニックです。 バックトラッキングをうまく活用することで、相手に好意や親近感を抱かせ信頼関係を構築することができます。 本記事ではそんなバックトラッキングについて説明していきます ...

ReadMore

イエスセット 心理学 効果 具体例

コミュニケーション

2020/10/8

イエスセット(yes set)とは?心理学的効果と使い方【具体例あり】

    絶対に相手に「YES」と言わせたい場面ってありますよね。 例えば、「営業での商談」「好きな異性へ告白する時」など。 そんな時に役立つ心理学テクニックが「イエスセット(yes set)」です。 本記事ではそんなイエスセットをご紹介していきます。   こちらもCHECK こちらもCHECK     INDEX1 イエスセット(yes set)とは2 イエスセットの使い方3 あのタモリさんもイエスセットを使っていた4 イエスセットをする上での注意5 バッ ...

ReadMore

開放性の法則 心理学

コミュニケーション

2020/10/7

相手との距離を縮める「開放性の法則」の心理学的効果と使い方

    皆さんは職場の人とどのような会話をしていますか? 中にはプライベートの話はできるだけ避けている人もいるのではないでしょうか。 しかし、職場でいい人間関係を築きたいのであれば、プライベートの話を避けずに、話すことをオススメします。 なぜなら、人間には「開放性の法則」というものがあるからです。 開放性の法則は、仕事や職場、恋愛などのプライベート面など、あらゆる場面で相手に親近感を抱かせることのできる心理テクニックです。 本記事では、開放性の法則についてご紹介していきます。 &nbs ...

ReadMore

コミュニケーション

2020/10/7

【人との信頼関係を築く】ミラーリングの心理学的な効果とやり方

    「コミュニケーションがあまり得意から人と仲良くなれない・・・。」「職場の先輩や上司に好意を抱いてもらうにはどうすればいいんだろう・・・。」こんな経験誰でも一度はあるかと思います。 こういった悩みを簡単に解決するには「ミラーリング」が非常に有用な方法です。 ミラーリングは様々な場面で活用することができる心理学で、人間関係を改善し円滑にするためにとても役立つテクニックです。 本記事ではそんなミラーリングについて紹介していきます。   こちらもCHECK こちらもCHECK ...

ReadMore

PageSpeed Insights 使い方

SEO対策

2020/10/7

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

    こんな方におすすめ PageSpeed Insightsの使い方が分からない PageSpeed Insightsを試してみたけど項目内容がわからない   サイトはスピードが命といっても過言ではありません。 2018年7月からスピードアップデート(Speed Update)が実装されました。 スピードアップデートとはモバイル向けページの読み込み速度が検索エンジンの評価対象に加わり、読み込み速度が極端に遅いページの検索順位に影響を及ぼすアルゴリズムのことです。 注意すべ ...

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」で「キーリクエストのプリロード」が改善されたか確認しましょう。

 

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

 

 

  • この記事を書いた人

kyousuke

元会社員 / 独立3年目 - 2020年3月 → 収入7桁達成 - 2020年3月 →「HiEA-ブログ-」開設。 - 年齢22歳 生年月日1998 / 03 / 06 - 普段は自宅に引きこもりつつ読書や映画鑑賞、記事を書いています。 ゲームも好きなので、たまにゲームもやったりしています。

-SEO対策
-,

© 2020 HiEA-ブログ- Powered by AFFINGER5