Core Web Vitals対応とその後の経過について

f:id:t_minois:20211122144739p:plain

こんにちは。リモートワークが増えたあたりから炭酸水をよく飲むようになったのですが、最近コストコで買った炭酸水メーカーで無限に炭酸水を飲めるようになり、ハッピーリモートワークをしている箕輪です。

今回は少し前に対応したトクバイ Web への Core Web Vitals 改善とその後の経過もあわせてお伝えできたらと思っています。

Core Web Vitals とは？

Google が定めたウェブに関するユーザーエクスペリエンスに関わる指標で、具体的には読み込み時間、インタラクティブ性、読み込み時のコンテンツの安定性などを指標に定めています。

f:id:t_minois:20211122142956p:plain

引用:https://web.dev/vitals/

なおこちらの指標は Google での検索結果のランキングにも用いられ、 2021 年 6 月中旬より段階的に導入されることが発表されました。

トクバイも検索エンジンからの流入によって一定規模の恩恵をうけているので、優先度の高い事案として取り組みました。

改善で利用したツール

主に３つのツールを使いながら改善をおこなっていきました。順に紹介していきます。

Google Search Console

Web サイトに Google Search Console が導入済みであれば、Google によって収集された統計データを確認することができます。エクスペリエンスメニューの「ウェブに関する主な指標」より辿ることができ、 LCP、FID、CLS 各指標について、問題のあるページをステータス不良として教えてくれます。

f:id:t_minois:20211122143103p:plain

Chrome DevTools

Chrome DevTools の Performance タブで実際に見ている画面の Core Web Vitals に関わる各種指標を確認することができます。下記の赤枠となっている箇所では Layout Shift が発生している状況がわかります。またカーソルを当てることで画面上のどの要素でおきているかを、水色のレイヤーで視覚的にわかるように表示してくれます。

f:id:t_minois:20211122143144p:plain

Lighthouse

以前は Chorome の拡張機能として提供されていましたが、Google Chrome 60 で Chrome DevTools に統合されました。後述しますが「パフォーマンス」「アクセシビリティ」「ベストプラクティス」「SEO」「Progressive Web App」の指標の診断を手軽に実行することができます。

Web.dev

Google 謹製の Web 上で任意のサイトのパフォーマンスを計測できるツールです。またツールの提供だけでなく、ユーザーのエクスペリエンスの向上につながるドキュメントが公開されているので、もしまだの方であれば一度は目を通すことをおすすめします。

紹介したツールはすぐに確かめられるものもあれば、データの収集後にレポートされるために時間が必要なものもあります。今回の改善においては Chrome DevTools を使いながらローカルの環境でコード修正し、うまく解決できればチーム内のレビューを経て本番にリリースしていきました。その後は Web.dev を使って改めて問題が解消されていることを確認し、数日後に Google Search Console のレポートを確認というサイクルで行いました。

改善した内容

f:id:t_minois:20211122143210p:plain

これは Chrome DevTools の Lighthouse を利用した診断した結果です。英語ではありますが問題の起きている箇所をリストアップして教えてくれます。項目をクリックするとより詳細な内容を記述したドキュメントにアクセスすることができ、具体的にどう改善するとよいかまで知ることができます。

以降、トクバイでの個別対応事例についてお伝えしていきたいとおもいます。

1. 画像の見直し

バナー画像の改善

トクバイではお気に入りのお店を登録しておくことで、プッシュでお店の更新情報を受け取れたり、日常の買い物が便利になるチラシやレシピのメモができたりと、くらしが便利になるアプリの利用をお勧めしています。

そのためスマホでウェブ画面に訪れたユーザーに向けて、アプリ紹介のバナーを表示しています。

(改善前) f:id:t_minois:20211122143237p:plain

ご覧いただいてわかるように、背景にうっすら買い物にまつわるアイコンが埋め込まれており、そのため CSS の background-image を用いて画像背景としていました。 Lighthouse での計測によると、この領域が Largest Contentful Paint(LCP)と判定されていました。加えて処理の流れとして、CSS ファイルが読み込まれた後に画像のロードが走ることになるため、画面の表示までに時間がかかっていることもわかりました。対応としてはデザイナーと相談の上、表現力は落ちることになりますがこの場合においては Core Web Vitals の改善を優先とし、画像背景ではなく背景色だけを指定する形として改善を行いました。

(改善後) f:id:t_minois:20211122143255p:plain

Google Optimize 画像の最適化

トクバイでは軽微な UI の A/B テストに Google Optimize を利用することがあります。主にマーケティング部署で利用されています。今回計測してわかったことは A/B テストで用いられているバナー画像が最適化されないまま使用されており、表示までに時間がかかっていました。開発で利用する画像はアセットパイプラインを用いて自動で圧縮も可能ですが、こちらについては盲点でした。対応としては運用フロー上に画像最適化を組み込む形としました。

画像サイズ指定による Cumulative Layout Shift(CLS)改善

Web サイトで記事を読み始めたら画像が後から表示されて、読んでいた箇所を見失ってしまい、また最初から読み始め直すみたいな経験ありませんか？データサイズの大きな画像はダウンロードされるまでに時間がかかるため、テキストが表示されたあとに画像が読み込まれることによってこのようなズレが発生します。これを回避するには画像タグに width, height を設定し、ブラウザ側に画像の描画領域を事前に伝えるようにします。トクバイはサービス公開からだいぶ時間が立っていることもあり、サイズ指定があるところも無いところもまちまちになっていたため、このタイミングで全面的に見直し CSL スコアを改善することができました。

2. Javascript の改善

Javascript 周辺についてもいくつか改善を行いました。

広告タグの棚卸し

インターネットには無数のネットワーク広告プロバイダーが存在しています。加えて広告配信、コンバージョン計測、リターゲティングなど目的・用途も多岐に渡っています。実装に関しては基本的にページに javascript タグを埋め込むだけで完結するため比較的簡単です。そういった背景があり広告タグは無数に増えていきやすいため、ページによっては javascript ファイルの読み込み数が 20 にも 30 にもなったりします。最終的には Core Web Vitals に影響を及ぼします。また運用面においては、担当者の異動等の理由により活用されないままタグだけが残ってしまっていたり、そもそも広告を運用管理する部署とタグを実装する開発部署とがわかれているため、活用状況を共有することが軽薄になりがちです。タイミング的に棚卸しの良い機会だったので、関係部署を巻き込んで改めて必要な広告タグの整理をおこない、利用していないタグをクリーニングすることができました。それに伴いスコアも改善することができました。

不要ライブラリやコードの削除

広告タグと同じように、機能として埋め込まれた Javascript コードについても不要箇所を洗い出しクリーニングを行いました。Chrome DevTools には Javascript と CSS ファイルのコード内容がどれくらいの割合で利用されているかを Coverage で見ることができます。すべての Javascript ファイルの見直すには膨大な時間がかかるため、これを参照しながらクリーニングの効果の高そうなものを仕分けていきました。

f:id:t_minois:20211122143338p:plain

非同期読み込み

ブラウザは HTML の内容を上から順に読み込んでいきます。途中に script タグがあった場合、src の内容から Javascript ファイルをダウンロードして中身の解析を続けて行います。その間 HTML の読み込みは止まってしまうため、ユーザーには待ちの時間が発生していることになります。それを回避するための仕組みとして async と defer というオプションが用意されています画面の描画、とくにファーストビューに影響のない script 処理を非同期にすることで、初期表示が早くなり結果的に First Input Delay(FID)を改善することができます。こちらについても対応をいれています。

3. その他

チラシ画像の遅延読み込みの見直し

トクバイでのメインコンテンツであるチラシは基本的に画像による配信となるため、Lazy Load を使った画像の遅延読み込みを行っています。今回計測してわかったことはファーストビューにチラシの一枚目が表示される場合、Lazy Load 読み込みでは DOMContentLoaded 後に Javascript が実行されてから画像が表示されることになるため、結果として CLS スコアを悪化させる要因になっていました。そのためファーストビューに含まれる 1 枚目のチラシ画像については lazy load ではなく通常の画像タグに変更しました。

f:id:t_minois:20211122143413p:plain

Resource Hints の導入

Resource Hints を用いることで、ブラウザに事前にリソースを先読みさせるようにしてパフォーマンスの向上を図ることができます。計測を元に比較コネクションに時間のかかっていた CDN や広告タグに preconnect を用いることで高速化を行いました。一つ一つは数十 ms ほどの効果しかないかもしれませんが、積み重なることで効果を期待できます。

最後に

ここまでご紹介してきた対応で最終的には Google Search Console の CLS の不良ステータスを０にすることができました。

f:id:t_minois:20211122143435p:plain

その後半年近くが経過していますが、Google からアナウンスされていた検索ランキングへの影響もなく無事対応できたようで安心しています。ただし現状はあくまでも最低ラインを超えただけであり、よりユーザーに気持ちよくサイトを利用していただくためには早いに越したことはありません。こちらについて引き続き改善を進めていく予定です。

ロコガイドでは一緒に取り組む仲間を積極的に募集しています。もしパフォーマンス改善が得意、大好き、興味があるという方がいましたら連絡いただけると幸いです。