ウェブ、ショウジン

Chromeのエクステンション「Page Speed」を使ってサイトのパフォーマンスを計測

2011-10-26
Category
Web技術

FirefoxやSafariとかでも計測できるけれど(あと、Webサービスでもいろいろある)Chromeのこのエクステンションがなかなかよいのでメモ。

有名なAmazonの調査の話(表示速度が0.1秒遅くなると売上が1%減少する)とか、Googleの調査の話(表示速度が0.5秒遅くなると検索数が20%減少する)とか、Googleが検索のアルゴリズムにページの読み込み速度を取り入れたとか、ここ数年でより「表示、反応の早いページ、サイト作り」が大事になってきているので、サイトの読み込み速度の現状を把握するのはもちろんのこと、その向上のための施策をいろいろと示してくれるこのエクステンションはなかなか有り難い存在かと思います。

*Google ウェブマスターツールの「Labs」でも「サイトのパフォーマンス」ってところで、全体の何%のサイトよりも遅い、早い読み込み時間だってことは見ることができます。

site_performance

Page Speedをインストールする準備

Chromeのアドレスバーに「chrome://flags」と入力してReturn。試験運用機能の一覧が表示されるので、その中の「試験運用版の拡張機能API」という項目を有効にします。

chrome_flags

そしてChromeを再起動。

Page Speedをインストール

Google CodeにあるPage Speedのダウンロードページに行き、「Installing Page Speed」という見出しのブロックにある「click here to install Page Speed for Chrome」というリンクテキストをクリック。

するとブラウザウィンドウ左下に「破棄」「続行」というボタンが出現するので、「続行」をクリック。

continue

これでPage Speedを利用する準備ができました。

Page Speedの使い方

Chromeで、パフォーマンスを調べたいページを表示させた状態で、Macだと[command]+[option]+[i]を、Windowsだとキーボードの[Ctrl]+[Shift]+[i]、同時に押します。

すると開発者向けのデベロッパーツールのウィンドウが出現するので、メニューの中の「Page Speed」をクリック。

start_pagespeed1

Page Speedの画面に切り替わるので、ここで「Run Page Speed」をクリック。

start_pagespeed2

ちょっと待つとページの内容を調べてくれて各項目における推奨案(速度向上のための)を有効度が高いものから順に表示してくれます。総合スコアとして「Page Speed Score」というものも100点満点中どれくらいか示してくれます。

result_pagespeed

赤丸の項目はなるべく早く対応策を講じたほうがよいもの、黄丸の項目はできれば対策を講じたほうがよいもの、緑丸は問題なしを示しているようです。青い丸はよくわかりません(TдT)

自分が計測した自分のメモブログ(ここですが)は「圧縮を有効にする」が赤い項目です。jsやcssをgzip圧縮すると転送サイズを削減できるよと表示されていますが、Safariがgzipに対応してないようなので、この施策は後回しになっています。ちょっと調べただけだと、そこ考慮して対応させるのもそんなに簡単じゃなさそうなので。

こんな感じでページを計測して、問題点をできるだけ解消していくという使い方になります。

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿