こんにちは、日々WEBのお仕事で悪戦苦闘しているスタッフTNです。
新しい事が目まぐるしいスピードで進んでいくこの業界、日々精進を心がけておりますが、新しい技術に翻弄され「そんなの出来なくても困らないし、他の方法があるし…」と現実から目を背け、できるようになった時はこれ見よがしにアピール！
何だかんだ、好きな世界でのお仕事は楽しいものです♪

今回は最近実装したフロントまわりのお仕事について、現場視点での意見と苦労を述べさせていただければと思います。

CLS対策は大変というお話

新しい物には新しい取り組みが必要で、いろんな物のあり方が変わってきます。
スマートフォンもその一つで、登場と共に多くの仕組みやあり方を変えてきました。
スマホの利点の一つはインターネットに携帯端末から簡単にアクセスできるという点ですが、
これによりインターネット・WEBサイトの世界もスマホに最適化することを余儀なくされ、様々な新しいルールが加えられました。

さて、フロントまわりのエンジニアさんにとってあたり前となりました「Core Web Vitals」　
これもスマホでのWEBサイト最適化を目的にSEOの指標として加わりました。
今回はCore Web Vitalsの一つの指標、CLSの対策が 面倒くさい 大変だというお話です。

CLSって何？

CLSはCumulative Layout Shiftの略で、ページを読み込みながら起こり得るレイアウトのズレをスコアリングしています。
皆さんも一度は経験したことあるのでは無いでしょうか？メニューボタンをタップしようとしたら、
ページ読み込みで位置がズレて違う所をタップしてしまうという現象。
これを回避するのが目的の指標です。
スコアが良いほど　位置がズレない＝誤タップ回避
つまりユーザーにとって親切で良質WEBページということになります。

そもそも何故レイアウト崩れが起こるのか？

WEBページは先頭から読み込み最後まで読み切ってから表示され、重い処理があるとページの表示までに時間が掛かってしまいます。
これを回避するために非同期処理と言って、重い処理はページの読み込みとは別で処理しましょうという手法が用いられます。
しかしページ読み込み完了後に読み込み処理が行われている他の要素がページに表示される事になるので、
これが原因で各要素の表示位置がズレてしまいます。

CLS対策として非同期処理で読み込む要素の高さを事前に明確にしておく

ではどのように位置ズレ対策をするかというと、要素が読み込まれる位置に高さを設定をしておけばOKです。

じゃあ簡単じゃん！

と思ってしまいますよね。ところがこれがかなり厄介なんです。

動的要素と相性の悪いCLS

表示が遅い要素はプログラムで何かしらの処理が必要な情報であったり、画像や動画など、そもそも容量が大きいものなどになるのですが、
動的ページではこれらの要素がプログラム的に出力されるわけで、定まった高さを指定するのが厄介な場面が多々あります。
文字要素であれば、あらかじめ高さを決め、その範囲内にコンテンツが出力されるようにプログラミングする必要がありますし、
画像・動画であれば出力前に要素の高さをページ側に伝える必要があり、
情報をサーバーサイドでデータとして持っておく事が必要になります。

今回は動画表示に実装してみました

今回はサーチコンソールで警告が出ていた動画にCLS対策を施してみました。
まずはサーバーサイドで動画のサイズをデータ保持する仕様に変更。
そして出力側ですが、今回はJavascriptで要素の高さを操作する事にしました。

横幅は320pxで固定しているので、サーバー側のデータを基に立幅を計測します。

※大本の動画サイズは　width:360px　height:640px

width = 360;
magnification = 320 / width;
height = 640 * magnification

次に要素の高さを操作

const movie = document.getElementById(“movie”);
movie.style.height = height + ‘px’;

これでレイアウト時の位置ズレが防げるようになりました！

今回は横幅固定ですが、100％表示であればアスペクト非を算出して～なんて手法もお洒落でカッコいいですね！

文：スタッフTN