※ 当サイトではアフィリエイト広告を利用しています。

Cocoonでサイトの表示スピードを高速化するための施策とプラグインまとめページ

Cocoon高速化 Cocoon(コクーン)の設定・使い方

今回はWordPress高速化の施策について紹介していきます。

おすすめの無料テーマCocoonではもともと高速化のための設定なども用意されているため、非常に簡単に高速化が可能です。

表示速度改善のための施策をまとめて紹介します。

著作情報
この記事を書いた人

WEBエンジニア11年目。これまでに100を超えるサイトの立ち上げや運営に携わり、2017年に法人化。カスタマイズ、デザイン、ツール作成、サイト移転まで何でもこなします。

sigezoをフォローする

サイトの表示速度を調べるには?

サイトの表示速度をチェックできるサービスは色々ありますが2つだけ紹介しておきます。

  • GTmetrix
  • PageSpeed Insights

GTmetrix

GTmetrixはサイトの表示にかかる時間を計測してくれるサイトです。

GTmetrix

URLを入力して「Analyze」をクリックすると表示速度が計測できます。

GTmetrix使い方

GTmetrix使い方2

■PageSpeed Score

Googleのサイト速度計測サービスの「Page Speed」 のサイト評価。

■YSlow Grade

Yahooのサイト速度計測サービスの「YSlow」 のサイト評価。

  • Fully Loaded Time:ページをロードするのにかかった時間の目安
  • Total Page Size:サイトを表示するのに必要なデータのサイズ
  • Requests:ブラウザとサーバーのやり取りの回数

という感じですね。

PageSpeed Insights

Googleのサイト計測サービスが「PageSpeed Insights」。

サイトのスピード計測だけでなく、改善ポイントなども指摘してくれます。

PageSpeed Insights

こちらも調べたいサイトのURLを入力して「分析」をクリックするだけ。

pagespeedinsight1

モバイルとPCのタブで成績を見る事ができます。

pagespeedinsight2

さらに何が原因で表示速度が遅くなっているのか?その原因と改善策を見る事ができます。

pagespeedinsight3

という事でサイトの表示スピードの計測には上記2つのサイトが役立ちます。

Cocoonの高速化するための施策

Cocoonではもともと高速化のための設定が装備されています。

この設定だけで基本的な部分は抑えることができますが、さらに細かい部分でやれることがあるので簡単に紹介していきます。

1.Cocoonの高速化設定

通常WordPressのテーマではプラグインなどをいくつも使って高速化するのですが、Cocoonではプラグインなしである程度の高速化が実装できてしまいます。

Cocoon設定の「高速化」をクリック。

Cocoon高速化設定1

高速化の項目は全てチェックを入れます。

Cocoon高速化設定2

Cocoon高速化設定3

Cocoon高速化設定4

Cocoon高速化設定5

全部チェックをいれてたら保存でOKです。

MEMO

下記プラグインはCocoonの高速化設定と機能が重複するので必要ありません。

  • Lazy Load
  • Autoptimize

2.次世代フォーマットでの画像の配信 画像の最適化をする(WebPに対応)

表示速度に大きく影響するのが画像です。大きな画像が多いほど重くて表示速度も遅くなります。

ということで画像の圧縮などの最適化が必須になります。

「PageSpeed Insights」でよく指摘されるのが「次世代フォーマットでの画像の配信」です。

WordPressのプラグイン「EWWW Image Optimizer」を使ってWebPに対応させて画像を最適化することができます。

【図解】画像フォーマットWebP(ウェッピー)に対応する手順!WordPressのプラグイン「EWWW Image Optimizer」を使って画像を最適化
WordPressでWebP(ウェッピー)に対応する方法を紹介。プラグイン「EW...

3.キャッシュ系プラグインを入れる

キャッシュとは、ブラウザで一度表示したページのデータ(HTMLや画像)を一時的に保存しておく機能です。

データを保存しているので同じページを再度訪れる場合は素早く表示することが可能です。

キャシュ系のプラグインは不具合がでることが多いのですが、「WP Fastest Cache」はシンプルで使いやすく、大きなトラブルの話もほとんど聞きません。

Cocoonで「WP Fastest Cache」を利用する場合はCocoonの高速化設定と機能が重複しないように設定する必要があります。

WordPressキャッシュプラグイン【WP Fastest Cache】の設定方法。Cocoonを使っている場合の設定も紹介
これまで色々とキャッシュ系プラグインを使ってきたのですがキャッシュ系プラグインに...
MEMO

LiteSpeedを採用している「mixhost」や「ColorfulBox」を利用している方はLiteSpeed専用のプラグイン「LiteSpeed Cache」を使ってください。

4.PHPのバージョンを最新にしておく

サーバーのPHPのバージョンを確認して最新にしておきます。以前はPHP5が標準でしたが、現在はPHP7。

例えばPHP7はPHP5とくらべて実行処理速度が大幅に改善されました

という事で高速化するならPHPのバージョンは確認しておくと良いです。

MEMO

PHPのバージョンを新しいものに切り替えると古いプラグインなどはエラーが出るものがありますので、代替えプラグインを探してみて下さい。

エックスサーバーはサーバーパネルからPHP設定

エックスサーバーのphpバージョン切り替え2

推奨と書かれているものを選択しておけばOKです。

エックスサーバーのphpバージョン切り替え

ロリポップはユーザー専用ページからPHP設定

ロリポップphpバージョン切り替え1

ロリポップPHPバージョンの変更2

こちらも最新のものを選択しておきます。

ロリポップphpバージョン切り替え2

5.レンダリングを妨げるリソースの除外を改善。JavaScriptをフッターで読み込む

通常ヘッダー部分で読み込みをするJavaScriptですが、こいつが読み込みを遅くさせます。

「レンダリングを妨げるリソースの除外」として指摘される部分です。

pagespeedinsight4

ということで、邪魔をするJavaScriptをフッターで読み込みすることで、問題は解決します。

以下コードを子テーマの「functions.php」に追加したらOKです。

//JavaScriptをフッターで読み込む
function is_footer_javascript_enable(){
  return true;
}
MEMO

JavaScriptをフッターに読み込むことで正常に動かないプラグインがあったりするので、問題がないかサイトを見ながら必ず確認をして下さい。

また、PageSpeed Insightsのスコアが悪くなる場合は元に戻しておいて下さい。

以上Cocoonでの表示速度高速化でした。

ブロックエディタを使うなら「SWELL」が効率的

ブロックエディタ利用しているなら記事作成がサクサク進むテーマ「SWELL」がおすすめです。

文字色や文字の大きさ、枠線、マーカーなど必要な機能が簡単に利用できるように工夫されてます。

↓キャプション付きのブロックとか
swellカラーブロック

↓吹き出し機能とか
swell吹き出し機能

↓Q&Aのボックスとか
swellQAボックス

↓自由に選択できる各種ボタンとか
swellボタン各種

↓動画で見ると分かりやすいです。

という感じでブロックエディタが使いにくいとか、使いたい機能があるけど使い方が分からない初心者の方にもおすすめのテーマです。

POINT

  • テーマが有料(1回購入で複数サイトで利用はできる)
  • 最初からデザインがおしゃれ
  • 初心者の方でも使いやすい
  • ボックスや吹き出しなど必要な豊富なツールが揃っている
  • 着せ替えデザインなどでデモサイトと同じデザインにできる
  • 記事を書く事だけに集中できる
  • 検索順位に有利(SEO)

「百聞は一見にしかず」ということで一度デモサイトも確認してみてください。

SWELLデモサイト一覧ページ

【図解】SWELLの購入からダウンロード、インストールの手順【初心者向けの始め方】
今回は初心者の方向けにSWELLのテーマ購入、ダウンロード、インストールしてユー...

コメント