レスポンシブでCLS低速警告が出てWordPressを応急処置した

WordPressで同じテーマを長らく使っていたため、GoogleのPage Speed Insightで、CLS警告が出ていました。しっかりメンテはしないとですね。

さすがに自作プラグインなども含めカスタマイズが多すぎてすぐに根本解決できないため、応急処置をしました。WordPress、私のような運用だとだんだん負担が増えてきてるなぁ・・・。

本記事の執筆は、WordPress歴12年目のカグア!(@kagua_biz)によるものです。なお、情報は2020年10月1日時点でのものです。ご注意ください。

PageSpeed InsightsのCLS警告とは

自分のサイトの表示速度を計測し、いろいろなアドバイスをしてくれるPageSpeed Insights。Google提供で、安心して無料ですぐに診断してくれます。
PageSpeedInsights

今回のCLS警告ですが、スマホで見たとき、あなたのサイトは、表示時にこんなにレイアウトが変わるよ、きれいなレイアウトになるまで、ほらこんなに時間かかってるよ、ユーザーフレンドリーじゃないよ、と怒られるのが、Search ConsoleのCLS警告の意味です。

自分のサイトだけでなく、公開されたURLであれば、どんなサイトも診断してくれます。ベンチマークしている競合サイトや、自社メディアがたくさんあって優先度をつけてリニューアルしたいときなど、いろいろ調べられて便利です。

実際、私のブログのWordPressテーマは、スマホサイトでレスポンシブにしよーぜ、という本当に初期の頃に実装したもので、まったくメンテをしてきませんでした。ですので、まあ怒られても当然です。

ただ、それ以上にカスタマイズしまくって、大幅変更はちょっと忍ばれるという状況。

>>PageSpeed Insights
Googleのサイトで詳しく見る

ですので、応急処置だけすることにしました。ただ、それでも少し改善しましたので、共有します。

CLS警告を応急処置してみる

問題があったころのCLS警告

こちらが2020年8月のCLS警告が出ていた頃の、PageSpeed Insights診断結果です。
CLS レイアウト変更が遅い8月

レイアウトシフトがこんなにも遅いよ、と指摘を受けています。

たしかに画像を見ると、トップメニューが表示されて、それがスマホ用にたたまれるまで時間がかかっています。ちょっと不親切ですよね。

改善方法:トップメニューを整理した

とりあえず、トップメニューがたたまれるまでが遅いので、思い切ってトップメニューを全部カットしました。

ただそれだけです。WordPressの管理画面からすぐに行なえます。

Googleアナリティクスで見てもこれらのページへの遷移は少なかったので、大胆にやりました。HOME、運営者、問い合わせの3つだけに。

>>Amazonで50%OFF以上のタイムセール
セール特設ページを見る

>>楽天トラベル国内ツアーのバーゲン情報はこちら
楽天で詳しく見る

CLS警告が低くなった

その結果、4枚目の画像の時点で、すでにヘッダーのレイアウトは完成するほどに。スマホ向けのレスポンシブ対応がさけばれ始めた頃のWordPressテーマですので、今どきにはもう十分レガシーで、ほんとうに今までありがとうございました。引退をそろそろ考えてあげないとですね。
画像が遅い2020年9月23日

応急処置前は、6枚目の表示でヘッダー部分のレイアウト完成ですから、数分の手間で33%改善したことに。コードをいじらずこれだけ改善すれば、応急処置としてはとりあえず満足です。

もう最近は、noteみたいにシンプルで、記事だけあればOK、という風潮が強いでしょうから、もっと整理してもいいかな、くらいには思います。

画像がまだ重いようなのでプラグイン

応急処置をした程度ですので、PageSpeed Insightsの診断結果を見ると、まだトップ画像の表示が重そうです。8枚目でようやく画像が表示という遅さ。
画像が遅いよね2020年9月23日

PageSpeed Insightsでは、今どきのwebpなど最新画像フォーマットを使って、もっと軽くしようねと指摘されます。ただ、さすがに全部それにリプレースするには負担が大きすぎるので、プラグインを入れることにしました。

スマッシュというプラグインで、画像コンパクト系の記事かなにかで見つけ、WordPressに実装してみました。
スマッシュプラグイン

とりあえずアップロード時に画像をすこし軽くしてくれるっぽいです。なのでワンテンポアップロードが遅くなります。まあ仕方ないですね。

ちなみに、サーバーは専用ホスティングでそれなりにコストかけているのですけどね、アクセスもそうそうあるわけでないのに、最近ちょっと重たいので困っています・・・。

もともとある程度下処理をした画像をアップはしていましたので、わたしには効果は限定的でしたが、もう少し使ってみようと思います。とても高機能なのでまだまだ使い切れていませんので。

WordPress公式ディレクトリに掲載されているプラグインですので、安心です。

>>Smush Lazy Load Images, Optimize & Compress Images WordPress プラグイン | WordPress.org 日本語
サイトで詳しく見る

ただ人気が高いプラグインですと、アップデートや脆弱性など、それはそれで手間もかかるので、慎重に吟味して継続を判断しようかと思います。

気になっている無料WordPressテーマ

最近すこし気になっている、WordPress公式ディレクトリ掲載の無料テーマがあります。

国産WordPressテーマ

>>LIQUID – WordPress テーマ | WordPress.org 日本語
サイトで詳しく見る

有料のものも考えたのですが、いろいろといじれるほうが私には合っているかなと思い、かつWordPress公式ディレクトリ掲載という安心感もあり、偶然見つけました。しかも国産なのですね。上位版は有料のものもあるので、必要があれば上位版に乗り換えられるのも嬉しいです。

PageSpeed Insightsでデモサイトを見る限り、とても優秀です。
リキッドテーマ

実験的に運用しているWordPressサイトに使ってみたところ、CLSは0%でとても優秀です。
実験的にリキッドテーマつかってる

実際、Search Consoleで見ても、トラフィックも、気持ち増えている気がします(8月後半からの増加)。現在のブログのレガシーなところの移行に目処がついたら、もう乗り換えてもいいかなと思っています。
気持ち増えている

リキッドテーマについてなにか情報をお持ちのかたがいましたら、ぜひ情報交換させて下さい。

お疲れ様でした。

もし、この記事が少しでもあなたのお役に立てたということでしたら、ぜひ投げ銭をいただけますと、更新のモチベーションが続きますので、どうぞよろしくお願い致します。

このブログに100円投げ銭する

(予約・早期購入特典付き)いちばんやさしいスマートフォンSEOの教本 人気講師が教える検索に強いスマホサイトの作り方 (「いちばんやさしい教本」シリーズ) | 江沢真紀, コガン・ポリーナ, 井上達也 |本 | 通販 | Amazon

いちばんやさしいスマートフォンSEOの教本 人気講師が教える検索に強いスマホサイトの作り方 (「いちばんやさしい教本」シリーズ)
Amazonで詳しく見る

楽天で詳しく見る

Yahoo!ショッピングで詳しく見る

関連情報リンク

やはり基本は、CSSなどレイアウト固定の改善なのですよね。

>>解決してみた!!CLS(Cumulative Layout Shift)と累積レイアウト変更
サイトで詳しく見る

ただ、もうAMPに寄せてしまっているので、このあたりはあまりコストをかけたくないなーというのが本音です。

>>AMPの公式WordPressプラグインが2.0にバージョンアップ、多数の機能改善あり | 海外SEO情報ブログ
サイトで詳しく見る

さらに、Chromeのデベロッパーツールでもいろいろと見られるのですね。

ただ、AMPもアップデートや、突然のトラブルなどもあって、安心できないので、サーバー重たいのも含め、はてなとかに移行したくなってきています。

>>WordPressからはてなブログに移行する時のポイント【インポート編】 – サーバーワークスエンジニアブログ
サイトで詳しく見る

WordPressの管理費用やリスクが年々増えている気がしていますので、来年度に向けて、徐々に対応を考えていこうと思います。

まとめ

  • PageSpeed Insights のCLS警告はレイアウト確定まで遅いよ、というもの
  • WordPressの場合テーマやデザイン変更などで対応するのが基本
  • ただ手間なので、思い切ってメニューを少なくしたら改善した

とりあえずの応急処置がクリティカルにささって良かったです。ただ、長期でみるとリスク増大は変わらないので、本気でそろそろリプレースを考えようと思います。

やっぱりはてながいいのかな・・・。

・・・と、こんな感じの父親目線で、SNS、ドライブ、ゲーム、生活防衛ネタが多めでブログ記事を2009年から書いています。よろしければLINE@をフォローしていただけると更新情報を受け取れますのでおすすめです。記事を気に入ったというかたはぜひ。

LINE@で無料の更新情報を受け取る

・ ・ ・ ・ ・

>>安っ!アマゾンで半額以下になっている食品タイムセール
セール特設ページを見る

↓↓↓無料のニュースレターを配信中です

CLS改善