前から[google search console」で「CLS に関する問題: 0.1 超（パソコン）」の指摘はあったのですが放置していました・・・原因はいろんな記事を参考にみて、AdSenseの広告が出て記事が下にずれることと言うのはわかっていたのですが・・・簡単な修正の仕方を探して、よくわからなくて・・・究極な方はAdSenseのトップの広告をやめたというのもありましたが、せっかく苦労してつけることができるようになった広告なので、広告は消したくないなーと。
CLS とは？
CLS は、ページのライフサイクル全体で発生した予期しないレイアウト シフトのレイアウト移動スコアの最大バーストを測定する指標です。
こんな感じで最初に開いた時よりも下にズレるよ！と言うモノですね私のはパソコンもモバイルも0.1超で下にずれますよ～というもの。原因はAdSenseの広告が出てくるのにその分のスペースを最初から開けていなかったり、広告のサイズを指定していないことみたいなんです。
サチコさんが指摘しています(>o<)
PageSpeed Insightsでも不合格になっています(>o<)
CSSを追加してみた
CLS に関する問題: 0.1 超（パソコン）の指摘を受けている方は多いみたいでいろいろな解決方法が出ているのですが、自動広告の上からサイドメニュー最上部にGoogleアドセンスを手動で配置するというのもあったのですが今回はCSSをテーマに追加したというのが載っていたので私はcocoonのカスタマイズでCSSの追加をしました。追加したのはアイキャッチのサイズ指定と広告のサイズ指定のCSSです
.eye-catch img{
height:360px;
}
@media screen and (max-width: 768px) {
.eye-catch img{
height:auto;
}
}cocoonのカスタマイズで追加CSS
テーマはいじりたくないのでカスタマイズで追加CSSに入れると簡単に追加したり外したり出来るので気軽に出来ます♪
cocoonの外観‣カスタマイズを選択して
追加CSSを選択
けっこうここでCSSを追加しているので一番下に先ほどのコードを貼り付けます
.eye-catch img{
height:360px;
}
@media screen and (max-width: 768px) {
.eye-catch img{
height:auto;
}
}34～41行がこのコードです
保存して確認すると記事が下に動いていないようなので[google search console」に検証を開始して、この検証には２８日ぐらいかかるみたいなのでこのまま様子をみます。
WP Rocketプラグインを入れました
tetsu7017さんの記事でとても興味深いプラグインがありましたくわしくは↓
「ページ読み込みが遅い」を直したいならコアウェブバイタルを見直せ！今すぐできる対策術
でWP Rocketを導入しました。全部英語なんですよね～(>o<)日本語に変換したりしながら設定をしていたのですが、”Load JavaScript deferred”（日本語に翻訳すると「JavaScript の読み込み遅延により、サイト上のレンダリングをブロックする JS が排除され、読み込み時間が短縮されます」なので、早くなるカモと思い・・・）にチェックを入れたら「ページスピードインサイト」でスピードが全部90％台になったのですが、モバイルで冒頭に謎の空白がでてしまって・・・それで検証していたこの記事の追加CSSを消したんです。このCSSを追加する前はモバイルがグーグルサーチコンソールで「不良」が沢山あって、このCSSを追加してからは「改善が必要になっていたのに」モバイルの謎の空白を消そうとしてこのCSSを一度消したんです、そうしたら、謎の空白は消えずにLoad JavaScript deferredのチェックを外してやっと元にもだったのですがCSSはけしたままにしていて、そうしたら、またモバイルで「不良」がでたんです。なので、グーグルサーチコンソールで良好までは持って行けなかったのですが、「不良」⇒「改善が必要」までよくなったと言う検証が出来ました。
事故です(￣｡￣;)
本当はこの記事はグーグルサーチコンソールでエクスペリエンスが良好になるまで投稿しないであたためて置くつもりだったのですが・・・今日の朝「不良」になっているのを見てそうだ、CSSを外したままだと思い出しあわてて追加したら、保存でなく、投稿してしまって・・・(￣｡￣;)でワードプレス間違えて投稿した記事を非公開にもどしたのですが、「ブログ村」と「人気ブログランキング」に一度上がってしまったので最新記事になってしまいそのリンクに飛ぶと「404」になってしまう症状になってしまったので、投稿することにしました(;ﾟロﾟ)
WP Rocketプラグイン
WP Rocketは説明がすべて英語で有料のプラグインです。でも今後ゆっくり設定をしていこうかなと思っています。詳しくはまた、設定が出来たらご報告します！
リンちゃんムーちゃん
遅くなっちゃったので寝てました
ムーちゃんは今日はソファーで寝ていました
りんちゃんはキャットタワーで寝てました。近づいたら起きちゃったので寝起きでブチャイクりんです。
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━[PR]━┓
ブログ運営を強力にサポート
はじめてのブログに最適なWordPressテーマ『XWRITE(エックスライト)』
─────────────────────────────────
・はじめての方でも簡単に使えるシンプルな操作画面
・充実のサポートでブログ運営をバックアップ
・ブログ運営に役立つ機能を多数搭載
・100％GPLなので利用に関する制限も無く、複数のサイトで利用可能
・軽量設計で高速表示。読み込みのストレスなし
─────────────────────────────────
https://px.a8.net/svt/ejp?a8mat=4536W2+Z4LGY+CO4+3B5WQB
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
【広告】
コメント