こんにちは。ジャスミン茶が好き過ぎて箱買いして毎日飲んでいるフロントエンドエンジニアのfurudomimです。ちなみにジャスミン茶界の中では伊藤園のRelaxジャスミンティーが優勝だとおもってます。
今回は、@cosmeのスマホ版WebページのCLSを改善させたお話について紹介します。
いきなりですがサイトのコーディングをするにあたって、画像のサイズは必ず指定したほうが良いということをご存じでしょうか？
なぜなら
となるからです…！
CLS（Cumulative Layout Shift）とは
そもそもCLSって何よ？という方に説明させていただくと、
CLS（Cumulative Layout Shift）とはGoogleが掲げているUXの指標［Core Web Vitals］のうちの１つで、
ユーザーが予期せぬレイアウトのズレがどれぐらい発生したかの視覚的安定性を測定した数値になります。
- GOOD(良い)：0.1未満
- Needs Improvement(改善が必要)：0.1~0.25未満
- POOR(悪い):0.25以上
と3段階の閾値があり、数値が小さい、つまりズレの量が少ないほど良いとされます。
モバイルのCore Web Vitalsのスコアは今年の2021年6月からGoogleの検索ランキング要因に組み込まれるようになったので、Core Web Vitalsのうちの1つであるCLSを改善することはSEO対策にも繋がります。
Core Web Vitalsの詳細についてはこちら
https://developers-jp.googleblog.com/2020/05/web-vitals.html
レイアウトシフトとは
ユーザーの予期せぬレイアウトのズレのことを「レイアウトシフト」とも呼ぶのですが、これがどういったユーザー体験を引き起こすかを具体的に例えると、
- 読んでいるコンテンツが突然位置を移動した
- リンクをタップしようとしたら、予期せず現れた広告を誤ってタップしてしまった
などが挙げられます。
いきなり変なバナーが現れて間違えてタップしてしまい、怪しいサイトに遷移して変な冷や汗をかいた苦い経験はきっと誰しもが持っているはずです。あれです。
このレイアウトシフトの原因には画像が関係します。
画像のサイズが指定されていない場合、画像が読み込まれるまで領域が確保されないため、画像が読み込まれて表示されるとその分、後に続く要素の位置がズレます。
一方、画像のサイズが指定されている場合は、その画像の領域があらかじめ確保されるため後続の要素がズレることがありません。
なので、
画像のサイズを指定する
↓
レイアウトのズレが発生しなくなる
↓
- ユーザーにストレスを与えることがなくなる ⇒ ユーザー体験の向上
- CLSの数値がよくなる ⇒ SEO対策につながる
となります。
CLS改善の進め方
ここでistyleではどうやってCLS改善を進めていったかを述べていきます。
（１）対象画像を洗い出す
まず、主要なページをPageSpeedInsightsにて診断します。
PageSpeedInsightsは、ウェブページのパフォーマンスに関するレポートと、ページの改善方法を提案してくれるGoogleが提供しているツールです。
このツールを使用して、「画像要素でwidthとheightが明示的に指定されていない」と改善項目としてあげられる画像を見つけます。
（2）サイズの指定を実装
画像サイズが固定の場合
画像サイズが絶対的な固定サイズの場合は下記2つの方法のいずれかで対応します。istyleでは基本的には1の方法で実装します。
1. HTMLのimg要素のwidthとheight属性で指定する
2. CSSでサイズを指定する
例
▼修正前
<div class="hoge">
<img src="images/hoge.png" class="hoge-image" alt="">
</div>
▼修正後 1の場合
<div class="hoge">
<img src="images/hoge.png" width="280" height="400" class="hoge-image" alt="">
</div>
▼修正後 2の場合
.hoge .hoge-image {
width: 280px;
height: 400px;
}
画像が可変サイズの場合
横幅100％で設定されたメインビジュアルなどの画像が可変サイズの場合は、CSSで横幅×元画像の縦の比率で高さを算出して指定します。計算式は以下になります。
height: calc(100vw * (画像縦幅 / 画像横幅));
例 元の画像サイズが横640 × 縦800の場合
▼修正前
.fuga .fuga-image {
width: 100%;
height: auto;
}
▼修正後
.fuga .fuga-image {
width: 100%;
height: calc(100vw * (800 / 640));
}
これにより実装後、PageSpeedInsightsで画像が改善項目としてあがることはなくなりました。
（３）社内での標準化
istyleの制作部にはUIコーディングガイドラインというものが存在します。このガイドラインにはclassの命名規則などさまざまなコーディングにおけるルールが制定されていて、このガイドラインに沿って実装することで「保守性」と「品質」を確保しています。
今回はこのUIコーディングガイドラインに「画像の高さと幅は明示的に指定する」という項目を追加しました。これにより、今回対応した一部のPJT内だけの対応にとどまらず、フロントエンド全体での実装で画像サイズ指定することの標準化を実現しました。
対応結果
2021年3月頃からコツコツとサイズ指定を行っていった結果、
CrUX（Chrome User Experience Report）という実際のChromeユーザーのレポートを見ると、長期的にみてCLSが良くなっていることがわかります。
また、オーガニックセッションも前年同月比120％を超える月が増えました。CLS改善がそれに一体どの程度影響したのかはわかりませんが、少しでも、微々たる数値でも貢献していたら嬉しいです。
まとめ
画像のサイズを指定する
↓
レイアウトのズレが発生しなくなる
↓
- ユーザーにストレスを与えることがなくなる ⇒ ユーザー体験の向上
- CLSの数値がよくなる ⇒ SEO対策につながる
となります。HAPPYですね。
なので、我々はこれからも画像のサイズ指定は意識して対応していきます…!!
Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons 4.0 Attribution License.
