目次

PageSpeed Insightsについて

　PageSpeed InsightsはGoogleが提供するウェブページのパフォーマンス分析ツールです。このツールはウェブサイトの読み込み速度やユーザーエクスペリエンスを評価し改善点を提案します。
　
　主な機能には次のようなものがあります。

  • スコアの評価：ページのパフォーマンスを0から100のスコアで評価します
  • 改善提案：読み込みを速くするための具体的なアドバイスを提供します
  • モバイルとデスクトップの評価：異なるデバイスでのパフォーマンスを比較できます
  • 実際のユーザーデータ：Web Vitalsを基にした実際のユーザー体験を反映したデータを提供します

    • 　ウェブサイトの最適化を行う際には非常に役立つツールで大まかな項目としては次のようなものがあります。

  • First Contentful Paint (FCP)
  • Largest Contentful Paint (LCP)
  • Total Blocking Time (TBT)
  • Cumulative Layout Shift (CLS)
  • Speed Index

    PageSpeed Insightsの改善点

    　PageSpeed Insightsの各項目を改善する方法について以下に説明します。

    1. First Contentful Paint (FCP)

  • 画像の最適化: 画像を圧縮し適切なフォーマット（例：WebP）を使用する
  • CSSの最適化: 重要なCSSをインライン化し非同期で読み込む方法を検討する
  • サーバー応答時間の短縮: 高速なホスティングサービスを使用しキャッシュを設定する

    • 2. Largest Contentful Paint (LCP)

  • 画像と動画の最適化: LCPに影響を与える大きな要素を最適化する。特に視覚的に重要なコンテンツを優先して読み込む。
  • Lazy Loadingの実装: ページの初期表示に必要ない要素は遅延読み込みする
  • サーバーのパフォーマンス向上: CDNを使用して、ユーザーに近い場所からコンテンツを提供する

    • 3. Total Blocking Time (TBT)

  • JavaScriptの最適化: 不要なJavaScriptを削除しスクリプトを非同期または遅延読み込みする
  • 長時間実行されるタスクの分割: 大きな計算を小さなタスクに分けメインスレッドをブロックしないようにする

    • 4. Cumulative Layout Shift (CLS)

  • サイズ指定: 画像、動画、広告などの要素に明確なサイズを指定する
  • フォントの読み込み: フォントの遅延読み込みを避けフォントのスタイルを指定することでレイアウトの変動を減らす

    • 5. Speed Index

  • リソースの最適化: すべてのリソース（CSS、JavaScript、画像など）の読み込みを最適化し必要なものを優先的に読み込む
  • サーバーの応答速度向上: キャッシュやCDNを活用して、サーバーからの応答を迅速にする

    • これらの改善策を実施することで、PageSpeed Insightsのスコアを向上させることができます。

    改善するためのWordPressのプラグイン

    PageSpeed Insightsの各項目を改善するためのWordPressのプラグインやカスタマイズ方法を以下に示します。

    1. First Contentful Paint (FCP)

    プラグイン

  • WP Rocket: キャッシュを作成しページの読み込み速度を改善する
  • Autoptimize: HTML、CSS、JavaScriptを最適化し読み込み時間を短縮する

    • ポイント

  • 画像やフォントの遅延読み込みを設定する
  • CSSをインライン化して、初期表示を早くする

    • 2. Largest Contentful Paint (LCP)

    プラグイン

  • WP Super Cache: ページのキャッシュを作成しサーバーの負荷を減らす
  • Lazy Load by WP Rocket: 画像の遅延読み込みを実現する

    • ポイント

  • 画像サイズを適切に設定し最適なフォーマット（WebPなど）を使用する
  • サーバーの応答時間を短縮するために、ホスティングを見直す

    • 3. Total Blocking Time (TBT)
    プラグイン

  • Asset Cleanup: 不要なCSSやJavaScriptを無効化して、読み込みを軽くする
  • Perfmatters: スクリプトのロードを最適化し不要なリソースを削除する

    • カスタマイズ

  • JavaScriptの非同期読み込みを設定する
  • プラグインの数を減らし軽量なものを選ぶ

    • 4. Cumulative Layout Shift (CLS)

    プラグイン

  • WP Optimize: 画像のサイズやフォーマットを最適化しレイアウトのシフトを防ぐ

    • ポイント

  • 画像や広告のサイズを明示的に指定する
  • フォントの読み込みを最適化しフォントのスワッピングを避ける

    • 5. Speed Index

    プラグイン

  • Flying Pages: ページのプリフェッチを行い表示速度を向上させる。
    数値的に変わらないかも

    ポイント

  • 必要なリソースの優先順位を設定し重要なコンテンツを早く表示する
  • サーバーの最適化を行いCDNを利用して配信速度を向上させる

    • 　これらのプラグインやカスタマイズ方法を組み合わせて実施することで、PageSpeed Insightsのスコアを向上させることが可能です。実施後は必ず効果を確認し必要に応じて調整を行いましょう。

    WordPressにおけるPageSpeed Insightsの改善についての注意点

    　WordPressで制作した場合、HTMLとCSSや画像で制作されたホームページに比べて圧倒的に数値が悪いです。そのためプラグインをインストールしても思った以上の効果が得られないケースが多いかと思います。また、数値が上がっても体感的に劇的な変化が得られない場合もあります。

    　ただ、未対策よりは対策をした方が良いので最低限の以下のプラグインをインストールすることをお勧めします！

  • Autoptimize
  • Autoclear Autoptimize Cache
    • このページについて(reaction buttonsの検証用です)
    • 良いね (0)
    • 悪いね (0)