WordPress超高速化ノウハウ:1.原因調査とHTTPリクエスト削減

goto_jp 868views 更新:2014年4月15日

自分が業務や個人的に行っているWordpress高速化ノウハウを紹介します。

WordPressを高速化する手法は多々ありますが、根本的解決からWordpressプラグインに頼る方法まで多岐にあり、解決すべき項目ごとに順を追って紹介していきます。

現状把握

まずサイトがどの程度重いのか、何が原因で重いのかを知らなければなりません。
自分は下記2点のツールを使って診断しています。

・GoogleChromeのデベロッパーツール
YSlow

Chromeのデベロッパーツールの「Network」で読み込み計測し、ページのロード時間が2秒未満であれば合格、1秒未満なら優秀という基準で良いです。

YSlowでの診断は、よほど画像も仕組みも無いスカスカなサイトでなければどんなに頑張ってもB~Cあたりで、高速化の工夫をしていなければE以下も普通なので、満点のAを目指す必要はありません。これは解決箇所を具体的に調べるツールと考えて、グレード評価は気にしなくてよいです。

対応項目

高速化のために対応すべき項目は大体下記のように決まっています。

・HTTPリクエスト減らせ
・gzip圧縮しろ
・ブラウザキャッシュ使え
・画像サイズ削減しろ
・HTML/CSS/JSを縮小化しろ
・CSS/JSの読み込み順序を最適化しろ

HTTPリクエスト削減

HTTPリクエストはHTML本体以外のファイルを読み込む際に発生するので、対策としては主に下記です。

・表示する画像を減らす
・読み込むファイルを減らす(jsファイル、cssファイルの結合)

表示する画像を減らす

最もメジャーなのはCSSスプライトの手法で、サイト内で繰り返し使われる画像を結合する方法です。またFontAwesomeなどのWebフォントを使い、アイコンに代用する方法もメジャーです。

さらにテクニカルにはDataURIスキームを使った手法もあり、下記の記事で以前紹介しています。
画像をCompass(Sass)でData URIスキーム化してHTTPリクエストを削減する

読み込むファイルを減らす

JavaScriptやCSSなどの外部ファイルの読み込みを減らすには、ファイルのミニファイと結合を行うのが定石で、Wordpressは下記プラグインで一発で行えます。

WP Minify

次回に続きます。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません