Google search consoleのウェブに関する主な指標を何となくクリックしてみたら。
LCP の問題: 2.5秒超（モバイル）について改善が必要とのメッセージを見つけました。
しかも初検出日から８ヶ月も経過している･･･。
初心者でも失敗が無く取り組めそうな改善方法から行ってみました。
2.6秒だったLCPは2.0秒前後へ短縮することができました！
目次
Page speed insightsで計測
まずはPage speed insightsのサイトで表示速度を採点してみました。
スマホのスコアは「25」でしたが現在は「56」まで上がりました。
（パソコンは85）
スコアは3段階になっています。
0－49：悪い
50－89：改善が必要
90－100：良い
目標はLCPを2.5秒以下にすることです。
不要なテーマ･プラグインの削除
はじめにサイトを少しでも軽くしようと思い、使用していないテーマ・プラグインを削除しました。
私が削除したのは
- テーマ Twenty（デフォルトで入っていたもの）
- プラグイン Akismet Anti-Spam
プラグインは思ったより断捨離できませんでした。
それよりもテーマはAFFINGER5使用ですが、何と子テーマが有効化されていなかった！
カスタマイズするスキルは無いので痛手は少なかったけれど。
おすすめ記事のスライドショーやヘッダーカードも重くなる要因とのこと。
Page speed insightsで改善できる項目をチェック
Page speed insightsでは改善できる項目と短縮できる時間を教えてくれます。
私は下記３つの項目に取組むことにしました。
- レンダリングを妨げるリソースの除外
- 使用していないCSSの削減
- 使用していないJavaScriptの削減
レンダリングを妨げるリソースの除外→ Async Javascript追加
レンダリングを妨げるリソースの除外方法としてプラグインAsyncJavaScriptを追加しました。
設定についてはテーマやプラグインの影響もあるので一択ではありません。
プラグインを追加することで表示が崩れているところは無いか？を確認しつつ進めましょう。
念のためバックアップをとってから行いましょう！
①プラグインを有効化→Settingタブ Enable Async JavaScriptにチェック
②Apply Deferを選ぶ（Deferにチェック）
③Autoptimizeとの連携：チェックをつけてDefer
設定を保存（save setting)し完了。
CSS・JavaScriptの削減→ Autoptimize追加
Page speed insightsには使用していないCSSとJavaScriptを削減する方法が出ているのですが初心者にはハードルが高いです。
なのでプラグインを使いました。
①プラグインを有効化→JS、CSS＆HTMLタブより JavaScriptコード最適化、JSファイル連結にチェック
②CSSオプションは3点にチェック
③HTMLコードを最適化にチェック
④その他オプションは2点にチェックをつけました
「除外されたCSSファイルとJSファイルを最小化」は悩んだ結果 外してます。
変更を保存して完了。
以上でPage speed insightsの採点は56に上がりました。
プラグインWP Fastest Cacheを使用しているのでAutoptimizeで設定した重複する項目
- JSファイルを連結する
- CSSの圧縮
- CSSの結合
- HTMLの圧縮
についてWP Fastest Cache側のチェックを外しました。
（WP Fastest Cacheはその後プラグインLiteSpeed Cacheと競合する可能性があるため無効化を検討してくださいとメッセージがでたので無効化済）
EWWW Image Optimizerも入れているため画像タブの画像最適化･画像遅延読込みは設定していません。
100KB以上の画像を圧縮・見直し
プラグインを2つ設定することでスコアは25→56へ上がりました。
同時にメディアファイル内にある100KB以上の画像をチェックし圧縮や差し替えを行いました。
- TiniPNGのサイトで圧縮
- アイキャッチ画像の差し替え
久しぶりにメディア内を調べると100KB以上の大きい画像が転がっている...
ブログを始めた頃のアイキャッチ画像は大きい＆重たいものが多く差し替えました。
不具合①PC用のヘッダーカードがスマホで表示されてしまう
新たにプラグインを設定する過程で2つの不具合がありました。
- パソコン画面のみ表示しているヘッダーカードがスマホにも表示されてしまう
原因はプラグインWP Fastest Cacheの設定にある
モバイル：モバイルユーザーに対してキャッシュを表示しない
こちらにチェックをつけないとPC用のキャッシュがスマホで表示されます。
（チェックをつけるが正解）
Autoptimizeと重複している項目のチェックを外したときに一緒に外してしまったようです。
不具合②この記事を書いた人
- 記事下に設置していたこの記事を書いた人の表記が消えプロフィール画像とプロフィール文のみになった
見た目には崩れている感じは無いですがあったものが無くなると嫌ですよね。
しばらく非表示にしてましたが何度かテーマをアップデートしているうちに正常に表示されました。
キャッシュ系のプラグインとの相性が良くないようですが、必要なプラグインなので当面はこのままで行きます。
表示速度改善のために今後やりたいこと
今回は
- 使っていないテーマ・プラグインの削除
- 画像の圧縮
- アイキャッチ画像の見直し
- プラグインの導入
により当初の目的「LCP2.5秒以下」を達成できました。
今後は
- 画像のWebP化
- サーバーのプラン変更
にも手をつけたいと考えています。
サーバーはちょうど契約更新を迎えるので1つ上のプランにする予定。
LCP問題は再検証を依頼し「良好」となりました。
モバイルでの表示速度はSEOにも大きく影響があるので8ヶ月間も気が付かずに放置していたのは痛かったです。
今後は定期的にチェックしていきます。
【追記】
ベーシックプランへ変更後Page speed insightsのスコア、LCPが更に改善しました。
関連記事も読んでくださると嬉しいです。
