ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
| この記事の要点 |
|
概要
PageSpeed Insights(PSI)は、Googleが無料で提供するWebページの表示速度・パフォーマンス診断ツールです。診断したいページのURLを入力するだけで、表示速度を0〜100点のスコアで評価し、何が遅延の原因かと具体的な改善策を提示してくれます。ページ速度はユーザー体験に直結するだけでなく、Googleの検索ランキング要因でもあるため、SEO施策の一環として欠かせないツールです。
評価の仕組み(Core Web Vitalsとスコア)
PSIのパフォーマンススコアは、表示速度に関わる複数の指標を合成して算出されます。中でも重要なのが、Googleがユーザー体験の核として定めたCore Web Vitals(コアウェブバイタル)です。
| 指標 | 意味 | 良好の目安 |
|---|---|---|
| LCP(Largest Contentful Paint) | 主要コンテンツが表示されるまでの時間(読み込みの速さ) | 2.5秒以下 |
| INP(Interaction to Next Paint) | クリック等の操作に反応するまでの時間(応答性) | 200ミリ秒以下 |
| CLS(Cumulative Layout Shift) | 表示中にレイアウトがずれる量(視覚的安定性) | 0.1以下 |
スコアは色分けされ、90〜100が緑(良好)/50〜89が橙(要改善)/0〜49が赤(不良)です。Core Web Vitalsはランキング要因のため、まずここを「良好」に乗せることを目標にします。
レポートには2種類のデータがあります。フィールドデータは実際のユーザーの計測値(実体験を反映)、ラボデータはGoogleの計測環境で取得した擬似値です。トラフィックが少ないページはフィールドデータが表示されないこともあります。
使い方・手順
1. URLを入力する:PageSpeed Insightsのページを開き、診断したいページのURLを入力して分析を実行します。
2. モバイルとデスクトップを確認する:結果はモバイルとデスクトップでタブが分かれます。一般にモバイルの方が評価が厳しく、現在の検索はモバイルファーストのため、まずモバイルのスコアを重視します。
3. スコアと指標を読む:総合スコアと各指標(LCP/INP/CLSなど)の値を確認し、どこがボトルネックかを把握します。
4. 改善提案を実施する:「改善できる項目」「診断」セクションに、影響の大きい順で具体策が並びます。上から順に対応すると効率的です。
5. 再計測する:修正後に再度計測し、スコアの変化を確認します。改善は一度で終わらず、計測→修正→再計測のサイクルで進めます。
実用例・Tips
レポートで頻出する改善提案と対策例です。
- 画像の最適化:サイズの大きい画像はWebP/AVIFへ変換し、適切な解像度に縮小。
loading="lazy"で遅延読み込みする。 - 使用していないJavaScript/CSSの削減:不要なライブラリやコードを削り、必要な分だけ読み込む。
- キャッシュの活用:静的ファイルに長めのキャッシュを設定し、再訪問時の読み込みを高速化する。
- レンダリングを妨げるリソースの排除:先頭で読み込まれるJS/CSSを遅延・分割し、初期表示を速める。
- サーバー応答時間(TTFB)の短縮:ホスティングやCDN、キャッシュ層を見直す。
- テキスト圧縮の有効化:Gzip/Brotliで転送量を削減し、ダウンロード時間を短縮する。
提案には「推定削減時間」が表示されるため、効果が大きく実装が容易なものから着手すると費用対効果が高くなります。スコアは一度上げて終わりではなく、コンテンツ追加や機能追加のたびに低下し得るため、リリース時の定点観測ツールとして継続的に使うのが効果的です。
注意点・落とし穴
- スコア100は目的ではない:満点を狙うより、Core Web Vitalsを「良好」に保ち、実ユーザーの体験を改善することが本質。
- 計測ごとのブレ:ラボデータは計測タイミングで変動する。数回計測して傾向で判断する。
- ラボとフィールドの乖離:実ユーザー(フィールド)の体感が最終的に重要。両者がずれる場合はフィールドを優先して見る。
- 過度な最適化の副作用:遅延読み込みやコード分割をやり過ぎると、かえって体感が悪化することがある。バランスを取る。
関連リンク
PageSpeed Insightsは表示速度というSEOの一側面を扱うツールです。タイトル・内部リンク・構造化データなど他のSEO施策については「SEO」カテゴリの各記事を併せて参照すると、総合的な最適化につながります。
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript base URL 取得方法|window.location.origin と SSR/Node.js 対応
- 4 YouTube Data API v3 エラー一覧|403/400/404 の主要原因と切り分け
- 5 Spring Frameworkのアノテーション一覧
- 6 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 7 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- IPv6とは|128bitアドレス・コロン16進表記/::省略・リンクローカル・SLAAC・デュアルスタック NEW 2026-06-22 12:34:44
- MAC アドレスフィルタリングの仕組みと限界 | ネットワーク入門 NEW 2026-06-22 12:19:10
- VPNとは|暗号トンネル・サイト間/リモートアクセス・IPsec/SSL-VPN/WireGuardを解説 NEW 2026-06-22 12:19:10
- WebRTC とは ブラウザ間 P2P の音声・映像・データ通信 | ネットワーク入門 NEW 2026-06-22 12:17:25
- HTTP/2 とは 多重化・HPACK・バイナリフレーム | ネットワーク入門 NEW 2026-06-22 12:17:25
- Web通信プロトコル入門 HTTP/2・HTTP/3・WebSocket・gRPC・WebRTC | ネットワーク入門 NEW 2026-06-22 12:17:25
- gRPC とは HTTP/2 + Protocol Buffers の高速 RPC | ネットワーク入門 NEW 2026-06-22 12:17:25
- HTTP/3 (QUIC) とは UDP ベースの低遅延 Web 通信 | ネットワーク入門 NEW 2026-06-22 12:17:25
- WebSocket とは 全二重リアルタイム通信 ws/wss | ネットワーク入門 NEW 2026-06-22 12:17:25
- 証明書と認証局(CA)とは|X.509・信頼チェーン・DV/OV/EV・失効(CRL/OCSP)を解説 NEW 2026-06-22 12:17:24
- ファイアウォールとは|パケットフィルタ・ステートフル・DMZ・次世代FW(L4/L7)を解説 NEW 2026-06-22 12:17:24
- iptables/nftablesとは|テーブル・チェーン・ルール例・永続化をLinux視点で解説 NEW 2026-06-22 12:17:24
- HAProxy とは frontend/backend と設定例 | ネットワーク入門 NEW 2026-06-22 12:17:24
- CDN とは エッジキャッシュ・TTL・Cloudflare/CloudFront | ネットワーク入門 NEW 2026-06-22 12:17:24
- TLS/SSLの仕組み|ハンドシェイク・暗号スイート・前方秘匿性・証明書検証をわかりやすく解説 NEW 2026-06-22 12:17:24
コメントを削除してもよろしいでしょうか?