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 は、このようなアクセスに対する対策をしているようなきがします。(自分のプログラムから4セッション以上連続でつなごうとするとたたき落とされた)

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

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

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

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

WordPress の差分ファイルアップグレード

WordPress のアップグレードは、通常であれば FTP によるファイルの入れ替えで行いますが、コアファイルをいじっていたりするとなかなか大変です。 また、単純にファイルの上書きをすると、不要なファイルが残ったりもしますので、(基本的には問題は出ないものの)精神衛生上もあまりよろしくありません。

power source* » WP: WordPress を Subversion でアップグレード… ならず、の巻

結論から言うと、s201 サーバでは svn が使えないことが判明し、この方法ではアップグレードできなかった、という、新春早々残念なお話です。
気を取り直して、以下、行なったこと・調べたことをメモ。

power source* » WP: WordPress 2.3.1 → 2.3.2 へアップグレード

svn が使えなかったため、今回は従来どおり FTP にてアップグレード。

以前紹介した Subversion によるアップデートでは、ファイル削除やリネーム等もトランザクションとして処理されますので、簡単にうまくアップデートができるのですが、使えるサーバも限られていますので、ちょっと別な方法を紹介してみます。

同じく Subversion を使いますが、ここでは PC 上で便利に使う方法です。

  • TortoiseSVN という Windows のソフトを使って、Subversion のリポジトリに、 PC からアクセス。
  • WordPress のリポジトリ内のバージョンタグで、アップグレード前後の diff をとり、削除ファイルや自分が修正したファイルとバッティングしていないかを確認。
  • diff をエクスポートして、変更分の差分だけ取り出す。
  • 変更分に自分の修正があれば、それをマージ。
  • FTP で変更及び新規ファイルをサーバにアップロード。
  • 削除ファイルがあれば消す。

と、こんな感じの手順になります。 マイナーアップグレードであれば、ほとんどの場合、差分ファイル抽出後、FTP アップロードですむでしょう。

サーバ上で直接 Subversion アップデートを実施されている方も、コアファイルの修正は上書きされてしまいますので、この方法もあわせて使ってアップグレード前に確認すると良いかも知れません。

差分ファイルの抽出をする部分の手順を書いてみます。 あまりにもあっけないので、あきれるかもしれません。 コンピュータやる人間は手抜きに全勢力をかけます(笑)

とりあえず、TortoiseSVN ははいっていることとします。 Windows 用のソフトですが、他の OS でも同種のソフトで同じような操作で可能だと思います。

シェル拡張されるので、デスクトップの適当な位置で右クリック。 でもって、リポジトリブラウザを選択。

Image2

どこのリポジトリ開くか聞いてくるので、WordPress のリポジトリを入力。 ここでは、バージョンタグを見たいのでそこを。

http://svn.automattic.com/wordpress/tags/ 

Image3

歴代バージョンがでてくるので、現在 (ex. 2.3.1) とその次(ex. 2.3.2) を選択して、右クリック「リビジョンを比較」Image4

この操作で、それぞれのバージョンのファイル変更アクションがでてきます。 2.3.1 -> 2.3.2 だと、「変更」しかないのでファイルの上書きで済むことが分かります。

で、確認したらファイルを全選択して右クリック「選択をエクスポート」Image5

これで、指定したフォルダに、ディレクトリ構成ごと差分ファイルのみが抽出されます。 これを FTP でアップロードすればアップグレード完了です。 🙂

この画面で、ファイルの変更内容もみることができますので、ぱらっとコミットコメントとともにみればなにが変わったかも分かるかも知れません。

追伸、念のため。

本家 WordPress チームでは Subversion でのインストール手順を紹介していたりするので、開発者以外がリポジトリのアクセスを行っても問題ないと思います。 ただ開発用であることは確かなので、あまりリポジトリサーバが負荷になるような操作はさけてください。

バージョン管理システムは、使うといろいろ便利なので、興味があるかたはぜひ WordPress 以外でもためしてみてください。

hiromasa.zone :o) » TortoiseSVN でファイルのバージョン管理をしてみる (1)

バージョン管理システムはもともと、ソフトウェアの元となるソースコードに対して極めて厳密にそしてデリケートにいろいろな管理を行うためにつくられたものです。 とはいえ、対象は別にソースコードだけになっているわけでもないので、自分でライトに使うこともできます。

うちらは、ふつー CVS。 場所によって Subversion か Visual SourceSafe って感じですが、きくところによると、Web 系の現場ではあんまり使われてないんですね。 HTML でも履歴取れたり、納品時期のタグつけられたりして便利ですよん。

やっと雪が積もった

年末まで雪がぜんぜんなかったのですが、昨日、おとといでようやく積もり始めました。 やっぱりね~、まぁないほうがいいのかもしれないけど、なければないで調子でない(笑)

札幌大通り公園から、すすきの方面を見た図。 ちなみに公園内なので雪ありますが、道路までいくとロードヒーティングきーてるので、雪はありません。

P1000005

札幌大通り公園、ホワイトイルミネーション。

P1000006

すすきの。(笑)

P1000004

冬の北海道で南国の泡盛古酒を飲む快楽。 快楽? 🙂