今回は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での表示速度高速化でした。
ブロックエディタ利用しているなら記事作成がサクサク進むテーマ「SWELL」がおすすめです。
文字色や文字の大きさ、枠線、マーカーなど必要な機能が簡単に利用できるように工夫されてます。
↓キャプション付きのブロックとか
↓吹き出し機能とか
↓Q&Aのボックスとか
↓自由に選択できる各種ボタンとか
↓動画で見ると分かりやすいです。
という感じでブロックエディタが使いにくいとか、使いたい機能があるけど使い方が分からない初心者の方にもおすすめのテーマです。
ぽちゃさん、Swellほんとに良いテーマです…！まるブログではJINを使ってますが、ブロックエディタの使いやすさとカスタマイズのし易さはSwellが半端ないです…😭🙏✨
— まる|ブログ4ヶ月目 (@maru_lifes) June 2, 2022
SWELL専用のブロックは多数あって、これが便利です！
吹き出し、キャプションボックス(私の記事内で、この記事を読んでわかることってやつ)、記事内リンクとかたくさんありますよ！SWELL公式ページにも専用ブロックが紹介されてます✨
— せでぃあ@🔰5月からブログはじめました (@cediablog) June 5, 2022
SWELLヤバすぎる！！
トップページ触るの楽しすぎて、全然調整が出来てないんですけど笑笑
こんなに自由度高いのに、綺麗に仕上がってて、勝手にかつてない程、自己肯定感高まっているっ(￣∀￣)（テーマの力ということは分かってます笑笑）#Blog #SWELL #ブログ初心者 #ブログ初心者と繋がりたい— たかし🔰夢を叶えるブログ (@fire_takashi) March 22, 2022
まってSWELL最高すぎん？？
HTMLとCSS使わないでここまでできるのか、、、
もう最初からデザイン整ってるしちょっとカスタマイズするだけで完璧すぎる理想のブログになった✨#Blog #ブログ #ブログ仲間と繋がりたい #ブログ初心者 #ブログ初心者と繋がりたい #ブログ仲間募集中 pic.twitter.com/zSfcjxO6LQ— まき🔰ブログ2ヶ月目 (@pinomackey_blog) March 22, 2022
多くのブロガーの本質をついていますよね。
サイトのデザインはぶっちゃけSWELL導入すれば後は何もしなくていいです。
アイキャッチ画像も検索からくる人はほとんど気にしてません。
サイトデザインは有料テーマに頼って記事の質を高める。#ブログ #ブログ書け #ブログ初心者 https://t.co/TGdtfYNX7O— ソウタ｜仮想通貨ブログ×Webライター (@_soutalife) June 3, 2022
- テーマが有料（1回購入で複数サイトで利用はできる）
- 最初からデザインがおしゃれ
- 初心者の方でも使いやすい
- ボックスや吹き出しなど必要な豊富なツールが揃っている
- 着せ替えデザインなどでデモサイトと同じデザインにできる
- 記事を書く事だけに集中できる
- 検索順位に有利（SEO）
「百聞は一見にしかず」ということで一度デモサイトも確認してみてください。
コメント