WordPress サイトの高速化 (JavaScript ロード時間)

投稿日時: 投稿者:

レンタルサーバ上で動作させる、WordPress サイトの表示の速度は、ほぼ MySQL に依存している。 これはよく知られているし、大抵はあっているのですが、たまに別な理由で初期表示動作が遅くなっている WP サイトさんを見るときがあります。

これは WP に限らず、、なんですが、結論から言うと、HTML 内の <head> 部分に存在する JavaScript の読み込みによる表示停止です。 特に WP はプラグインがばんばん <head> に JS を追加するので、気が付かないうちに遅くなっているときがあります。

全てのブラウザの実装をみたことがあるわけではありませんが、経験的に多くのブラウザは <head> が全て読み終わらないと、本体の <body> 部分の表示がはじまらないようです。 そしてこの <head> 部分に JavaScript ファイルが沢山存在する場合、ブラウザはいっしょうけんめい全ての JS を読み、解釈を終了させようとします。 また、分割した CSS もしかり、です。

<script language="javascript1.4" type="text/javascript" src="audio-player.js"></script>

こういう行が <head> にたくさんあると、ブラウザはそれぞれのファイルを取得しに行きます。

で、です。 よく気になるのは、外部サイトの API を使っている場合の JavaScript の読み込み。 <head> で自分のサーバ"以外"の JavaScript を読んでいる場合。 具体的にいってしまえば、Google Analyze とか。

たとえば、Google Analyze のサーバが遅くなっていると、 <head> の読み込みが終了できなくてひっぱられてサイトの表示が遅くなるようです。 ありませんか、ブラウザの左下の読んでいる URL 表示部分で google ドメインがちらちらしているときが・・・。

また、自分のサーバ内のファイルでも大量に JavaScript や CSS のファイルがあると http の読み込みの性質上時間がかかります。

マルチセッションとかHTTP/1.1 とかパイプラインとか、現在はいろいろ高速化の技術があるので、それほど気にしなくてもいいかもしれませんが、なにかしらの処理があるのはたしかです。 以前、ちょっと問題になったブラウザのセッション数設定とかがこの辺の話です。（ちなみに Opera はデフォルトでこのへんもごにょごにょして高速化してたりする。レンダラも速いけどね!）

スラッシュドット ジャパン | HTTPの同時接続数はどうあるべきか?

Web屋のネタ帳に百式の中の人、RFC違反はもちろんWebサーバ運営者の迷惑をまるで考えない設定を推奨するの巻というエントリがある。百式の姉妹サイトであるpop*popにてFirefoxとIEを高速化するための動画チュートリアルという記事があったのだが、ようはこの記事ではFirefoxとIE(Windowsのレジストリ)の設定を変えて、HTTPの同時接続数を10にまで上げてしまうということを推奨していたため、それに対して反対意見を述べているのである。

ちなみに、この前気が付いたんですが Yahoo! の httpd は、このようなアクセスに対する対策をしているようなきがします。（自分のプログラムから４セッション以上連続でつなごうとするとたたき落とされた）

話が横道にそれましたが、まとめてみると、

  • （body から呼び出されずに）初期設定処理する必要のない JavaScript は <head> の中にいれない。（ex. prototype.js とか JQuery.js は必要だけど、アクセス解析とかは普通いれなくてもいい。</body>の前にでもいれときましょう）
  • なるべく、<script> タグでいれる JS の個数を減らす。 たまに何個も重複して prototype.js とか JQuery.js をいれている（プラグインで入れられてしまっている）サイトさんをみかけます。

といったところでしょうか。 まぁ <head> 内でとまらせない、というのは見かけ上の速度向上でもありますが、体感上の効果は大きいと思います。

WP も JavaScript の一括ローダとかつくといいのですが、いまのところはローカライズ用のローダしかないようなので、気になる方は手作業でぽちぽちチューニングしていきましょう。 🙂

「WordPress サイトの高速化 (JavaScript ロード時間)」への2件のフィードバック

コメントを残す