Googleが提供するWebページの表示速度に関する解析を行ってくれるPageSpeed InsightsはAPIを公開しています。それにより任意のサイトが随時チェックをし、日々改善に努められるようになっています。 とは言えそのAPIをより利用しやすくしないとなかなか使ってはもらえないでしょう。そこでインストールしたいのがpsiです。

psiの使い方

インストールはnpmでできます。

$ npm install -g psi

後はURLを与えるだけです。

$ psi http://www.moongift.jp/

----------------------------------------------------------------

URL:       http://www.moongift.jp/
Score:     77
Strategy:  desktop

Number Resources                                 | 104
Number Hosts                                     | 24
Total Request                                    | 14.27 kB
Number Static Resources                          | 70
Html Response                                    | 232.23 kB
Css Response                                     | 154.2 kB
Image Response                                   | 764.98 kB
Javascript Response                              | 1.65 MB
Other Response                                   | 2.32 kB
Number Js Resources                              | 18
Number Css Resources                             | 2
                                                 | 
Avoid Landing Page Redirects                     | 0
Enable Gzip Compression                          | 5.3
Leverage Browser Caching                         | 4.99
Main Resource Server Response Time               | 0
Minify Css                                       | 0.17
Minify HTML                                      | 0.79
Minify Java Script                               | 1.99
Minimize Render Blocking Resources               | 8
Optimize Images                                  | 7.1
Prioritize Visible Content                       | 0

----------------------------------------------------------------

よほどの問題がない限りは75以上になるようです。優れたサイトになると、ハイスコアになります。

$ psi http://www.yahoo.co.jp/

----------------------------------------------------------------

URL:       http://www.yahoo.co.jp/
Score:     91
Strategy:  desktop

Number Resources                                 | 38
Number Hosts                                     | 13
Total Request                                    | 8.53 kB
Number Static Resources                          | 26
Html Response                                    | 192.83 kB
Css Response                                     | 5.85 kB
Image Response                                   | 102.66 kB
Javascript Response                              | 205.3 kB
Other Response                                   | 1.66 kB
Number Js Resources                              | 11
Number Css Resources                             | 1
                                                 | 
Avoid Landing Page Redirects                     | 0
Enable Gzip Compression                          | 0.13
Leverage Browser Caching                         | 1.49
Main Resource Server Response Time               | 0
Minify Css                                       | 0
Minify HTML                                      | 0.12
Minify Java Script                               | 0
Minimize Render Blocking Resources               | 6
Optimize Images                                  | 0.45
Prioritize Visible Content                       | 0

----------------------------------------------------------------

Yahooはさすがですね。ちなみにGoogleは92、Facebookは89となっています。やるべき内容が分かれば、後は改善をし、日々の運用の中でチェックしていくと表示速度の劣化がおきづらくなるでしょう。表示速度が遅いとユーザはあっという間に離れる(特にスマホ)のでまずはチェックしてみてください。

psiはnode/JavaScript製、Apache License 2.0のオープンソース・ソフトウェアです。

addyosmani/psi