ページ

2013-07-12

Web解析ツール「PageSpeed Insights」を使ってウェブサイトの表示速度解析

サイトを見る際に表示までに掛かる時間が長かったりするとそれだけで見るのを諦めたりしますよね。「Webサイトの表示時間が検索順位にも影響する」とGoogleは公式サイトで発表しています。ECサイト等では表示速度は死活問題だったりしますね。ECサイトでなくても、ブログを書いていて自分のブログの表示速度はやはり気になりますね。Googleから無料提供されている「PageSpeed Insights」はそんな疑問に答えてくれるツールです。Webページ表示速度最適化ツール「PageSpeed Insights」はWeb解析だけでなく、改善提案、そしてWebページを自動的に書き換えて最適化してくれます。


    PageSpeed Insights とは
PageSpeed Insights は、ウェブページのコンテンツを解析し、ページの読み込み時間を短くするための方法を提案します。ページの読み込み時間を短縮することで、直帰率が低下しコンバージョン率が上昇する可能性があります。
ということで今回は実際にPageSpeed Insightsを使ってみました。

PageSpeed Insightsで表示速度解析

  1. URLを入力して「ANALYZE」をクリック
  2. まずはPageSpeed Insightsページにアクセスします。「Enter a web page URL」と表示されている入力窓にURLを入力して、赤い「ANALYZE」ボタンをクリックします。


  3. 「Overview」で概要を表示
  4. 「Overview」に該当サイト(当サイト)の解析結果の概要が表示されます。解析したサイトの表示速度が100点満点中何点だったかスコア表示してくれます。ちなみに当サイトのスコアは95点でした。ただし、日本語版ではスコアは出ないようです。
    「Suggestion Summary 」では改善提案を表示してくれます。項目別に表示されている改善提案の前にカッコで付いているアルファベットの色文字が優先度を現しています。今回の改善内容は全て(L)でLow priorityで低い優先度ということになるようです。5つの段階で優先度を表しているようです。優先度表記は以下のようになります。

    • H:High priority(高い優先度)
    • M:Medium priority(中間の優先度)
    • L:Low priority(低い優先度)
    • E:Experimental rules(試験的なルール)
    • A:Already done!(提案はもうありません)

      改善提案の内容
    • リダイレクトを避ける
    • (L)リダイレクトの回数を減らす
    • ブロック リソースを減らす
    • (L)非同期リソースを使用する
    • ペイロードを最小限にする
    • (L)圧縮を有効にする、(L)JavaScript を縮小する、(L)HTML を縮小する
    • ページの読み込みの遅延を最小限にする
    • (L)CSS をドキュメント ヘッドに含める
    • その他
    • (L)ブラウザのキャッシュを活用する、(L)キャッシュ バリデータを指定する、(L)JavaScript の解析を遅延する、(L)Vary: Accept-Encoding ヘッダーを指定する
    それぞれの改善提案の項目をクリックすると、その項目の詳細提案を見ることができます。


  5. Critical Path Explorer(クリティカル パス エクスプローラ)で表示速度を視覚化
  6. Critical Path Explorer(クリティカル パス エクスプローラ)は表示速度を視覚化してくれるツールです。画像、CSS、スタイルシートなどWebを構成している要素を色分けすることで、どんな要素項目にどれだけ時間が掛かっているかを理解することが出来ます。

上記の通り、PageSpeed Insightsは表示速度解析だけでなく、どうしたらより効果的な改善が行なえるかといったWebサイトの改善提案まで行なってくれるのですが、それを実行しようとするとどうしたらいいか悩んでしまいます。システムに精通していない素人にはそこはちょっと敷居が高いですよね。そこで登場するのが「PageSpeed Service」というGoogleが無料で提供しているウェブサイト表示高速化サービスです。これについては次回まとめるつもりです。


関連記事



News Source Site


0 件のコメント:

コメントを投稿