ページスピードインサイト PageSpeed Insights 活用例
zio
今回の記事は
Googleの PageSpeedInsightsを活用して
- 自分のサイトのページスピードを計測
- 計測したデータとアドバイスを活用して、必要な対策をやってみた！
という記録です。有料プラグインに頼らずにどこまで数値を改善できたかレポートします。
＼
広告｜AdSense
ページスピードインサイト
PageSpeed Insightsとは？
Googleが提供しているWebサイトの表示スペード・処理スピードなどを計測する無料ツールです。
ページスピードインサイトと読みます。PageSpeed Insightsは5つの数値を計測します。
広告｜AdSense
指標の意味
FCP:First Contentful Paint
目標 1秒未満：ユーザーがURLをクリックしてから、サイトを読み込みはじめるまでの時間のことです。
FCPを低下させる原因は
- サーバーの応答に時間がかかっている
- 重い画像が埋め込まれている
- Webフォントの読み込みに時間がかかっている
- 不要なファイルの読み込みを行っている
FCPスコアの改善ポイントは
- 画像サイズと広告表示領域の指定する。
- Webフォントの使用を最小限に抑える
ことです。
LCP：Largest Contentful Paint
目標時間 2.5秒以内：最大コンテンツが表示されるまでの時間のことです。
LCPを低下させる原因は
- サーバーの応答に時間がかかっている
- JavaScriptやCSSの*レンダリングがブロックされている
- 重い画像や動画、長いコードなどの読み込みに時間がかかっている
- 容量の重い画像が埋め込まれている
＊レンダリング：プログラミング言語を翻訳して、指定された画像を表示すること。
LCPの改善ポイントは
使っていないJavaScriptでやCSSを遅延読み込みをする。キャッシュを利用する、画像を圧縮する、次世代の画像フォーマットを利用することです。
TBT：Total Blocking Time
目標 200ミリ秒以内：最初のコンテンツが表示されてから、ユーザーが操作できるまでの時間のことです。
TBTを低下させる原因は
- JavaScriptやCSSの影響でレンダリングがブロックされる
- 画像・ファイル・フォントの影響でレンダリングがブロックされる
- サードパーティ製のコードによってレンダリングがブロックされる
TBTの改善ポイントは
サードパーティ製のコードの影響を低下させる、JavaScriptの実行にかかる時間を短縮する、メインスレッドの作業を最小化する、リソース数を削減し転送するサイズも小さくすることです。
CLS：Cumulative Layout Shift
目標 0.1未満：レイアウトのズレ幅を表します。
CLSを低下させる原因は
- サイズ指定のない画像が埋め込まれている
- JavaScriptで動的コンテンツが埋め込まれている
＊動的コンテンツ 見る人や見る場所で、表示される内容が変わるコンテンツ
例）Web広告など
CLSの改善ポイントは
サイズ指定されていない画像にサイズを指定する、JavaScriptで埋め込まれている動的コンテンツ（広告やSNS、マップなど）のサイズを指定（予約する）WebフォントとCSSのレンダリングの最適化を行います。
SI：Speed Index
目標スコア3.8秒以内：Webページが読める状態になるまでの時間です。
SIを低下させる原因は
- JavaScriptの処理時間が長い
- Webフォントの読み込みに時間がかかっている
SIの改善ポイントは
JavaScriptの処理時間の短縮、メインスレッドの作業を最小限にする、Webフォントの使用を最小限に抑えることです。
広告｜AdSense
ページスペードの計測方法
実際にページの測定をしてみます。
- 上記URLよりPageSpeed Insightsにアクセスします
- 表示された枠内に計測したいページのURLを入力し[分析]をクリックします。
広告｜AdSense
計測結果の比較
トップページのhttps://zio-start.comを計測しました。初めての計測結果と色々試してみた後の結果を比較しました。大幅に改善することができました。
初回計測 2023/5/18
最終計測 2023/5/29
広告｜ConoHa WING
具体的にやったことは？
具体的にzio-start.comのトップページに行ったことを説明します。ざっくりと説明すると
- 画像のデータ量を小さくした。
- デフォルトのプラグインを活用して、JavaScript・CSS・画像を圧縮した。
- 不要な機能を無効化した。
- 不要になったコードを削除した。
ということを行いました。
画像をPNGからJPEＧに変えた
画像のデータ量を小さくする
PNGの場合
サイズ：30,703バイト
JPEGの場合
サイズ：20,911バイト
両方とも300×300pxの画像を使用しました。
上記の通り、PNG画像よりJPEG画像の方が10,000バイト（10KB）軽くなります。
＊変更後 〇 の値はパフォーマンスの点数です。
変更前 23
変更後 28
トップページに表示する画像（サイトアイコンやブログのメイン画、サムネイルなど）全14画像をPNGからJPEGに置き換えました。CLSは0.541から0.256に改善されました。
デフォルトプラグインを活用した
JavaScript・CSS・画像を圧縮
変更後 39
契約しているレンタルサーバーConoHa WING(コノハウィング)が提供している機能の一つ、WEXALを有効にしました。TBTが1700ミリ秒から730ミリ秒まで改善しました。
WEXALはレンダリングの高速化とHTTPレスポンスの高速化を行ってくれるページスピード高速化ツールです。
＊詳しくは WEXAL｜https://www.wexal.jp/
ページトップのスライダーを変更した
不要な機能を無効化
変更後 43
これまで画面トップで使っていたJetPack スライダーをテーマ純正プラグインのVK Block レイアウト スライダーに変更しました。
レポート中の「レンダリングを妨げるリソースの除外」にJetPackスライダーが上がっていたので試してみました。CLSが0.233から0.017まで大幅に改善されましたが、TBTがまた増加してしまいました。
画像圧縮を設定
画像のデータ量を小さくする
変更後 55
WEXALの機能：画像圧縮を有効にして圧縮率を70％に設定しました。
FCP、SIの数値が改善されました。
画像・JavaScript・CSSの最適化
JavaScript・CSS・画像を圧縮
画像のデータ量を小さくする
不要な機能を無効化
変更後 62
同じくWEXALの機能：画像・JavaScript・CSS最適化を有効にしました。具体的には
- HTML/JS/CSSから不要なコードを取り除く
- HTML/JS/CSSの圧縮
- 画像の圧縮や減色
- 画像の次世代フォーマット変換
を行ってくれます。
また画像・JavaScript・CSSのLazyLoad(遅延読込)を有効化しました。
増加していたTBTの値が1540から490と大幅に改善されています。
＊この時、JetPackプラグインでも遅延読込が有効になっていたので、JetPackプラグインの設定は無効化しました。
Googleアナリティクスをタグマネージャーで管理
変更後 76
それまではLightningの中のGoogle*アナリティクス管理機能を使っていましたが、Googleタグマネージャで管理してみました。
TBTの値が、490から380に改善され、LCPの値も5.0から3.8に改善されました。二つはレンダリングブロックでスコアが低下するので、もしかしたらLightningと他のプラグインが干渉していたのもしれません。
実はこの時、Googleアドセンスの承認申請中でした。
「アドセンスの承認申請用コードも、タグマネージャで設定したら早くなるかも…。」と思って設定してみましたが、所有権の証明が無効になり、設定から1時間後に不合格の通知が届きました。みなさん、気をつけて！
アドセンス合格後、申請用コードを削除
不要なコードを削除
変更後 91
2023/5/28にGoogleアドセンスの合格通知が届いたので、早速、申請用コードを削除しました。申請用コードは自動広告の配信コードでもありますが手動配信にする予定だったので、削除しました。これにより、TBTの数値がかなり改善され、パフォーマンス全体のスコアも91まで改善しました。
広告｜AdSense
まとめ
スタート 2023/5/18
対策後 2023/5/29
ページスピードを既存のプラグインで解決
トップページのページスピードを改善しました。
- 画像やJavaScript・CSSの圧縮はレンタルサーバーConoHa WING(コノハウィング)が提供している機能で行うことができました。JPEG画像のみ画像圧縮が適応されるようなので、メディアにアップロードする際はJPEGがおすすめです。
- ページスピードを低下させている原因の一つに、プラグイン同士の干渉もあるようです。似たような機能がある場合は、交互に有効にして数値を見比べてみてください。また不要なプラグインは無効にするか削除してください。今回の実験では、不要な物を削除することが多かったと思います。
- 簡単にページスピードを改善したい場合は、圧縮系プラグインを利用してみてください。
ぜひPage Speed Insightsを活用してみてください。指標の意味が分かると改善の方向性も見えてきます。トップページだけでなく、他のページでもページスピードの改善を図りたいと思います。また新しい方法をみつけたら、みなさんにも報告します。また覗きにきてください。
最後までお読みいただきありがとうございました。
広告｜AdSense
