蓮舫さんのWebサイトを高速化する、とか(笑)

民主党参議院議員の蓮舫さんのWebサイトがTwitterで話題になっていたので覗いてみました。WordPressを使ってTwitterライクなテーマを適用されて運用されているようです。

で、ここからが本題。ちなみにここから先の話は決してダメ出しではなくて、たぶん制作・管理されている方も気付かれていないんじゃないかと思うので、せっかくですからWebサイトの表示パフォーマンスの話と絡めてエントリーしておきます(管理されている方をご存知でしたら教えてあげてください 笑)。

WP Exploit Scannerのせいでしょ、これ

こちらのサイトのソースをチラ見 &「YSlow!」をぶん回して気付きました(YSlow!については今月発売のWeb Designing誌で 笑)。head要素の途中にWordPressの中のjQuery(1.3.2)の呼び出しがひとつ、そして</body>の直前にGoogleから呼び出してるjQuery(1.3.1)がひとつ、計二つのjQueryを読み込んでいます。

renhojp-001

図の上の赤枠がサイト内部、緑枠がGoogleの方です。
で、こういうことって普通に制作していたらやんないはずなんですね。もろもろのJavaScriptは</body>の直前にまとめてありますし…。でも、head要素(しかもそこに置かないだろうってとこ)に怪しげなjQueryの読み込みがあります。

これがプラグインによる仕業なんですね…。
おそらくこちらではセキュリティ面にも配慮されていて、「WP Exploit Scanner」ってのを導入されているのではないでしょうか(というか、絶対にそう 笑)。このプラグイン、実はうちにもこないだまで入ってましたが、最近のアップデートでこのhead要素でのjQueryと上図の下の赤枠にある「なんちゃらform.js」を読み込むようになったんですよね…。普通2箇所で同じjQueryを読み込むなんてしないでしょう。

こういうのがボトルネックになるわけで…

これがあるとどういうことが起きるかというと下図のようになります。

renhojp-002
http://www.webpagetest.org/result/091222_3SW2/1/details/

誰でもテストできるから画像出しますけど、こちらのサイトにアクセスしてからのデータが落ちてきてブラウザで表示が完成するまでの流れです。
※ http://webpagetest.org/ のDulles, VAのIE 8でシミュレートしたもの

この図中の赤枠を引いてる箇所が問題のjQueryの呼び出しですね。head要素のあんなところにあるもんだから、これがダウンロードされるまでの約2秒間(レイテンシもあるので秒数はまぁいいでしょ)は、並行ダウンロードができなくなりデータが落ちてきません。要はダウンロードしたくても止まっちゃうわけですね(赤いべた塗りのとこは404ですのでなおしてね 笑)。

おそらくこの冒頭のJavaScriptの読み込みは意図せぬものだと思うので、これさえ取ってあげれば少なくともあと1〜2秒ぐらいは速く表示されるのではないでしょうか(どうしてもExploit Scannerが必要なら話は別ですが 笑)。WordPressならhead要素の内容をキレイにしてくれるプラグインもありますが、どうするかは考えなきゃいけませぬ。

とまぁ、こんな感じでサイトを管理されてる方も気付かないうちにこんなことが起きてしまうんですよ、という話でした。Webサイトのパフォーマンスアップはこんなとこを見つけながら最適化を図っていくわけですね。

繰り返しますが、これは決してダメ出しではありませんので。
サイトの表示パフォーマンスの最適化の話は、今月号の「Web Designing」の特集ページをご覧ください(繰り返される宣伝 笑)。

Tags: , , , , ,

   

Comments are closed.


Performance Optimization WordPress Plugins by W3 EDGE