＊今回の記事は家作りとは全く関係ありません
興味が無いかたはそっと画面を閉じてください🙇♂️
本日の目次
突然CLSのスコアが悪化
僕は2017年からのんびりとブログを書いていたんですが、半年前ぐらいから少しずつブログの勉強をし始めました😆
つまり超ド級のPC初心者になります...！
そんな僕が最近ぶつかった問題というのが、「CLSのスコアがダダ下がり」ということ。
その時のCLSのスコアは0.235ぐらいだったと思います。
サーチコンソールでは不良URLが大量検出され、訳もわからずあたふたしていました😱
そして超ド級のPC初心者である僕は、原因を突き止めるまでに何日も要しました😂
CLSスコア悪化の原因はタイトル下のスライダーだった
そして分かったのが、タイトル下のスライダーのせいでページ全体にレイアウトシフトを生じていたということ。
どうやら、スライダーは起動に時間がかかるため、ページの完成後にスライダーが起動して、スライダーがタイトル下に強引に割り込むことでページ全体にレイアウトシフトを生じていたようですね💧
例えるなら、スーパーのレジ前の列に見ず知らずの集団が割り込んできて、後列の人達が後ろにズレなきゃいけない.....みたいな感じなんですかね😂
スライダーのレイアウトシフト対策にプレースホルダー
色々調べていて、スライダーのレイアウトシフトに対する有効な手段として出てきたのが、プレースホルダーを準備するということ。
プレースホルダーが何かは僕も正しく説明出来る自信が無いんですが、プレースホルダーを簡単に言えば「予約席」みたいなものでしょうか😂
予めプレースホルダーでスライダーの予約席を準備しといて、スライダーが起動したらプレースホルダーの場所にスライダーを設置するということ。
ただ、ここでまた問題が....
プレースホルダーってどうやって準備するの！？
調べると色々情報は出てくるんですが、超ド級の初心者である僕には何を言っているのかサッパリ😭
原因は分かったのに解決策がわからず、ここからまた何日も時間を費やしました💧
答えはチャットGPTが教えてくれた
今日ふと思ったんです。
チャットGPTが教えてくれないかな....と（笑）
そして試しに聞いてみたら、直ぐに解決出来ました🙌
プレースホルダーを準備し、プレースホルダーの場所にスライダーを起動させ、スライダーの起動後はプレースホルダーが消えるという、理想的な動きでした👍
「CLSスコアを改善するためにはスライダーを止めるのが一番良い」という意見を多く見て、何度も心が折れかけましたが、チャットGPTが直ぐに問題を解決してくれましたね（笑）
僕は超ド級の初心者なので、このHTMLが良いのか判断出来ず、無責任なことは出来ないので今回は公開を控えますが、おそらく同じように悩んでいる方もチャットGPTに聞けば解決してくれると思いますよ🙌
そして気になるCLSのスコアは0.235→0.006に一気に改善しました✨
いやーーーーこれでだいぶ気持ちがスッキリしました😆
さいごに
人工知能恐るべし....！
