WordPress高速化ー「準備編」スピード測定のテストサイトやツール

スポンサーリンク

せっかく訪れてくださった方が2度と訪問したくないと思う理由の筆頭の一つは、遅すぎて表示されないというものです。事実以下のような恐ろしいデータがあります。

Amazonの調査・・・表示スピード 0.1秒遅延 ⇒ 売上 1%減少
Googleの調査・・・表示スピード 0.5秒遅延 ⇒ 検索数 20%減少

離脱率の増加・・・初期表示に6秒かかった場合に離脱率が25%増加
再訪問・・・61%が遅いサイトには二度と来ない。
移動・・・初めて訪れたサイトの表示が遅いと75%の人が競合サイトへ移動
顧客満足度・・・表示が1秒遅くなるごとに16%顧客満足度が低下
CodeZine

MovableTypeと違い、このブログで利用しているWordpessは動的サイトの生成で成り立っているので表示スピードが大問題となります。そこでブログの構成を大幅に変更せずに、高速化するように試行錯誤を重ねてみます。まずは「準備編」でスピードを測定するためのサイトやツールを導入します。

image

WordPressパフォーマンスの現状

今日2012年4月3日ですが、Googleウェブマスターツールの「Labs」から「サイトのパフォーマンス」を確認してみると、以下のように、ネットの82%のサイトより遅いというものです。更新日2012/04/01でブログ内のページの平均読み込み時間は 6.0 秒でした。

image

代表的なページで以下の読み込み速度。遅すぎです。

/pc/docomo-iphone5.html・・・6.2秒
/pc/au-iphone5.html・・・5.8秒
/pc/galaxy-note.html・・・5.1
/pc/iphone5-size4.html・・・5.8
/pc/kindle-fire.html・・・5.9
/setuyaku/peach-aviation.html・・・6.8
/pc/kaietai-muryoutuwa.html・・・6.4
/pc/iphone4s-docomo.html・・・4.7
/pc/android-sdk.html・・・5.7
/pc/smartphone-tethering.html・・・7.0

それでこのWordpressのブログの表示速度を半分の3秒に目標を設定したいと思います。

目標:平均読み込み時間 3.0 秒

スポンサーリンク

スピード測定サイトやツール

ではスピードを測定するサイトやツールを確認しておきます。(ちなみにGoogleサイト パフォーマンスから公式のツールについて確認できます。)

Pingdom Tools

まず代表的なのはPingdom Toolsです。

amamoba.com/pc/docomo-iphone5.htmlを計ってみると、以下の通り。

image

image

image

問題はプラグインや画像(image)ですね。

image

WebPagetest

次にWebPagetestも代表的ですが、こちらはかなりの高機能です。

手順は以下の通りに、①計測したいURLを記入。②計測地点(東京を選択)③右の「START TEST」をクリック。

image

結果は以下の通り。

  • 計測時間
    Fistr View(初回表示)が12.7秒
    Repeat View(2回目以降の訪問)が5.387秒です。
  • 右上
    Page Speed 1.12 Score・・・86/100
    スピードに影響を与える要素・・・赤が要改善

image

最下部にはパフォーマンスに影響を与えている要素で、このURLでは圧倒的に、画像とJava Scrpt要素がページの表示パフォーマンスを悪化させています。

image

image

image

Chrome拡張「YSlow!」

FirefoxのアドオンにもなっているChrome拡張「YSlow!」も役立つようです。インストールして、表示させたいURLをブラウザで表示。スピードメーターのアイコンをクリックするだけで計測可能です。

image

image

結果は以下のように表示され、「C」以下は改善が必要なパフォーマンス悪化要素です。

image

やっぱり画像とJava Scrpt要素がパフォーマンスを圧倒的に低下させている要素ですね。

image

GTmetrix

GTmetrix での計測は以下のとおり。

image

足を引っ張っている順番に指摘されております。

image

Google公式ツール「Page Speed」

Google公式ツールである「Page Speed」は有名で、Firefoxのアドオンもあります。詳しくはChrome版「Page Speed」からどうぞ。以下に簡単に

  1. Chromeのアドレスバーに「about:flags」と入力してアクセスし、リストの中から「試験運用版の拡張機能API」を探し「有効に」をクリックして、Chromeを再起動する。
  2. Google Developersへ行き「click here to install PageSpeed for Chrome」からインストール。左下に表示される[破棄] [続行]から[続行]を選ぶ。
  3. 調査の仕方・・・スピード表示させたいページを開き。[F12]をクリック。

image

以上がWordpress高速化計画の準備編でした。

スポンサーリンク

フォローする

関連記事