なんか自サイト重いなぁ…とくにGoogle ADSが重いっぽいなぁ。
と思っていたのですがサイトの軽量化なんてこれまで気にしない環境だったので（恵まれてる）、あれこれやってみました。
まず自分のサイトの改善点（主にスピード）の洗い出しサイト
手っ取り早くファイルの圧縮を
手早く出来る事から。ただしものによっては崩れたりするのでご注意を。
私は一番いじってる子テーマのファイルはいじらずにプラグイン周りは概ねこれで圧縮しました。
js圧縮
http://dean.edwards.name/packer/
css圧縮
http://refresh-sf.com/
wordpress本体の無駄を省く
そもそもWPではheader内のいらない物があったりするのでその整理を。
参考サイト http://kwski.net/wordpress/1046/
絵文字用のjavascriptとcssを呼ばないための解決方法
http://takkaaaaa.com/wordpress4_2-update/
参考までに、header内に追加するフックはこちら
javascript
jsが重くてなかなかページが開いてくれない…なんてことを解消するためにあれこれやりました。
jqueryなど先に読み込んでおきたいjsを除いて、javascriptを全てasync（非同期）で読み込むように調整しました。
http://www.youngflavor.net/2015/01/2941/
http://orbitingweb.com/blog/add-defer-async-attributes-to-scripts-in-wordpress/
http://www.youngflavor.net/2015/01/2941/http://on-ze.com/archives/2513
高速化について解説＆google ADSを早く！
プリフェッチさせることで少しは解消するとのこと
https://www.philosophyguides.org/howto/how-to-load-critical-rendering-path-under-2-seconds/
プリフェッチ読み込みサンプル
<link rel="dns-prefetch" href="//pagead2.googlesyndication.com"> <link rel="dns-prefetch" href="//googleads.g.doubleclick.net">
注目してほしいのは、上から3番目のJavaScript（….min.js）です。asyncオプションをつけていたにもかかわらず、ページを表示する前にダウンロードしています。上で見たように、asyncやdeferオプションには、JavaScriptの実行を後回し（もしくは非同期化）する効果はあっても、ダウンロードを後回しにする効果はないからです。
なるほど
プリフェッチってFF高速化ぐらいでしかやったことなかったけどDNSプリフェッチなるものがあるんですね…。
ブラウザはCSSをダウンロードしに行き（この時点でレンダリングブロック）、次に、ブラウザごとに異なる拡張子のフォントが指定されます。実際に試してみると分かりますが、FirefoxでダウンロードしたCSSでは.woff形式、ChromeでダウンロードしたCSSでは.ttf形式で、別ドメインにあるフォントが指定されています。
これはつまり、ひとつのフォントをダウンロードするのに2回ラウンドトリップが必要になる、ということです。
そうなのよ。これなんとかしたい…けどできてない…。
webフォント キャッシュ利用
.htaccessアクセスなんていじったことなかったのでだいぶ勉強になりました。
そしてやってみた結果も良かったです。
http://atleastjazzpiano.info/wp/technical/wordpress_web-font_speed-up/
http://thk.kanzae.net/net/itc/t1544/
私はファイヤーバードの鯖を使っていますがmod_deflate対応しているとのことで上記難しいこともなく完了。
mod_deflate参考 http://blog.s-giken.net/222.html
http://hasegawahiroshi.jp/3604
wordpress - contactform7の整理
お問い合わせにContactform7を使っていましたが、全てのページでの読み込んでいたためWP高速化の一つとしてやりました。
contactform7を使用するページでのみ読み込む
ページ表示の高速化？Contact Form 7のCSSやJSを、必要なページだけで読み込む方法
これはcontactform7のみに限らずそれ以外のプラグインでも可能なやり方です。
ページそれぞれで必要なプラグインだけ読み込む用に調整しましょう。
//コンタクトフォームをシングルページのみ呼び出し
function my_contact_enqueue_scripts(){
wp_deregister_script('contact-form-7');
wp_deregister_style('contact-form-7');
if (is_single()) {
if (function_exists( 'wpcf7_enqueue_scripts')) {
wpcf7_enqueue_scripts();
}
if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
wpcf7_enqueue_styles();
}
}
}
add_action( 'wp_enqueue_scripts', 'my_contact_enqueue_scripts');
とやってみました。動作は問題ないのですがどうも他jsとぶつかり合っているのかconsoleエラーが解消できなかったので…そもそもcontactform7を使う事自体をやめました…orz
ここでいうif (is_single()) {…}ってのが重要ですね。それ以外のページでも条件分岐させることで各種プラグインの読み込み状況を変えましょう。