最近になってブログのレンダリング時間が異常に遅いなと感じました。
案の定ブログパーツの一部が悪さをしていたわけでして。
今回はレンダリング時間を遅くするオブジェクトの特定方法をメモしておきます。
現状のレンダリング時間
2011/12/14時点のレンダリング時間は4.16sec、ページサイズは1.1MB
2012/02/27時点のレンダリング時間は11.74sec、ページサイズは2.7MB
キャッシュをしている状態だとしてもレンダリング時間がかかりすぎです。
表示を遅くするオブジェクトを特定
表示を遅くしているオブジェクトを特定する方法は何個かありますが、bloggerに自動readmore(もっと読む)を導入して読み込み速度を上げるの記事でも紹介したサイトパフォーマンス計測サービス「pingdom:full page test」を使います。
※FireBugなどのツールでも同じことができます。
実際に計測してみると掲載している広告の１つが悪さをしていることが分かりました。
黄色い部分はデータ受信を表しており、2.2sec~10.8secまで延々と受信している状態でした。
オブジェクトを排除するとどうなるか？
レンダリングを遅くするオブジェクトを排除してもう一度計測すると11.74sec→3.56secと劇的に良くなりました。
念のため、他のブラウザでも試しましたがレンダリング時間が改善されているのがよく分かります。
今回もFirefoxが一番遅いのが残念・・・
| Firefox 10.0.2 | Internet Explorer 9 | SRWare Iron |
| 3.56sec | 2.21sec | 2.7sec |
 |  |  |
後は画像サイズをどうするか
今回は広告のデータ受信が問題だったのですぐ分かりましたが、運用していく上で一番の難点が画像サイズ。
JPGやPNGの画像は圧縮率が低くするとファイルサイズが大きくなるので、その点を改良しないと更なるレンダリング時間の短縮は見込めないかもしれません。
PNGであればpnggauntletなどの圧縮ツールを使うのも一つかな。
それか、画像をほぼ使わないという手もありますけど・・・・