Webページの表示速度を分析できるツールとして、Google が提供している
「PageSpeed Insights（PSI）」 があります。
URLを入力するとページのスコアを測定し、改善提案を表示してくれます。

pagespeed.web.dev
PageSpeed Insights
https://pagespeed.web.dev

しかし、この「サイトの改善点」、何をすればよいのか分からないという方も多いと思います。

また、改善策として以下のような対策をよく聞きます。

  • 画像をwebp形式にして最適化する
  • css, jsファイルを圧縮してファイルサイズを軽くする
  • 不要なcss, jsの記述を削除してする。

しかし、

  • サイト全体の画像をwebpに設定し直すのは大変
  • 不要なcss, jsの記述ってどれ?

という方も多いのではないでしょうか?

そこで今回は、実際に当社サイトの TOP ページで、
スコアを改善できるか試してみました。

現在のスコアを確認

まずは、現在のスコアを確認

PC – 80

SP – 42

PC版は良い感じですが、SP版はイマイチですね…
SP版は、ネットワーク環境が良くない前提でスコアテストが行われるため、
全体的にスコアが低くなりがちです。

原因を調査

改善リストを確認したところ

  • レンダリングをブロックしているリクエスト
  • Javascriptの実行にかかる時間の低減
  • メインスレッド処理の最小化

あたりがポイントになりそうでした。

レンダリングをブロックしているリクエスト

ページを描画する前に CSS や JS の読み込みを待ってしまうことで、表示が遅くなる問題です。
対策としては、cssやjsの読み込みとページの読み込みを並行して行うことになります。


cssは下記のように、rel要素をpreloadに変更することで、並行処理化できます。

変更前のコード

<link rel="stylesheet" href="style.css" type="text/css" as="style">

変更後のコード

<link rel="preload" onload="this.onload=null;this.rel='stylesheet'" href="style.css" type="text/css" as="style">



jsの場合はdefer要素を追加します。

変更前のコード

<script type="text/javascript" src="script.js"></script>

変更後のコード

<script type="text/javascript" src="script.js" defer></script>

ただし、並行して表示するということは
一時的にスタイルやスクリプトが適用されていない状態でページを表示するということになり、
サイトの読み込み時に一瞬表示崩れが発生する場合があります。

そのため、全ての要素を並行処理するのではく、
メインビジュアルなどの初期表示に関連するファイルは並行処理させない、といった工夫が必要です。

この項目の対応をおこなった後にスコアを確認したところ、
レンダリングをブロックしているリクエストは「5550ミリ秒」から「600ミリ秒」に大幅改善されているにもかかわらず、総合スコアは33と下がってしまいました。

Javascriptの実行にかかる時間の低減

本サイトはWordPressを使用しているのですが、投稿記事のカスタマイズに様々なプラグインを設定しています。

そして、プラグインを複数読み込むということは、その分処理時間が増えてしまいます。

本サイトのTOPページでは、プラグインを使用しているところはなかった為、
TOPページでは、wp_head();メソッドを読み込まないように調整しました。

変更前のコード

wp_head();

変更後のコード

if (!is_front_page()) {
    wp_head();
}

ただし、使用しているWordPressテーマ・環境によっては表示に影響が出る為、
事前チェックは必須です。
使っていないプラグインが有効になっていた場合は無効化する、といった方法も有効だと思います。

メインスレッド処理の最小化

上記の「レンダリングをブロックしているリクエスト」「Javascriptの実行にかかる時間の低減」を修正したところ、この項目は自然に解消されました。

ただし、JavaScript の読み込み方に依存する部分が多いため、ケースによって調整は必要です。

スコアを再チェック

これでスコアを再度確認しました。

しかし35と、当初より下がったままです..
改善項目のリストからは消えていっているのに、スコアは改善されません。

スコアの仕組みを再確認

実は、今まで対応した部分は、表示速度の改善にはつながるものの、
直接的なスコアの改善にはつながりません。

スコアの改善を行うためには指標の「First Contentful Paint」「Largest Contentful Paint」
を改善する必要があります。

「First Contentful Paint」はページ最初の要素が表示されるまでの時間、
「Largest Contentful Paint」はページ内で最も大きいサイズの要素が表示されるまでの時間、
となっており、多くの場合、メインビジュアルが表示されるまでの時間がスコアに直結しています。

メインビジュアルの表示が終わったタイミンクでの時間が計測されるため、メインビジュアルがアニメーションだったり、スライドショーになっているサイトは、Page Speed Insightsの面ではかなり不利だといえます。

メインビジュアル表示の高速化

メインビジュアルは、多くのサイトで画像になっていると思います。
このようなサイトの場合、メインビジュアル画像を早く読み込む必要があります。

読み込みを優先化させるために、imgタグを下記のように変更しました。

変更前

<img src="mv_img.jpg" width="1000" height="500" alt="">

変更後

<img src="mv_img.jpg" width="1000" height="500" alt="" loading="eager" decoding="async" fetchpriority="high">

さらに、<head>タグ内に、メインビジュアル画像を事前読み込みするためのタグも追加します。

<head>タグ内に追加するコード

<link rel="preload" href="mv_img.jpg" as="image" fetchpriority="high">

これで再度スコアチェック。

PC – 90

SP – 55

ようやくスコアの改善ができました。

SEOの目的のために、スコアを改善するのは良くない??

上記のことから、スコア改善にはさまざまな調査・工夫が必要であり、手軽にスコアを伸ばす事は困難という事が分かりました。

Google公式ページでも、
「全般的に優れたユーザー エクスペリエンスを提供できるよう、サイト所有者の皆様には、Core Web Vitals を改善することをおすすめします」
という記載がある一方、
「SEO 上の理由のためだけに満点を取ろうとするのは、有効な時間の使い方とは言えないでしょう。」
とあります。

【参考記事】

https://developers.google.com/search/docs/appearance/page-experience?hl=ja

サイトの評価を上げる為に、Page Speed Insightsのスコア改善に固執するのは良くない場合もあります。

目的に合ったホームページ改善を進めよう

ホームページ改善は、目的によって優先度が変わります。

▼サイト流入を増やしたい
→ コンテンツの質・量を増やし、検索ユーザーに役立つ情報を届ける

▼お問い合わせ・求人応募を増やしたい
→ 導線設計・CTA・フォーム改善が効果的

Page Speed Insights スコアはあくまで「参考値」です。
目的を考えて、よいホームページ改善を続けましょう！！