ウェブサイト遅いんだけど問題「おうちで外食」(2020年06月14日)

現状把握

ウェブに関する主な指標

モバイル

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

LCPの問題:4秒超(モバイル)80件 4.3秒

 

PC

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

PageSpeed Insights

評価サンプル https://ouchi-gaishoku.cafe-tatsujin.com/mac-takuhai.html

 

モバイル 

初回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

試したこと

アドセンスの広告を削除した

※ 効果の真偽は不明(実施後にPageSpeed Insightsを何度か実行したところ数値に揺らぎがあったため)

評価サンプル https://ouchi-gaishoku.cafe-tatsujin.com/mac-takuhai.html

のページはアクセスが比較的多いことから、通常の広告に加えて別途アドセンスコード(種別:記事内広告)を11件貼っていた。

これらをすべて削除した結果広告の数が、16件→5件に減少した。

実施前実施後
自動広告   ON
リンクユニット1件
関連ユニット 1件
レスポンシブ 2件
記事内広告  1件
記事内広告 11件
自動広告   ON
リンクユニット1件
関連ユニット 1件
レスポンシブ 2件
記事内広告  1件

 

その結果、PageSpeed Insightsのスコアが24点から31点になった(7点アップ)

ラボデータの数値が以下のように改善された。

項目実施前実施後
First Contentful Paint3.5秒3.5秒
インタラクティブになるまでの時間14.5秒12.6秒
速度インデックス7.1秒6.6秒
合計ブロック時間1160ミリ秒740ミリ秒
最大コンテンツの描画10.0秒10.1秒
累積レイアウト変更00

画像の圧縮(EWWW Image Optimizer)

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

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

 

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

 

最適化ステータス

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

 

一括圧縮

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

最適化対象:4,910点

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

Cocoon 高速化の設定

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

 

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

にチェックを入れる

記録画像

(1)2020年6月14日 昼間