【開発者向け】WordPressテーマの軽量化対策5つ
- Wordpress
- 2017/02/11
Thunderbird4.0で力を入れて取り組んだテーマの軽量化対策を5つ紹介します
その1:ファイルサイズを1KBでも減らす
基本中の基本です。ハイスペックサーバーではあまり気にならないかもしれませんが、Reras-factoryのようにあまり高速でないサーバーを使用している際はかなり重要になってきます。Thunderbird4.0では、肥大化したCSSファイルをシェイクアップすべく、1つの要素に対して指定されているスタイルが1行の場合は改行を無しにすることで行数を減らし減量しています。また、同じスタイルを適用する場合は要素指定をカンマで区切ることで大幅なコードの削減ができます。PHPに関しては、マテリアルデザインになり、テーマ側で実装する機能が増えましたがファイルサイズは殆ど変わっていません。
その2:外部ファイルの読み込み位置の変更
ソースコードは上から下へ読まれていきます。CSSやJavaScriptなどの外部ファイルは基本的にはヘッダー内に読み込ませるコードを書きますが、そうするとまだメインコンテンツの読み込みまで行っていないのに外部ファイルの参照で待たされてしまいます。Thunderbird4.0では外部ファイルの読み込み位置をフッターに変更しました。すると、メインコンテンツをすべて読み込んで表示した後で外部ファイルを読みに行くので待ち時間が少なくなります。ただ、あまりCSSの読み込みが遅いとスタイルが適用されていないHTMLが一時的に表示されてしまうなどの問題があります。
その3:記事画像の軽量化
画像はテキストファイルに比べて巨大です。特にこのブログでは画像を多用してわかりやすくするスタンスですから時間を掛けずに多くの画像を読み込む必要があります。この時に役立つのPhotoshopの書き出し機能です。画像のサイズを統一するためにブログに掲載するすべての画像はPhotoshopで何らかしら手を加えています。今までは普通にpngで書き出してから『縮小専用』というアプリでファイルサイズの上限を200KBにして軽量化させていましたが、Photoshopの『Web用に保存』機能を利用して書き出すと、100KBを余裕で切るサイズになります。実際、この手法で書き出すようになってから、記事の表示速度が体感でかなり上がっています。目に見えるほど劣化もしていないのでオススメです。
その4:キャッシュを利用する
Wordpressは動的HTMLという性質上、どうしても表示に時間がかかります。そこで、一度静的HTMLに書き出したものを保存して訪問者にそれを読み込ませるようにするとデータベースに情報を読みに行かせるよりずっと高速です。『WP Super Cache』などのプラグインはWordpressのコア部分を汚してしまうようなので僕は使っていませんが、静的HTMLを書き出させるプラグインには『ZenCache』プラグインを使っています。
もうひとつはサーバー側ではなく、ユーザーのPCに有効期限を指定したキャッシュを残し、期限内であればそのキャッシュファイルを優先させて読み込ませる方法です。これはサーバーの.htaccessファイルを直接編集するため難易度が高めですが、その分効果も大きいですからバックアップを取ってぜひやってみてください。以下のコードを.htaccessファイルに追記するだけです。
.htaccessファイルは記述を誤るとサイトが表示されなくなる可能性があるため、必ずバックアップを取ってください。生じたいかなる障害に対しても管理人は責任を負いません
その5:CSSはあまり階層化させない
上にも書いたとおり、ソースコードは縦方向に関しては上から下へ読まれていきます。では、横方向はどうでしょう。現代の日本語は左から右へ読みますが、CSSは右から左へ読まれるそうです。
つまり、上の画像のBeforeの例だと、
- a要素全てを列挙
- そのなかで親にliを持つものを絞り込み
- 更にそのなかで親にulを持つものを絞り込み
- 更にそのなかで親にsideクラスを持つものを絞り込む
- 絞り込んだ要素にスタイルを適用
となります。Wordpressクラスになると最初のa要素の時点で大量になるのでとても時間がかかります。なので、この場合は最後のa要素にlistというクラスを与えて直接スタイルを指定したほうがスマートかつ軽量です。
あとがき
軽量化に取り組むにあたって、キャッシュ系プラグインを使用するWordpressの高速化の情報は沢山あったのですが、テーマ側でできる軽量化の記事は探すのに苦労したので僕が試したことをまとめてみました。特に最後のCSSが右から読まれることは知りませんでしたね。ここにまとめたことを全て実践した結果、GoogleのPage Speed Insightsでかなりの高得点が出せるようになりました。Wordpressで自作テーマを運用されている方はぜひご活用ください。