はい、DAFUです。
今回は、私のブログの読み込み速度を500ms付近まで高速化出来たので、このブログで行っている高速化施策をまとめました。
これを設定するとWordPressを使用しているなら大体のサイトではそれなりに高速化出来ると思いますので、サイトが遅いという方は是非ご活用ください。
目次
HTTP/2接続を使う
これは最近ホットになって来たHTTP/2を従来の規格であるHTTP/1.1に代わって利用するというものです。
HTTP1.1ではファイル毎に送受信していますが、HTTP/2では複数のファイルをまとめて送受信することができるため、高速化に寄与します。
対応したサーバーを使用していれば自動で適用されます。
そのため、HTTP/1.1で高速化対策とされていたCSSスプライトや画像のインライン化を施すと逆に遅くなることがあります。
小さいファイルを大量に用意して、並列で読み込むのがいいでしょう。
PHP OPcacheを使う
これは、PHPの拡張機能であるZend OPcacheを用いることで、PHPの処理時間を短縮し、高速化するというものです。
具体的には、PHPの処理をキャッシュすることによってPHPの処理時間を短縮しています。
ただし、この機能を用いるにはOPcacheがサーバーにインストールされている必要があります。
レンタルサーバーではSSHが有効であっても管理者権限を与えられていないため、あらかじめインストールされているサーバーを選ぶ必要があります。
あらかじめインストールされている代表的なサーバー
- コアサーバー (このブログもこのサーバーの最下位プランであるCORE-MINIでホストしています。)
- mixhost
- Xserver
- WADAX
- ColufulBOX
また、WordPress上では、WP OPcacheを使用することで、管理画面上からOPcacheを操作することが出来ます。
プラグインページ(wordpress.org)
PHPをgzip圧縮する
これを行うにはphp.iniが編集可能なサーバーが必要になります。
php.iniを編集できない場合これは適用できないので無視してください。
zlib.output_compression = On
このように編集するとPHPを圧縮出来ます。
ちなみに圧縮にはgzipを利用するため、プラグインの数を抑えることが出来ます。
コアサーバーではphp.iniを編集することが出来るため、これをオンにしています。
php.netのドキュメント
キャッシュを設定する
多分すでにやっている方も多いのではないでしょうか。
色々なサイトで紹介されている有名な高速化施策です。
かなり使い古されていますが、確かな効果はあります。
また、プラグインで導入出来るので、非常に手軽なのも確かです。
プラグインを使う
当サイトでは、Pagespeed Ninjaというプラグインを利用しています。
プラグインページ(wordpress.org)
このプラグインではPage Speed Insghitの計測が出来、その結果の改善点を見やすくまとめてくれます。
また、改善点についてクリックだけで改善することの出来る機能もあります。
また、手動で設定する際も設定項目が多く、非常に多機能なプラグインです。
慣れないうちはプリセット設定にしておくのが無難かと思いますが、キャッシュプラグインは設定によってはサイトが表示されなくなるので、SafeやCompactから段階を踏んでレベルを上げていくことをお勧めします。
.htaccessを使う
先ほどプラグインを使うタイプのキャッシュ設定を紹介しましたが、プラグインを使わずとも実施可能です。
そのためには、.htaccessというファイルを編集する必要があります。
.htaccessは設定に失敗するとサイトを表示できなくなるので、必ずバックアップを取ることをお勧めします。
また、.htaccessが使えないサーバーもありますので、その場合には素直にプラグインを使いましょう。
以下のコードを書くだけです。
# Cache Config <Files ~ ".(gif|jpe?g|png|ico|otf|ttf|eot|woff)$"> Header set Cache-Control "max-age=2592000, public" </Files> <Files ~ ".(css|js|html|gz)$"> Header set Cache-Control "max-age=86400, public" </Files>
これでキャッシュが使用されます。
Serviceworkerを使う
これは、ネットワーク処理の空いた部分でファイルを読み込んでキャッシュしておき、ほかのページで活用するというものです。
先述したキャッシュプラグインと併用することが出来ます。
自分でServiceworkerを書くのは知識が必要ですが、幸いWordPressを利用するならPWA for WordPressというプラグインを利用することで簡単に導入可能です。
プラグインページ(wordpress.org)
このプラグインを利用することによって、PWAに必要なファイルを生成したり、キャッシュ範囲を決めたり出来ます。
また、これを設定すると、オフラインでもページが表示されるようになります。
これは良し悪しですが、ブログであれば導入しやすいと思います。
ファイルを最適化する
これは、サイト上のファイルを圧縮して、ファイルサイズを減らすことで高速化するという方法です。
cssやjavascriptは先ほどのキャッシュプラグインでもこれに対応しているものも多いのでここでは紹介しませんが、画像ファイルなどまた別のものを使う必要があります。
当然これもプラグインを使用することが出来るのですが、基本的に無料では枚数制限がある場合も多いです。
reSmush.it Image Optimizer
現在当サイトではプラグインを使用していませんが、今回紹介するにあたり、これが制限緩めで良かったので紹介いたします。
プラグインページ(wordpress.org)
このプラグインではhttps://resmush.it/のAPIを利用して最適化を行っています。
また、圧縮率もそれなりに高いのもいいところです。
また、制限はありますが、枚数制限ではなく、ファイルサイズでの制限(5MBまで)というものなのであまり気にしなくていいのも嬉しいです。
Tinypng
現在当サイトが利用している画像圧縮サイトです。
簡単な操作で圧縮することが出来、圧縮率も高めです。
公式サイト
操作が簡単で、英語のサイトですが直観的に操作することが出来るのは嬉しいです。
また、複数の写真を一括で処理することも出来るのは嬉しいです。
まとめ
今回は、私のブログでしている高速化施策をまとめましたがいかがでしたでしょうか。
また、今回書いたものの他にも高速読み込みを謳うテーマも最近では増えているので、それ使用することなども効果的です。
ちなみに私の使用しているLion mediaもそのようなテーマの内の一つです。
テーマ公式サイト
また、今回紹介したプラグインの他にも多数の高速化プラグインは存在しますので、ぜひサイトに合うプラグインを探してみてください。