Cocoonでサイト高速化！初心者でもできるUX改善の完全ガイド

このサイトのWordPressテーマはCocoon でレンタルサーバーはエックスサーバー  です。

【PR】高速・安定・高機能！エックスサーバー は月990円〜、初期費用無料。運用サイト数250万件、稼働率99.99%、KUSANAGI搭載でWordPressも超高速。独自ドメイン＆SSL永久無料、多数ドメイン・メール対応！安定運用をAI＆復旧機能でサポート。

ユーザー体験(UX)を改善する背景

2024年12月1日Googleアドセンス導入後、ウェブに関する主な指標「Core Web Vitals」のLCPとCLSが不合格となり、検索順位への悪影響を懸念しました。

LCP（Largest Contentful Paint）とはページの主要な部分が表示されるまでの時間のことです。表示内容が遅いとこの数字が大きくなり、不合格になります。
CLS（Cumulative Layout Shift）とはページのレイアウトがどれだけ安定しているかの指標です。表示内容がカクカクずれるのはこの数字が大きくなり、不合格になります。

このサイトのユーザー体験(UX)を改善するために対策しました。その効果があったので情報を共有します。

UX（User Experience：ユーザーエクスペリエンス）とは、ユーザーが製品やサービスを使用する際に得られる 体験 や 満足感 を指します。Webサイトやアプリでは、見た目、使いやすさ、機能性などがユーザーの体験に大きく影響します。

広告の下に記事が続きます

ユーザー体験改善でやったこと（ウェブの高速化）

Cocoonは初心者にも扱いやすく、高速化やSEO対策機能が充実した無料テーマです。今回このユーザー体験改善でそれが分かりました。そこで初心者でも取り組みやすい範囲で、Cocoonの設定とプラグインを調整しました。またエックスサーバーは国内で評価の高い高速レンタルサーバーで、今回の改善においても最適な選択肢と判断しました。

広告

Googleアドセンスの自動広告はやめて、手動広告にしました。またCocoon設定の「広告の表示位置」は「本文中のみ」にし広告数を減らしました。またウェイジッドでサイドバーのみにディスプレイ広告するように変更しました。

またGoogleアドセンス審査用のコード「<script async src=”https://pagead2.googlesyndication…</script>」を残したままでしたので削除しました。この削除が大幅にスコア改善に貢献しました。

キャッシュ

• W3 Total Cache　でHTML、CSS、圧縮を有効化し、キャッシュ保持期間を1週間に設定しました。Javascriptの圧縮は不具合が生じたので無効のままです。
• CDNも導入しました。W3 Total Cacheとの相性が良いとされる有償CDNのBunnyです。

CDN（Content Delivery Network）とは、インターネット上のサーバー群を利用して、ウェブコンテンツを効率的に配信する仕組みやサービスのことです。ウェブサイトの表示速度を向上させたり、負荷を分散したりするために使われます。

サーバー

現状のレンタルサーバーは、高速と言われているエックスサーバー  のため、引き続き継続します。

エックスサーバーの設定ページを確認し、『PHPバージョンのアップデート』と『ブラウザキャッシュ設定の有効化』を行いました。

【PR】高速・安定・高機能！エックスサーバー は月990円〜、初期費用無料。運用サイト数250万件、稼働率99.99%、KUSANAGI搭載でWordPressも超高速。独自ドメイン＆SSL永久無料、多数ドメイン・メール対応！安定運用をAI＆復旧機能でサポート。

高速化プラグイン

• Autoptimize　を検討しましたが、下記２つプラグインと競合で不具合が発生し、現在の筆者だと手に負えないため、導入を断念しました。
• W3 Total Cache　はもともと導入済でしたが、高速化のため設定を一部変更しました（見出し「キャッシュ」既出）

• Flying Scripts　を導入しました。JavaScriptの読み込みを遅延させて速度を改善するプラグインです。設定は上記のようにしています。「Inculde Keywords」に「adsbygoogle.js」を追加するとGoogle広告が消えてしまうため、削除しました。

プラグインの断捨離

プラグインの数はサイト速度やセキュリティに影響を与えるため、20以下を目標に厳選しました。

• Site Kit by Google　は外部で閲覧可能のため削除しました。
• Google Analytics for WordPress by MonsterInsights　は外部で閲覧可能のため削除しました。
• All in One SEO はCocoonと機能重複するため、また動作重いとの評判のため削除しました。
   【参考】メタディスクリプションでの競合不具合　【参考】OGPでの競合不具合
• XML Sitemap Generator for Google　は前者を削除したためサイトマップ自動作成機能が必要となり追加しました。

表示速度の向上

Cocoonのスキンを一番シンプルな「なし」に変更しました。

今回、下記３つのプラグインを導入しました。

• Speculative Loading　は次に必要となるリソースを事前に読み込むことでページ表示速度を向上させるプラグインです。
• Performance Lab　パフォーマンス向上のツールセットを提供するプラグインです。
• OMGF　Googleフォントをローカルでホストすることで、速度の改善とGoogle広告の表示を両立します。

遅延読み込み

Cocoon設定→「高速化」→「遅延読み込み」→「LazyLoadを有効にする」のチェックを外し無効にしました。競合もありますので遅延読み込み機能があるプラグイン導入および設定には注意しましょう。筆者は何度かやらかしました。

画像の最適化

PHPファイル

初心者の方には、PHPファイルの直接編集を避け、プラグインやテーマ設定を活用することをおすすめします。編集ミスはサイト全体に影響を及ぼすため、リスクが高い作業です。

広告の下に記事が続きます

まとめ

以上の改善により、PageSpeed Insightsのパフォーマンススコアはモバイル(携帯電話)で73、デスクトップで97を達成しました。Cocoonの高速化機能とプラグインを活用することで、初心者でも無理なくサイト速度とユーザー体験を向上できます。

広告の下に記事が続きます

よろしければ引き続きこちらをお読みいただくと、知識が深まります。

【外部リンク】cocoon公式　お勧めしないプラグイン  

---

最後まで読んでいただきありがとうございました。