PR




SEOコンサルタント白石竜次の新作本

【note】SEO・初心者でも無料で検索上位表示する技2020
【SEOマニュアル】『初心者でも無料で検索上位表示できる技』【2020版】
【価格:500円】
SEOコンサルタント白石竜次の新作本。全くのSEO初心者向けの本です!「SEOってなに?」という方にお勧めします。2010年発売の著書をベースに大幅リライトで2020年版にしました。有料で申し訳ありませんが本1冊分の分量でかつ最低限のものにコンパクトにまとめました。

SEO

【まとめ】コア ウェブ バイタルの「CLS」を簡単に改善する方法⇒「img要素にwidth、height属性を設定」「サイズを固定したコンテナ」

投稿日:2020年7月3日 更新日:

ナチュラルリンク

コア ウェブ バイタルの「CLS」を誰でも簡単に改善する方法⇒「img要素にwidth、height属性を設定」

コア ウェブ バイタルのCLSをチョー簡単に改善する方法(だれでもできる)

「CLS」にフォーカスした改善で、ウェブのパフォーマンス改善の第一人者であるグーグルのアディ・オスマニ氏がツイッターで共有してくれたTIPSだ。

※筆者補足: CLSはCumulative Layout Shiftの略で、日本語では「累積レイアウト変更」。視覚要素の安定性を示す指標だ。こちらの記事で詳細を解説した。

『img要素に、width属性とheight属性を設定する。そうすれば、モダンブラウザ(Web標準に準拠しているブラウザ)は画像をダウンロードする前に本来のサイズを認識できる。』

1:画像のimgタグにwidth属性とheight属性を追加しておくと、ブラウザはその画像のアスペクト比(横と縦の比率)がわかる。
2:レスポンシブWebデザインであっても、画像のアスペクト比と配置場所がわかっていれば、ブラウザは画像の表示予定サイズを算出できる。
3:表示予定サイズがわかっていれば、ブラウザは画像のダウンロード前にでも画像を表示すべき場所に適切な大きさの領域を事前に確保できる。
4:そうすることで、画像があとからダウンロードされたとしても、レイアウト崩れの発生を抑制できる。

【Google翻訳】

ヒント:要素の幅と高さを設定します。 これにより、最新のブラウザーは固有のサイズの事前ダウンロードを推測できるようになり、レイアウトのシフトが減少します。

【白石】
このツイートにアニメーション画像がありますが、何もしていない場合は後から画像が表示され先に表示されていたテキストが押し出される動きをします。

『width』の読み方

実は読み方がわからなかったので調べてみました!
『width』の読み方「ウィドゥス」。幅という意味。

『height』の読み方

『height』の読み方「ハイ」。(正確には「ハイ」の後に「ト」の無音があるらしいです)意味は「高さという意味です。」

SEOコンサルタントのまとめ


「CLS」の改善方法⇒「img要素にwidth、height属性を設定」
…まとめますと、昔はimg要素に「width」「height」を記述していました。
しかし、「レスポンシブ」がSEO的に良いとなり、浸透してきて「width」「height」属性をわざわざ記述しなくなってきました。
しかし、そうするとレンダリング(表示)される時に、先に軽いテキストが表示され、遅れて画像が表示されることが多いのですがその時にテキストやレイアウトが一度表示された場所を押しのけて画像が表示されます。
そのことが「コア ウェブ バイタルの」「CLS」では「(ユーザーの利便性として)よろしくない」と評価され、検索順位にも影響がある、と言われているのです。
あらかじめ「width」「height」属性を記述しておけば、画像の表示が遅れても、最初から画像の表示領域が確保されているのでテキストやレイアウトを押しのける事がなくなります。
ですから「img要素にwidth、height属性を設定するとよい」
という訳です。

「img要素に、width属性とheight属性を設定する」だけで「CLS」を改善できる!
これなら私でも作業できます。簡単です。全部の画像にやるのは大変ですが、これからがんばりましょう!

かなーり簡単にCLSを抑制する方法

■グーグルのエンジニアであるアディ・オスマニ氏

レイアウト移動を最小限にするためには、後から読み込まれる可能性がある視覚要素のための十分なスペースを確保しておくといい。バナーや画像などに対する固定した区画が役に立つ。

画像によるCLSを防止するには、height属性とwidth属性を追加すると役に立つことは以前にこのコラムで紹介した。その画像の表示に必要なスペースをブラウザがあらかじめ計算して確保できるからだ。

同様に、(JavaScriptで読み込む)広告やバナーにも対しても事前にスペースを確保しておくことでCLSを抑制できる場合がある。

具体的には、CSSで、サイズを固定したコンテナ(要素を格納するためのボックス)を設定し、高さを明示しておくのだ。たとえば次のようにする:

<style>
.container {
display: block;
width: 720px;
height: 90px;
background: #ccc;
overflow: hidden;
}
</style>

そのコンテナの中に広告などを表示させるのだ。

<div class="container">
<!-- ここに画像や広告を入れる -->
</div>

画像のheight属性やwidth属性と同様に、この施策も難易度は低いはずだ。

[広告]おすすめ記事

記事執筆/サイト管理者

記事執筆/サイト運営者


名前:白石竜次 Shiraishi Ryuji
肩書:SEOコンサルタント
高校卒業後、調理師を経て数々の職業を経験し、その後IT企業でHTMLおよびSEO対策を学ぶ。
その経験を知識を生かしながら各企業でSEO担当者となりインハウスSEOを行う。
現在ではフリーで様々な企業のSEOコンサルティングを行っている。
2011年11月 「SEO対策<検索上位にヒットする>コレだけ!技(技術評論社)」を出版。
2014年1月「世界一わかりやすいSEO対策 最初に読む本(技術評論社)」を出版。
2014年1月「たった30分でできるSEO検索エンジン最適化(秀和システム)」を出版。
2017年 書籍「DeNAと万引きメディアの大罪(宝島社)」に寄稿。


ストアカ

白石 竜次

元お笑い芸人の初心者・中小企業向けSEOセミナー

Youtubeチャンネル

SEOコンサルタント問い合わせ

・SEOコンサルのご依頼
・SEOや誹謗中傷対策のご相談
・講演会・セミナーのご依頼

SEOコンサルタント問い合わせ

-SEO

Copyright© SEOコンサルタント.com , 2024 All Rights Reserved Powered by AFFINGER5.

//記事ページのみに構造化データを出力 //サムネイルを取得 //ここから構造化データの記述