Worpdressのパフォーマンス(表示速度)チェックツール「Page Speed extension for Firefox」の導入方法と使い方

スポンサーリンク

最近我がブログのWorpdressのパフォーマンス(表示速度)がかなり低い。そこで改善に取り組む上で、ページ表示速度チェックツールであるgoogleの「Page Speed extension for Firefox」を導入してみました。このFirefoxアドオン(エクステンション)は、ただパフォーマンスをチェックするだけでなはなく、googleが推奨するチェック項目と照らし合わせ、最適化するためにアドバイスもしていくれるという優れものです。その導入方法と使い方を以下にまとめます。

image

経緯

昨日googleアナリティクスで我がブログのパフォーマンス(表示速度)を調べたら、ネット上の90%のサイトより悪いという結果でした。WordPress高速化!プラグイン「WP Super Cache」(日本語)という記事でも書いていますが、ページキャッシュ表示にしているはずなのに。

ちなみに、Web上でサイト表示スピード測定できるサービスで計測すると以下のように、ブログトップページは約2.9秒かかり、個別ページでは約1.6秒もかかります。ちなみにyahoo!のトップページは0.1秒です。悔しい!

image

そこで、Wordpressの表示速度改善の作業プロセスに取り組む前に、改善前の表示速度と、改善作業後の表示速度にはどれほどの違いがあるのかを確認するために、簡単に速度を計測できるFirefoxのアドオン「Page Speed extension for Firefox」を導入します。

「Page Speed extension for Firefox」使い方

準備

Firebugというアドンがまず必要になりますので、FirefoxからFirebugへアクセスし、インストール、再起動させます。

image

 

インストール

では「Page Speed extension for Firefox」本体のインストールですが、Page Speed へ行き以下の部分からダウンロード・インストールします。

image

「許可」をクリックして、次に「今すぐインストール」をクリック。Firefoxの「再起動」をします。

計測と最適化情報

ではさっそく計測してみます。下記のように「ツール」から「Firebug」、「Firebugを開く」へ行くか、または「F12」をクリックします。

image

次に「Page Speed」をクリック。「Performance」の「Analyze Performance」をクリックして計測を始めます。

image

ページスピードスコアは、我がブログのトップページは「Page Speed Score: 65/100」と表示されました。ちなみにヤフーのトップページは、86/100でしたのでそんなに遅い方ではないはず!それでも、冒頭の「経緯」の部分でも述べたように、表示スピードランキングでは、90%のサイトに劣るのですね。

image

パフォーマンス最適化

実はこのFirefoxアドオン「Page Speed」の優れたところは、パフォーマンス最適化の最適化まで教えてくれます。

私の場合以下の7つの点が問題でした。特に上位の3つはサイトの表示速度に深刻な影響を与えているので改善の余地があります。

  1. 変更後のサイズで画像を提供する
  2. ブラウザのキャッシュを活用する
  3. 圧縮を有効にする
  4. CSS を縮小する
  5. 画像を最適化する
  6. CSS スプライトに画像をまとめる
  7. JavaScript の解析を遅延する

最上位は「変更後のサイズで画像を提供する」というものです。「Resources」のタグを見てみると、どの読み込みファイルがパフォーマンスを落としいる原因になっているかが分かります。圧倒的にimageファイルの容量が大きいのです。

image

ブログを見てお分かりの通り、サイドバーの過去記事のアイキャッチ画像は記事中から直接引っ張ってきますから、サムネイル画像としてリサイズしていないのです。これが最大のパフォーマンス悪化の原因と指摘してもったわけです。

image

アイキャッチ画像は、1)新着記事だけでなく、2)人気記事、3)関連記事 にも利用しています。20個近い大きな画像を読み込んでそれを小さくリサイズしているのですから、ブラウザには大きな負担をかけ、パフォーマンスの甚だしい低下を招いているわけです。

今後の取り組み

いまさら、一つ一つの画像のリサイズを実行するのは大変な作業です。思い切って画像を使わない手もあります。他の多くのブログは使っていませんから。でも悔しいので何か手がないか考えてみます。誰かアドバイスください。

今回は、Wordpressのパフォーマンス低下を改善するための前準備と方向性を見定めるために、Firefoxのアドオン「Page Speed extension for Firefox」の導入と使い方をご紹介しました。きっともっと奥深い利用法がありそうですが・・・この程度に。

以下は翌日2011年9月3日追記

スポンサーリンク

パフォーマンス向上のための作業と成果

上記のように、画像容量が大きいことがパフォーマンス低下を招いていたことから、以下のように記事中の大きな画像をそのままアイキャッチ画像に関して部分に対策を講じました。

  1. 「駆け出しブロガーお勧め記事は削除」
    効果:トップページのパフォーマンスが65/100から70/100へ。表示速度が約2.9秒かから1.3秒へ。
  2. 記事下の関連記事のコードをシンプルにして、同じくアイキャッチ画像を削除すると、さらに74/100へ。
  3. サイドバー「人気記事」のアイキャッチ画像を削除すると、さらに77/100へと。

アイキャッチ画像を記事中から取り入れる工夫をこれまで以下の記事で紹介していました。

しかし、記事中の大きな画像をサムネイル画像用にリサイズせずに利用していたために、長期にわたり表示のパフォーマンスを鈍化させていたのですね。

サイドバーの新着記事リスト以外はアイキャッチ画像が無くなり、ビジュアル的な要素が減ってブログの雰囲気が暗くなったようで少し残念ですが、しばらく様子見します。リサイズしたアイキャッチ画像を記事ごとに用意できるまでですが…。

スポンサーリンク

フォローする

関連記事

コメント

  1. MICAN より:

    画像が大量にあって、表示する場所がきまっているのなら、すべての画像をまとめてしまうほうがよいですね。ひとつひとつの画像を読み込むと、そのたびに通信が発生するので、なるべく一気に読み込むということです。googleなんかでも使われていますこのテクニックは、やり方がたくさんあります。

    今からその方法のひとつを紹介します(3ステップ)。まず、すべての画像を背景がとしてまとめます。次に、その画像を適切な場所に表示されるようにcssで調整します(ここが面倒)。最後、つくった背景画像の容量を圧縮して軽くします。

    この方法を試してみてください。優先的に文章が表示されます。最悪の展開(画像表示がされないとき)でも、この方法ならばすべての画像が表示されない=軽いというこになります。