【Tech Blog】GameWith の Core Web Vitals(Cumulative Layout Shift) 改善！

本ストーリーは当社運営の「GameWith Developer Blog」の転載になります。

初めに　　　　　　　　　　　　　　　　　　　　　　

こんにちは。GameWith のエンジニアの tiwu です！

今回は GameWith の Core Web Vitals(Cumulative Layout Shift) 改善について書いていこうと思います！

Core Web Vitals　　　　　　　　　　　　　　　　　　

【参照】Web Vitals の概要: サイトの健全性を示す重要指標

Core Web Vitals とは優れたユーザーエクスペリエンスを提供するための3つの指標を指します。

• Largest Contentful Paint (LCP)ページの主要コンテンツが読み込まれるまでの時間
• First Input Delay (FID)最初の入力までの遅延時間
• Cumulative Layout Shift (CLS)表示されるページコンテンツにおける予期しないレイアウトのずれの量

Core Web Vitals の詳細についてはこちらを御覧ください。

【参照】web.dev

Core Web Vitals は 2021年5月から SEO の要因に追加されることが発表されています。

【参照】Timing for bringing page experience to Google Search

計測　　　　　　　　　　　　　　　　　　　　　　　　

GameWith では Core Web Vitals を以下のツールを利用して計測をしています

Search Console

Search Console の「ウェブに関する主な指標」から Core Web Vitals の改善が必要な URL や件数が確認できます。

Search Console のレポートのデータは Chrome UX Report から取得しており、実際にユーザーがページにアクセスをした際のデータになります。

【参照】Core Web Vitals report - Search Console Help

なんと、今年の1月時点では17万以上の記事が不良 URL として判定されています！（多い！）

WebAutoPerf

Search Console ではサイトの全体的な件数などは確認できますが、指定の URL の日毎の推移などは確認できません。

GameWith では WebAutoPerf というツールを利用し、日毎の推移を計測しています。

【参照】Automating audits with AutoWebPerf

Chrome UX Report からデータを取得し、Spreadsheet に保存後、DataStudio で可視化しています。

調査　　　　　　　　　　　　　　　　　　　　　　　　

GameWith では Cumulative Layout Shift のスコアが基準に達していないことがわかったので、Cumulative Layout Shift の改善を行っていくことにしました。

実際に改善をしていく際は Chrome DevTools を利用して、修正すべき箇所を調査していきます。

Performance タブでページを計測し、Experience 行が赤くなっているところを確認します。

スクショのように赤くなっているところをクリックすると、実際にページのどの部分で問題が起こっているか青色でハイライトしてくれます。

このスクショの例では画像が読み込まれるまで高さを確保していないので、読み込み後テキストが下にずれてしまうという状態でした。

改善　　　　　　　　　　　　　　　　　　　　　　　　

修正箇所がわかったので改善をしていきます。

今回の箇所は画像が読み込まれるまで高さを確保していなかったのが問題なので、読み込まれる前から高さを確保しておきます。

ここの画像はサイズが固定（600 * 315）なので、高さを計算して設定します。

vw は viewport's width といって、1vw = ビューポート幅の 1% となります。

【参照】CSS の値と単位 - ウェブ開発を学ぶ | MDN

このように予め高さを指定して置くことで、Cumulative Layout Shift が改善されます。

結果　　　　　　　　　　　　　　　　　　　　　　　

Cumulative Layout Shift を改善したことで視覚的なズレが無くなり、ユーザー目線で見た時に体験がとても良くなりました！

また、いろいろな箇所を改善したことによって、ほとんどのページで良好 URL になりました 。

17万以上あった不良URLはほぼなくなり、WebAutoPerf のグラフもしきい値の 0.1 を大きく下回っています！

終わりに　　　　　　　　　　　　　　　　　　　　　　

Core Web Vitals の改善を行う際に、Yahoo! さんの下記記事がとても参考になりました。ありがとうございます！

【参照】ユーザー体験を向上！Yahoo!ニュースにおけるCore Web Vitals対応事例

☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆

現在、GameWithでは「ゲームをより楽しめる世界を創る」というMissionの下、そんな世界を実現するべく仲間を募集しております。記事をご覧頂き、少しでもご興味を持って頂けましたら嬉しい限りです。

【サーバサイドエンジニア】https://www.wantedly.com/projects/488271

【YouTubeチャンネルディレクター】https://www.wantedly.com/projects/529544

【eSports推進担当】https://www.wantedly.com/projects/590876

【オープンポジション】https://www.wantedly.com/projects/452867