ページエクスペリエンスCLSに関する問題を解決してサイト高速化



「CLS」とはCumulative Layout Shiftの略。
たとえば、サイトのリンクをクリックしようとすると、後から広告が表示され違うボタンをクリックしてしまうことがあります。そのような「急にページのレイアウトが変わってしまう」ことを「CLS」と言います。

個人的にはちょっと前のYahoo!サイトがとてもひどかった覚えがあります。あれじゃ広告なしのブラウザを使いたくなりますよね。

これで「CLSに関する問題0.25超」を解決

MySQLデータベースを整理することにより、CLSは0.25超→0.1超に改善されました。

と同時に、不要なプラグインは削除しました。

WordPressで現在使っている&削除したプラグイン一覧

結果、体感的に引っ掛かりがなくなりました。

  • Gtmetrix:Total Blocking Timeは「184ms→45ms」

これで「CLSに関する問題0.1超」を解決

改善方法がさっぱり分からなかったのですが、何となくこのようにしてみました。

  • メニューを簡素化
  • タグクラウドはやめてタグリンクをHTMLタグで記載

結果、「過大なDOMサイズの回避」の問題が解消され、CLSも改善されました。

ついでにWPテーマを整理

テーマはCocoonを使用。

使っていない子テーマファイルは削除しています。

また、使っていないスキンも削除。
アップデートの更新で復活しますが気が付いた時に削除。ダッシュボードが軽くなります。

体感的には全く分かりませんが、読み込む箇所を減らすことにより速度改善につながるかと。

良好なサイトになりました

合格!

サイトの速度も改善された

GTmetrixは「B→A」になりました。

PageSpeed Insights は「PC 92」「モバイル 51」となり、ウェブに関する主な指標の評価は合格。
以下の事項も改善されました。

  • CSS の最小化
  • JavaScript の最小化
  • 最新ブラウザに従来の JavaScript を配信しないようにしてください
  • 過大なネットワーク ペイロードの回避
  • 最初のサーバー応答時間を早くしてください→最初のサーバー応答時間は問題ない速さです

ちなみに以前の成績は?

昔、GTmetrixの判定は「E」でした。

モバイルの速度は「30」くらいで「不合格」でした。

良かれと思ってやったことを削除していったら自然と改善された感じですかね。

今後はあまり色々と弄らず、ただただ書いていこうと思います。