「PageSpeed Insights」でWebページの読み込み速度を分析
松寿 英次Googleの開発者ツール「PageSpeed tools」の一つとして提供されている「PageSpeed Insights(ページスピード インサイド)」は、Webページがより速く、よりモバイルフレンドリーにする方法を特定することができます。
調査によると応答時間が1秒を超えるとユーザーの思考の流れが止まりページへの関心を失わせるとのこと。
サイトの読み込み速度はネットワーク接続環境に大きく左右されますが、サーバーの設定変更やサイトの修正で改善を図れますし、このあたりはGoogleも推奨しているのでチェックしておきたいところです。
https://developers.google.com/speed/pagespeed/insights/
PageSpeed Insights とは
分析したいWebサイトのモバイルとパソコンの読み込み速度を点数(スコア)で判定し、なおかつ提案をしてくれるツールです。
モバイルはユーザーエクスペリエンスも提案してくれます。スマホサイトまたはレスポンシブ対応も重要な要素として位置付けている表れでしょう。
(2016/12/5追記)
PageSpeed Insights のモバイルページ向けユーザー エクスペリエンス テストはモバイル フレンドリー テストに統合されます。
※モバイルフレンドリーテストについてはこちらのブログを参考にしてください。
スコアは 0~100 ポイント。このスコアの値が大きいほど良いという判定になります。
スコアは85以上が良いとされていますが、画像データが多いサイトなどは一般的に40~60前後の範囲が多いのではないでしょうか。
大きくは2つの項目を測定しているようです。
(1)スクロールせずに見える範囲のコンテンツの読み込み時間
(2)ページ全体の読み込み時間
※ネットワークに依存しない部分(サーバー設定、ページの HTML 構成、画像やJavaScript、CSS などの外部リソースの使用方法)のみを判定。
PageSpeed Insights についての説明はこちらをご覧ください。
https://developers.google.com/speed/docs/insights/about
改善提案の内容
分析するWebサイトのURLを入力し「分析」をクリックするとスコア判定と修正提案が表示されます。
各提案の重要度によってアイコンの色が変わっています。
画像を最適化する
https://developers.google.com/speed/docs/insights/OptimizeImages
画像圧縮ツールの紹介と画像フォーマットの推奨。BMPファイルやTIFFファイルは非推奨です。
圧縮を有効にする
https://developers.google.com/speed/docs/insights/EnableCompression
各ウェブ サーバーが提供している圧縮を有効化。
ブラウザのキャッシュを活用する
https://developers.google.com/speed/docs/insights/LeverageBrowserCaching
サーバーでブラウザのキャッシュを有効化。
レンダリングを妨げる JavaScript を削除する
https://developers.google.com/speed/docs/insights/BlockingJS
スクロールせずに見える範囲の表示に必要な JavaScript のインライン化と遅延の推奨。
CSS の配信を最適化する
https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
外部CSSリソースが小さい場合のインライン化(HTMLドキュメントに直接挿入)の推奨。
リソース(HTML、CSS、JavaScript)を圧縮する
https://developers.google.com/speed/docs/insights/MinifyResources
余分なスペース、改行、インデントなどの不要なバイトの削除。HTML、CSS、Javascriptの圧縮。
サーバーの応答時間を改善する
https://developers.google.com/speed/docs/insights/Server
サーバーの応答が遅くなる要因の排除。
まとめ
Webページの読み込み速度はユーザーのネットワーク接続に大きく左右されます。
また、サイトによっては全ての改善提案を修正することはできないと思いますが、出来る限り解決策を行い、少しでもページの読み込み速度が速くなるように改善していくことが、ユーザー、Googleから評価を得られることにつながっていくのだと思います。
そういった意味でも、最近話題となっているAMP(Accelerated Mobile Pages)の実装もこれから重要な要素になってくるのかもしれませんね。
ちなみに補足として、海外のサイトですが、このようなサイトの速さを分析してくれるところもあります。
GTmetrix:https://gtmetrix.com/
この投稿へのコメント