20代からの家作り

20代で家を建てた夫婦の家作りに関するブログです。日々の出来事やインテリアの紹介などをしています!

20代の家作り

【CLSスコアの低下問題を克服】プレースホルダーを使ったレイアウトの最適化

 

 

*今回の記事は家作りとは全く関係ありません

 

興味が無いかたはそっと画面を閉じてください🙇‍♂️

 

 

 

本日の目次

 

 

突然CLSのスコアが悪化

 

僕は2017年からのんびりとブログを書いていたんですが、半年前ぐらいから少しずつブログの勉強をし始めました😆

つまり超ド級のPC初心者になります...!

 

 

そんな僕が最近ぶつかった問題というのが、「CLSのスコアがダダ下がり」ということ。

その時のCLSのスコアは0.235ぐらいだったと思います。

サーチコンソールでは不良URLが大量検出され、訳もわからずあたふたしていました😱

そして超ド級のPC初心者である僕は、原因を突き止めるまでに何日も要しました😂

 

CLSスコア悪化の原因はタイトル下のスライダーだった

 

 

そして分かったのが、タイトル下のスライダーのせいでページ全体にレイアウトシフトを生じていたということ。

どうやら、スライダーは起動に時間がかかるため、ページの完成後にスライダーが起動して、スライダーがタイトル下に強引に割り込むことでページ全体にレイアウトシフトを生じていたようですね💧

 

例えるなら、スーパーのレジ前の列に見ず知らずの集団が割り込んできて、後列の人達が後ろにズレなきゃいけない.....みたいな感じなんですかね😂

 

 

 

スライダーのレイアウトシフト対策にプレースホルダー

 

色々調べていて、スライダーのレイアウトシフトに対する有効な手段として出てきたのが、プレースホルダーを準備するということ。

プレースホルダーが何かは僕も正しく説明出来る自信が無いんですが、プレースホルダーを簡単に言えば「予約席」みたいなものでしょうか😂

 

予めプレースホルダーでスライダーの予約席を準備しといて、スライダーが起動したらプレースホルダーの場所にスライダーを設置するということ。

 

 

ただ、ここでまた問題が....

 

 

プレースホルダーってどうやって準備するの!?

 

 

調べると色々情報は出てくるんですが、超ド級の初心者である僕には何を言っているのかサッパリ😭

原因は分かったのに解決策がわからず、ここからまた何日も時間を費やしました💧

 

 

答えはチャットGPTが教えてくれた

 

 

今日ふと思ったんです。

チャットGPTが教えてくれないかな....と(笑)

そして試しに聞いてみたら、直ぐに解決出来ました🙌

 

プレースホルダーを準備し、プレースホルダーの場所にスライダーを起動させ、スライダーの起動後はプレースホルダーが消えるという、理想的な動きでした👍

 

「CLSスコアを改善するためにはスライダーを止めるのが一番良い」という意見を多く見て、何度も心が折れかけましたが、チャットGPTが直ぐに問題を解決してくれましたね(笑)

 

僕は超ド級の初心者なので、このHTMLが良いのか判断出来ず、無責任なことは出来ないので今回は公開を控えますが、おそらく同じように悩んでいる方もチャットGPTに聞けば解決してくれると思いますよ🙌

 

 

そして気になるCLSのスコアは0.235→0.006に一気に改善しました✨

 

 

 

いやーーーーこれでだいぶ気持ちがスッキリしました😆

 

 

 

 

さいごに

 

人工知能恐るべし....!