ウェブサイト遅いんだけど問題「コメダ珈琲だいすきクラブ」(2020年06月14日)

現状把握

ウェブに関する主な指標

モバイル

不良URLXX件
改善が必要なURL0件
良好URL0件

LCPの問題:4秒超(モバイルXX件 XX秒

 

PC

不良URL0件
改善が必要なURLXX件
良好URL0件

PageSpeed Insights

評価サンプル XXX

 

モバイル 

初回Cocoon高速化実施後
総合得点24点38点
[Origin Summary ]
初回Cocoon高速化実施後
First Contentful Paint(FCP)2.1s2.1s
初回入力遅延(FID)32ms32ms
Largest Contentful Paint(LCP)4.3s4.3s
Cumulative Layout Shift(CLS)0.20.2

 

[ラボデータ]
初回Cocoon高速化実施後
First Contentful Paint3.5秒2.7秒
インタラクティブになるまでの時間14.5秒10.5秒
速度インデックス7.1秒5.2秒
合計ブロック時間1,160ミリ秒980ミリ秒
最大コンテンツの描画10.0秒6.0秒
累積レイアウト変更00

 

[改善できる項目]
初回Cocoon高速化実施後
次世代フォーマットでの画像の配信3.9s0.43s
レンダリングを妨げるリソースの除外2.1s1.17s
適切なサイズの画像1.95s0.28s
効率的な画像のフォーマット1.8s0.28s
使用していないJavaScriptの削除1.77s2.21s
オフスクリーン画像の遅延読み込み0.6s(消失)
使用していないCSSの削除0.3s(消失)
Reduce initial server responsive time0.01s0.14s

試したこと

画像の圧縮(EWWW Image Optimizer)

WordPressのテーマ「Cocoon」作者のサイトでも高速化のために利用を推奨していたプラグイン「EWWW Image Optimizer」をインストールしサイト内の全画像の圧縮処理を実施した。

圧縮処理をするまえに、念の為、UpdraftPlusによるバックアップ処理を実行しデータはなにかあっても戻せるようダウンロードしておいた。

 

EWWWww Image Optimizerの全画像圧縮処理実施前の管理画面に表示された情報

 

最適化ステータス

圧縮リサイズ
15%20%
画質に影響を与えずにファイルサイズを小さくしますより多くの節約のために画像を拡大縮小する

 

一括圧縮

メディアー>一括最適化から辿る

最適化対象:13,851点

処理時間:30分弱(最適化処理実施当初表示されていた見込み数値)

 

処理完了

削減結果 ー 9.02MB(13,851点)

Cocoon 高速化の設定

Cocoon 設定ー>高速化をたどって設定する

 

ブラウザキャッシュの有効化
HTMLを縮小化する
CSSを縮小化する
JavScriptを縮小化する
Lazy Loadを有効にする
Google フォントの非同期読み込みを有効にする

にチェックを入れる

 

試してみた結果

モバイル版

初回Cocoon高速設定後
総合得点19点25点

 

フィールドデータ

初回Cocoon高速実施後
First Contentful Paint(FCP)2.1s2.1s
初回入力遅延(FID)29ms29ms
Largest Contentful Paint(LCP)6.6s6.6s
Cumulative Layout Shift(CLS)0.260.26

ラボデータ

初回Cocoon高速実施後
First Contentful Paint4.0秒2.9秒
インタラクティブになるまでの時間15.9秒14.5秒
速度インデックス8.0秒6.4秒
合計ブロック時間1,340ミリ秒1,740ミリ秒
最大コンテンツの描画22.3秒11.3秒
累積レイアウト変更00

 

改善できる項目

初回Cocoon高速実施後
次世代フォーマットでの画像の配信13.95s4.3s
効率的な画像フォーマット4.5s0.15s
レンダリングを妨げるリソースの除外2.72s1.17s
適切なサイズの画像1.5s1.95s
使用していないJavaScriptの削除1.5s1.5s
使用していないCSSの削除0.45s(消失)
Reduce initial server response time0.34s0.48s
CSSの最小化0.15s(消失)

 

メモ

Cocoon高速化実行後の結果に以下の診断結果が表示されていた。くわしく確認したほうがいいかもしれなさそうな内容。

 

過大なDOMサイズの回避 2,179件の要素
DOMサイズが大きいと、メモリの使用量が増え、スタイルの計算に時間がかかり、レイアウトのリフローというコストが発生します。
統計情報 Element 値
合計DOM要素数    2,179
DOMの最大深さ <a href=”#toc4″ tabindex=”0″> 15
子要素の上限数 <div class=”theContentWrap-ccc”>93

パソコン版

記録画像

これからあっぷ