高速化の話:CSSは前、JSは後ろ?

このブログの読み込みが異常に遅いので気になっていた。YSlowで調べたら、ものすごい点数が低く、Fランク。WordPressが遅いという以前にサイト構造が非常に重いということのようだ。これはキャッシュでどうこうなる問題ではない。

とりあえず、YSlowに指摘されたもののうち、簡単に対処できるところから。mod_deflateを有効にしたりFileETagを切ったり、という単純作業。.htaccessは次のような感じの文字列が追加された。少しは点数が上がる。FileETagは負荷分散してないシングルサーバ構成だから悪影響はないはずなんだけど、一応切る。

<IfModule expires_module>
  ExpiresActive On
  ExpiresDefault "access plus 2 dayw"
  ExpiresByType image/jpeg "access plus 7 days"
  ExpiresByType image/gif "access plus 7 days"
  ExpiresByType image/png "access plus 7 days"
  ExpiresByType text/css "access plus 7 days"
  ExpiresByType application/javascript "access plus 7 days"
  ExpiresByType application/x-javascript "access plus 7 days"
</IfModule>

<IfModule deflate_module>
  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript application/x-javascript
</IfModule>
FileETag None

しかし難題が。YSlowは「CSSは前、スクリプトは後ろ」であるべし、と言うのだけど、WordPressはCSSもJavaScriptも<HEAD>の中で定義するようになっているのよね。読み込むJavaScriptファイルはwp_headのactionで書き出す。YSlowによれば、CSSが前にあれば描画までの時間が短くなるが、JavaScriptは描画には必要なく、描画後に必要になることが多いにも関わらず、たまに描画に必要になるためにパースを待ってから描画しているブラウザが多いらしい。

そこで、JavaScriptの読み込みを後ろに移動するプラグインを書いてみた。以下の内容をwp-content/plugins/scriptfoot.phpとして置いて、管理画面から有効にすると使える。actionをwp_headからwp_footerに移動するだけの内容です。

<?php
/*
Plugin Name: scriptfoot
Plugin URI: https://wtnb.mydns.jp/wordpress/
Description: script at footer
Version: 0.1
License: GPL
Author: Watanabe Takashi
Author URI: https://wtnb.mydns.jp/wordpress/
*/

remove_action('wp_head', 'wp_print_scripts');
add_action('wp_footer', 'wp_print_scripts');
?>

多くのスクリプトは大丈夫、とのことだけど、このブログで使っているスクリプトはどうかな。

とりあえず、postratingsは勝手にヘッダにスクリプトを置いてしまうし、動いているようですが、lightbox(拡大画像がにょろにょろって出てくるやつ。使っているのはWP lightbox2というプラグイン)は動かなくなりました。ajaxのprototype.jsが前にあればlightboxは動くようだ。そこでprototype.jsだけを前に置いて、それ以外は後ろに、という感じにすると…やはりちょっと遅い感じ。lightboxを切るとスクリプトが前だろうが後ろだろうが速くなるようだ。

なんだ、悪いのはこれか。というわけでlightboxプラグインを無効に設定。YSlowでもBランク(87点)になった。でも、スクリプトの読み込み位置が前なのか後ろなのかで大きな影響はないように思う。

残る問題は、CDN(Content Delivery Network)を使えというのと、まだ先頭にあるJavaScriptが2つほど(postratings関連?)ある、ということ。CDNは予算がないのでムリ。だいたいそこまでアクセス多くないし。postratingsを切ればCDN以外は全部A判定で、総合Bランク88点になることが分かったが、微妙な差なので保留。

まあ、できることはこのくらいか。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です