SEO

【SEO 完全理解】爆速・改善!キーリクエストのプリロード対策

今回はPageSpeed Insightsで確認ができる、キーリクエストのプリロードに注目して、サイトの速度の改善をしていこうと思います。

サイトの速度の早い、遅いはそのままGoogleさんからの評価(つまりSEO)にもなります。

よって、遅いより早いことに越したことはないのです。

【SEO 完全理解】キーリクエストのプリロード対策

今回対処するのは以下の画像にある、キーリクエストのプリロードなのですが、

一体これはなんなのでしょうか?

いまいちイメージがわかない割に、処理に3秒以上かかっているという悪い子です。

キーリクエスト プリロード

キーリクエストのプリロードとは何者なのか?

「キーリクエスト=ページを表示するために必要な要素」

「プリロード(preload)=あらかじめ読み込む」ということです。

HTML、CSS、画像、フォントなどの各種ファイルを読み込む順序について、優先度を指定することを指します。

そのため、これらの読み込みが終わらないとページが表示されません。

一般的に、何も指定しなかった場合データを読み込む時は

親=>子供=>孫=>ひ孫 の順番でデータを読み込んでいくのですが、

親(10秒)=>子供(10秒)=>孫(10秒)=>ひ孫(10秒)

となった場合は、ページの表示まで合計で40秒の時間がかかります。

しかしこのキーリクエストのプリロードを、例えばに行うことによって、以下の様に並列で読み込みを行うことができます。

 親(10秒)=>子供(10秒)=>ひ孫(10秒)
 孫(10秒) 

すなわち、全体で掛かる時間を30秒に減らすことができます。

先ほどの画像の例の場合、

3秒以上ブログが表示される時間がロックされていることになります。これでは、みる気が失せてしまう可能性もあります。

【キーリクエストのプリロード】ワードプレスでの対処方法

それでは、キーリクエストのプリロード問題を解決していきましょう。

キーリクエストのプリロードのためのテンプレートを作る

実は解決のためのフォーマットが決まっています。それは以下です。

hrefにおけるダブルクォーテーションの中を先ほど問題と表示されたURLに置き換えます。

今回はこのリンク
<link rel="preload" as="font" type="font/woff" href="https://corporate-fufu.com/wp-content/plugins/elementor/assets/lib/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0" crossorigin>

どのリンクをコピーしていいかわからない場合は、以下の画像の様に、

対象のURLのところで右クリックして、Copy Link Address(リンクをコピーする)を選択すればOKです

キーリクエスト

<head>~</head>テンプレートを貼り付ける

お次はこのテンプレートを実際のブログに適用していきます。

使っているブログのテーマによって変わってしまうので、方法については一概には言えないのですが

どのテーマにもheader.phpというものあり、その中に先ほど作成したテンプレートの内容を放り込むことによって完了します。

各ブログの管理画面をくまなく探してみましょう。

必ずどこかに<head>~</head>に値を入れる。と言った項目が出てきます!

【キーリクエストのプリロード】対処できたかを確認する

<head>まで反映した状態で、ここで再度チェックをかけてみると。。。。

無事に消えました!!!!!! 感覚的にも速度の違いを感じるほどだと思います。

キーリクエスト

数秒ですが、現代では非常に長く感じると思います。

たかが数秒と思わずに地道に改善を続けていくことでより利用しやすいサイトになっていくと思います。

以上、キーリクエストのプリロードでした!

スポンサーリンク

スポンサーリンク

PVアクセスランキング にほんブログ村
  • この記事を書いた人

ヒゲ

とある会社でエンジニアをやりつつ、家族のためにせっせと投資に励むオジさん。: Udemyの講師やエンジニアに関する文筆業を生業としています。ネット上ではヒゲと呼ばれることが多い。是非フォローして下さい。

-SEO

© 2024 家族経営ブログ