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