TopWebSEO > 2012年5月
2012年5月31日

Google ChromeでサイトパフォーマンスのボトルネックをチェックできるChrome拡張「PageSpeed」

May 31,2012 11:55 PM
Tag:[, , , ]
Permalink

Google ChromeでサイトパフォーマンスのボトルネックをチェックできるChrome拡張「PageSpeed」を紹介します。

PageSpeed

この拡張を利用すれば、「ブラウザのキャッシュを活用する・圧縮を有効にする・CSSスプライトに画像をまとめる」といったパフォーマンスの最適化のための項目や、その詳細なデータを確認することができます。

最適化のための詳細データ

1.インストール

Using PageSpeed Insights for Google Chromeのページにある「Install PageSpeed Insights」またはその左のアイコンをクリック。

Using PageSpeed Insights for Google Chrome

ページ右側にある「CHROMEに追加」をクリック。

CHROMEに追加

「追加」をクリック。これでインストールが開始します。

ダイアログ

インストールが完了しました。

CHROMEに追加

2.使い方

Windowsの場合、測定したいページを表示した状態で「F12」をクリックして、表示されたデベロッパーツールの右側にある「PageSpeed」をクリック。

デベロッパーツール

「分析」をクリック。

PageSpeed

分析が開始します。

分析

分析結果です。中央には提案の概要、左側には優先度(高・中・低)別の対策が表示されます。

分析結果

左側の項目をクリックすれば、詳細な情報が中央に表示されます。

詳細な情報

以前のバージョンではスコア(100点満点で何点か)も表示されていたようですが、確認したバージョンではその表示はありませんでした。

Comments [0] | Trackbacks [0]
2012年5月29日

ページ読み込みが早いとGoogle検索順位が本当に上がるのか試してみた

May 29,2012 11:55 PM
Tag:[]
Permalink

2010年4月頃、Googleが検索結果表示順位のアルゴリズムにウェブページの読み込み速度を採用するという情報が流れましたが、本当にページ読み込みが早い方がGoogle検索順位が上がるのでしょうか。

Web担当者Forum - Googleがついに順位決定に表示速度を使い始めた(公式発表)

ということで、訳あってこのブログでページ速度の改善を実施しましたので、Google検索順位ではありませんが、PV(ページビュー)やGoogle検索数がどのように変わったかをお伝えします。

結論から申しますと、Google検索数は増加したようです。が、「検索数が増加した」ということだけで、検索順位が上がったかどうかは未確認のため不明です。

ちなみに、当ブログでは検索トラヒックの約65%がGoogleからの流入です。青がグーグル・緑がYahoo!です。

検索トラヒック

1.サーバ移転でPV(ページビュー)が下がった

表示速度改善を行うきっかけになったのは、4月の新サーバ移転がきっかけです。

移転前はさくらインターネットの「マネージドサーバ」で、そこから同じさくらインターネットの「ビジネスプロ」に移転、つまり下位のプランに移りました。

その後、わずかですがPV(ページビュー)が下がりました。

まずはサーバ移転前後のPV推移をご覧ください。赤線はサーバ移転前と移転後の差を分かりやすくするために描いてます。4月の移転から微妙にPVが下がっているのが分かります。3月までは12000PVを超える日が結構ありましたが、4月から超えなくなりました。

(クリックすれば拡大します)
サーバ移転前後のPV推移

これだけでは何が原因か分かりにくいので、「トラヒック」→「すべてのトラヒック」で「参照元/メディア」から「Google」を選択し、Googleだけのトラヒックに絞ったのが下のグラフです。4月のサーバ移転以降、明らかに右肩下がりになっています。ブログのデザインは一切変更していません。

(クリックすれば拡大します)
サーバ移転前後のGoogleトラヒック

2.表示速度改善後にPV(ページビュー)が上がった

ということで、「何か対策しないとまずい」と思い立って、表示速度の改善を行いました。実際に何をやったかは後で書きます。まずはグラフの推移をご覧ください。

まず、表示速度改善前後のPV推移です。速度改善してからPVが増加しています。

(クリックすれば拡大します)
改善前後のPV推移

次に「トラヒック」→「すべてのトラヒック」で「参照元/メディア」から「Google」を選択し、Googleだけのトラヒックに絞った推移です。こちらは明らかに増加しているのが分かります。

(クリックすれば拡大します)
改善前後のGoogleトラヒック

3.改善内容

改善したのは、とりあえず次の項目です(具体的な数値がなくてすいません)。

  • JavaScriptをPrototype.jsからjQueryに乗り換えによるサイズ削減
  • jQueryはGoogle CDNを利用
  • 自前JavaScriptコードは難読化によるサイズ削減
  • 冗長だったJavaScript(サイドバー丸ごと折りたたみスクリプトとか)の削除
  • サイドバーのバナー画像などの削除

実施時にはソーシャルブックマークボタンも外しました。が、外し過ぎてSMSからのトラヒックがなくなるのもまずいと思い、今は元に戻しています。

サイドバーに表示していた「はてなブックマークカウンタ」とか「なかのひと」とか、読み込みに時間がかかっていたものははずしています。5つくらいあったバナー画像も読み手には不要なのでとっぱらいました。

体感ですが、おそらく改善前後で2秒程度は違っていると思います。

2012/05/31追記
ウェブマスターツールの「Labs」→「サイトパフォーマンス」のデータで確認したところ、2秒ほど短縮されていました(下)。

(クリックすれば拡大します)
改善前後のGoogleトラヒック

4.その他

冒頭にも書いたとおり、表示速度が速くなったことで本当にGoogle検索数が増加したのかどうか、この情報だけではなんともいえないかもしれません。

改善後の投稿記事がたまたまGoogle検索に多くヒットするようになったという可能性もありますし、何もしなくてもPVは復活したかもしれません。

また他にも要因があるかもしれないので、話半分くらいで読んでもらえればと思います。

根本的に何か勘違いしているとか、「あのデータが不足しているよ」とかありましたらつぶやいてください。

Comments [0] | Trackbacks [0]
2012年5月26日

Movable Typeで画像ファイルタイプの最適化を行う「ImageTypeOptimizerプラグイン」

May 26,2012 11:55 PM
Tag:[, , ]
Permalink

Movable Typeで最適な画像ファイルタイプを選択する「ImageTypeOptimizerプラグイン」を公開します。

画像ファイル

ちょっと変わったプラグインですが、要はSEO対策用です。

1.機能

このプラグインでは、記事本文に埋め込まれたimg要素の画像について、異なる画像タイプがサーバ上に存在する場合、最適なサイズの画像タイプを選択します。

例えば、サーバ上に次のような「img1」「img2」という画像ファイルがあり、それぞれjpgとpngの2種類の画像タイプがあると仮定します。

画像ファイル

これとは別に、ブログ記事本文で次のようなimg要素を記述しているとします。

ブログ記事本文

「img2」のファイルサイズはpngの方が小さいので、「img2」のimg要素には「img2.png」を設定した方がページ表示速度が速くなります。

が、それをひとつひとつ手作業で行うのは現実的ではありません。

このプラグインを適用すれば、記事本文に埋め込まれたimg要素の「img2」の拡張子を一発で「.jpg」から「.png」に変換します。

操作方法は、記事一覧画面で該当する記事を選択し、「画像ファイルタイプの最適化」を選択するだけです(再構築は別途必要)。

画像ファイルタイプの最適化

実行すると、さきほどの記事のimg要素の拡張子が最適なサイズのものに書き換わります。

ブログ記事本文

で、この記事だけを読むと「異なるファイルタイプの画像をどうやって用意するんだ?」という疑問がわくと思います。

異なる種類の画像は、以前紹介した「ブラウザから実行可能な画像形式一括変換ツール」で簡単に作成できます。

2.利用シーン

画像サイズは画像ファイルタイプによって違いがあり、写真やグラデーションのように色調が連続して変化する画像はjpg、そうでない場合はgifやpngの方がファイルサイズが小さくなる傾向にあるようです。

同じファイルタイプでファイルサイズを最適化させるツールも色々出回っていて色々試してみましたが、サイズの最適化はファイルタイプを変える方が効果が大きいようです(というか、ファイルタイプを替えずに同等の効果を出せる方法がみつかってません)。

で、ブログ記事を作り、画像を埋め込むときに、ファイルサイズを考えてgif/jpg/pngを使い分けている場合は別として、常に同じファイルタイプで作り、最適化されていない(過去記事の)画像が大量にアップロードされていることもあると思います。

このプラグインは、そのようなウェブサイトの最適化を目指すものです。

3.価格

MT5.1版:1000円/1インストールMT(税抜き、動作確認後、購入してください)

4.プラグインのダウンロード・インストール

下記のリンクをクリックして、プラグインアーカイブをダウンロードします。

ImageTypeOptimizer_0_01.zip

プラグインアーカイブを展開し、中にあるImageTypeOptimizerフォルダごと、Movable Type のアプリケーションディレクトリのpluginsディレクトリにアップロードします。

システム管理画面のプラグイン設定画面で、「ImageTypeOptimizer~」が表示されればインストール完了です。

プラグイン設定画面

5.プラグインの設定

このプラグインでは、変換を実行した画像について次のようにログに出力します。

ログ出力

理由は、拡張子が異なる同一ファイルが大量にある状態では、ディスクをそれなりに圧迫しています。変換を実行したファイルが分かればどちらを削除すれば良いかが分かります。

ログ出力を抑止するには、該当のブログまたウェブサイトのプラグイン設定画面で「ImageTypeOptimizer~」→「設定」をクリックし、「変更したURLをログ出力する」のチェックをはずしてください。

プラグイン設定画面

Comments [0] | Trackbacks [0]
2012年5月15日

ブラウザから実行可能な画像形式一括変換ツール

May 15,2012 12:55 AM
Tag:[, ]
Permalink

ブラウザから実行可能な画像形式一括変換ツールをPerlで作ってみました。

画像形式一括変換ツール

1.機能

指定したディレクトリにある「変換前の拡張子(ピリオドは不要)」の画像ファイルを、「変換後の拡張子(ピリオドは不要)」のファイルに一括変換して、同じディレクトリに出力します。

変換状況は下のスクリーンショットのように順次表示します。

変換状況

ディレクトリは絶対パス・相対パスのいずれも可能です。ディレクトリは再帰的に検索するので、指定したディレクトリ配下のすべての画像ファイルが対象になります。

変換後の同名ファイルがある場合、上書きします。

必要に迫られてとりあえず作ったものなので、細かいチェックはできていません。レンタルサーバによっては長時間実行すると500エラーになるかもしれません。

2.実行環境

このツールの実行には、PerlとImageMagick(PerlMagick)が必要です。

余談ですが、ImageMagickを使った形式変換は、SSHが利用可能であればコマンドラインから実行できます。

本ツールはSSHが使えない環境での利用を想定しています。

3.使い方

以下の「changeImageType.zip」をダウンロードして、展開した中にあるchangeImageType.cgiをサーバにアップロードし、実行可能なパーミッションに変更してください。

changeImageType.zip

ブラウザからツールにアクセスして、「ディレクトリ」「変換前の拡張子」「変換後の拡張子」を設定して実行してください。

ツールは自由に改変してもらって結構です。ImageMagickの実装部分を書き換えれば「一括サムネイル作成」など、色々利用方法があると思います。

また「こうした方がいい」という機能や実装があれば、どこかでつぶやいてください。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3