Cocoonテーマ利用サイトのCore Web Vitals/PageSpeed Insights改善事例（57→95）

Cocoonテーマを利用したサイトの高速化ご依頼をいただきました。お客様がご利用されていたプラグインは一部設定を行うとiOSで2重タップが発生してしまうため、それを回避するカスタムコードの追加等を含めた対策を実施しました。

ラボデータ基準でトップページはモバイルスコアが82点から99点へ。記事ページは57点から95点へ改善しました。SEOに判断されるCrUXにおいては当初CLSが課題となってましたが今回の作業で改善を実施したので28日後のデータ更新でCore Web Vitals判定が改善される見込みです。

今回実施した高速化内容

• トップページ、記事ページでのサイト読込分析
• CSS・JSのレンダリングブロック対策
• ウェブフォント読込最適化
• 画像、iframe等のlazyload
• pjaxを使用しないサイト内遷移高速化
• 高速化をする上でボトルネックになる既存プラグイン・テーマの停止削除・設定変更

フィールドデータ・オリジンサマリー（CrUX）

ご依頼時点のオリジンサマリーではCore Web VitalsのCLSがドメイン全体で低い状態となっていました。そのためラボデータを参考に調整を行いCLSが要件をクリアするように調整を実施。

上記画像の通りラボデータでは問題ない状態になってますので、後はリアルユーザーデータの反映待ちとなります。

オリジンサマリーは現状ドメイン単位で評価されます。サブディレクトリ運用をしている場合ドメイン内のページ全てしっかり高速化しておかないとオリジンサマリー評価が低下してしまう恐れがあります。

PageSpeed Insightsモバイルスコア高速化結果

トップページの高速化前後比較

トップページのCrUXはラボデータのモバイルスコアが80台であれば日本向けサイトで閲覧者もサーバーも日本にあればほとんどクリアします。なので無理にここからラボデータを改善する必要はあまりありません。ただし今回はまだ調整できる部分がありましたので調整した結果最終的なモバイルスコアは99となりました。

記事ページの高速化前後比較

キャッシュプラグインが設定されてましたが記事ページについては改善項目がトップページより多かったのでこちらも改善。LCPについてはオリジンサマリーでは良好になってましたのであえてラボデータではこれ以上の対策をしませんでした。これについては下記ツイートをご参考にどうぞ。

CrUXが揃っているのが条件になるけど例えばリアルユーザーでLCPが良好であればラボデータの部分が良好じゃなくても大丈夫な事がある。

赤枠の箇所はもちろん改善できるなら改善すべき。ただ無理に色々と削ってまで改善すべきか？と言えばそうでもない。 #corewebvitals #webperf pic.twitter.com/WikRwftaol

— スキルシェア⚡WordPress高速化 (@skillsharejp) April 28, 2021

固定回線・LTE回線での表示速度（体感速度）

WebPageTestでのLTE回線比較では3秒→1.3～1.5秒まで表示時間を改善しました。Chromeシークレットモードでは固定回線だと0.1秒から0.8秒で各ページ表示されています。

測定サービスの機種別解像度、測定方法、そして実際にリアルユーザーが閲覧する端末の違いで実際は微妙に異なります。

お客様ご利用サーバー

お客様サイトご紹介

WordPress高速化類似事例

• CocoonテーマのWordPress高速化事例