WordPressの表示速度アップに色々試したら1秒台も出た

前回の、WordPressの速度を調べる方法とBLOGEの現在の状況
から色々試した結果、web担ブックマークレットで1秒台がでました!!

Web担当者Forum・Webサイト表示のどこが遅いかを一発で調べるブックマークレットの測定結果で1秒台が出た

 

1.468秒と出ましたが、単発的だと思います。
もちろん、キャッシュ有でです。

でも、これ以上早くするとなると、画像の容量削減に手を入れなくては無くなり
サーバーサイドで縮小して表示するとなると、サーバー負荷が高まって
表示速度も同じぐらいになりそうなのでやめました。

試した方法

CSSの統合

現在使っている賢威というテーマではCSSがなんと
common.csslayout.cssdesign.cssmobile.cssmobile_layout.cssadvanced.css
と印刷用のprint.cssの7ファイルに分かれているので
common.csslayout.cssadvanced.cssを統合しました。

読み込むファイル数を少なくする事でサーバーへのリクエスト回数も減ります。

JavaScriptsの読み込みをヘッダーから外す

これはHead Cleanerというプラグインを使っても出来ますが、
Head Cleanerの場合、CSSとJavaScriptをキャッシュできたりしますが、
キャッシュは同一サーバなので意味無い気がしますし、
設定項目が多いので、JavaScript to Footerと言うプラグインを使って
ヘッダー内のJavascriptを</body>タグの上辺りに移動しました。
テーマで定義されているJavaScriptも手動で移動しました。

JavaScript to Footerと言うプラグインはWordPress.com上では
2年以上更新されてないのですが、ソースを見ると
フックの削除と登録だけのちょーしんぷるなプラグインなので
プラグインを有効にしてヘッダーからプラグイン系のJavaScriptが
ヘッダーから消えているか、表示に問題は無いか確認して良ければ
問題無いと思います。

このプラグインで移動出来るのはプラグインなどの動的なJavaScriptだけです。
ヘッダーに直接、入力されているJavaScriptは手動で移動する必要があります。

なぜ、ヘッダーからJavaScriptを移動させるか、その理由は
ブラウザがページのhtmlを読み込む時、上から順番に処理しますが、
上の方にJavaScriptがあるとJavaScriptの処理で手が回らなくなってしまい
ページの表示が遅くなってしまいます。
そこでヘッダーからbodyタグの終わりの方に移動すると、
htmlも最後の方で、ページの表示が終わった頃にJavaScriptが読み込まれるので
ブラウザ側でのレンダリング時間の短縮に効果的です!

WordPressプラグイン Lazy Load

Lazy Loadは画像を後から読み込むプラグイン。
多少、早くなるみたいですが環境によっては画像が表示されない事もあるみたい
なので有効化後、要確認です。

まだやってないけど効果がありそうな事

画像の縮小化

ブログ記事で使った画像を、サイドバーや関連記事から読み込むとどうしても
サイズが大きくなってしまいます。
それをサーバーサイドで処理してからクライアント側に渡せば多少早くなるかもしれませんが
今度はサーバ負荷が高くなりそうですし、面倒なので放置しています。

Facebook Likeボックスなど、ウィジェットの削除

FacebookやTwitterのウィジェットって結構読み込みに時間が掛かります。
またShareHtmlメーカーで作ったサムネイルも時によっては時間が掛かります。
なので効果の無いウィジェットなどは削除するとページ表示速度が上がるかもしれません。

CDNサービスを使う

CDN(CDNはContent Delivery Network)の略で画像などを別サーバから読み込む事で
ページ表示速度が上がります。
WordPressでも使える所だと cloudflarePhotonがあります。
どちらも無料から使えますが、 cloudflareの場合DNS設定を変更する必要があり
cloudflareで問題が発生するとサイト自体が表示出来なくなる可能性があります。
PhotonはWordPress.comのプラグインであるJetpackの機能の一部でもあるので
パブリサイズ共有などで使っている場合は新たなプラグインをインストールせず
Photonの機能を使うことが出来ます。

しかし、Photonの場合は一度キャッシュされる
キャッシュ削除の機能が無いらしいので画像の変更を適用させるにはファイル名を
変更する必要があるみたいです。

まとめ

とりあえず、1秒台も出ましたが、平均すると2.5秒ぐらいです。
キャッシュされていないとさらに遅くなります。

キャッシュは一度表示されると、キャッシュが生成されますが、
表示されないとキャッシュされません。

なので今度は素なWordPressの高速化を目指そうかと思います。