今回はWordPress高速化の施策について紹介していきます。
おすすめの無料テーマCocoonではもともと高速化のための設定なども用意されているため、非常に簡単に高速化が可能です。
表示速度改善のための施策をまとめて紹介します。
サイトの表示速度を調べるには？
サイトの表示速度をチェックできるサービスは色々ありますが２つだけ紹介しておきます。
- GTmetrix
- PageSpeed Insights
GTmetrix
GTmetrixはサイトの表示にかかる時間を計測してくれるサイトです。
URLを入力して「Analyze」をクリックすると表示速度が計測できます。
■PageSpeed Score
Googleのサイト速度計測サービスの「Page Speed」 のサイト評価。
■YSlow Grade
Yahooのサイト速度計測サービスの「YSlow」 のサイト評価。
- Fully Loaded Time：ページをロードするのにかかった時間の目安
- Total Page Size：サイトを表示するのに必要なデータのサイズ
- Requests：ブラウザとサーバーのやり取りの回数
という感じですね。
PageSpeed Insights
Googleのサイト計測サービスが「PageSpeed Insights」。
サイトのスピード計測だけでなく、改善ポイントなども指摘してくれます。
こちらも調べたいサイトのURLを入力して「分析」をクリックするだけ。
モバイルとPCのタブで成績を見る事ができます。
さらに何が原因で表示速度が遅くなっているのか？その原因と改善策を見る事ができます。
という事でサイトの表示スピードの計測には上記２つのサイトが役立ちます。
Cocoonの高速化するための施策
Cocoonではもともと高速化のための設定が装備されています。
この設定だけで基本的な部分は抑えることができますが、さらに細かい部分でやれることがあるので簡単に紹介していきます。
１．Cocoonの高速化設定
通常WordPressのテーマではプラグインなどをいくつも使って高速化するのですが、Cocoonではプラグインなしである程度の高速化が実装できてしまいます。
Cocoon設定の「高速化」をクリック。
高速化の項目は全てチェックを入れます。
全部チェックをいれてたら保存でOKです。
下記プラグインはCocoonの高速化設定と機能が重複するので必要ありません。
- Lazy Load
- Autoptimize
２．次世代フォーマットでの画像の配信 画像の最適化をする（WebPに対応）
表示速度に大きく影響するのが画像です。大きな画像が多いほど重くて表示速度も遅くなります。
ということで画像の圧縮などの最適化が必須になります。
「PageSpeed Insights」でよく指摘されるのが「次世代フォーマットでの画像の配信」です。
WordPressのプラグイン「EWWW Image Optimizer」を使ってWebPに対応させて画像を最適化することができます。
３．キャッシュ系プラグインを入れる
キャッシュとは、ブラウザで一度表示したページのデータ（HTMLや画像）を一時的に保存しておく機能です。
データを保存しているので同じページを再度訪れる場合は素早く表示することが可能です。
キャシュ系のプラグインは不具合がでることが多いのですが、「WP Fastest Cache」はシンプルで使いやすく、大きなトラブルの話もほとんど聞きません。
Cocoonで「WP Fastest Cache」を利用する場合はCocoonの高速化設定と機能が重複しないように設定する必要があります。
LiteSpeedを採用している「mixhost」や「ColorfulBox」を利用している方はLiteSpeed専用のプラグイン「LiteSpeed Cache」を使ってください。
４．PHPのバージョンを最新にしておく
サーバーのPHPのバージョンを確認して最新にしておきます。以前はPHP5が標準でしたが、現在はPHP7。
例えばPHP7はPHP5とくらべて実行処理速度が大幅に改善されました。
という事で高速化するならPHPのバージョンは確認しておくと良いです。
PHPのバージョンを新しいものに切り替えると古いプラグインなどはエラーが出るものがありますので、代替えプラグインを探してみて下さい。
エックスサーバーはサーバーパネルからPHP設定
推奨と書かれているものを選択しておけばOKです。
ロリポップはユーザー専用ページからPHP設定
こちらも最新のものを選択しておきます。
５．レンダリングを妨げるリソースの除外を改善。JavaScriptをフッターで読み込む
通常ヘッダー部分で読み込みをするJavaScriptですが、こいつが読み込みを遅くさせます。
「レンダリングを妨げるリソースの除外」として指摘される部分です。
ということで、邪魔をするJavaScriptをフッターで読み込みすることで、問題は解決します。
以下コードを子テーマの「functions.php」に追加したらOKです。
//JavaScriptをフッターで読み込む
function is_footer_javascript_enable(){
return true;
}JavaScriptをフッターに読み込むことで正常に動かないプラグインがあったりするので、問題がないかサイトを見ながら必ず確認をして下さい。
また、PageSpeed Insightsのスコアが悪くなる場合は元に戻しておいて下さい。
以上Cocoonでの表示速度高速化でした。
コメント