share facebook facebook facebook twitter twitter menu hatena pocket slack

2021.08.02 MON

コアウェブバイタルを意識したフロントエンド改善レポート vol.1

こんにちは。アイレットデザイン事業部のマークアップエンジニアの工藤と申します。アイレットデザイン事業部では「INSIDE UI/UX」と題して、所属デザイナーとエンジニアがデザイン・SEO・アクセシビリティ・UI/UXなどそれぞれスペシャリティのある領域に対する知見を幅広く発信していく予定です。お付き合いのほどよろしくお願いいたします。
さて今回から「コアウェブバイタルを意識したフロントエンド改善レポート」として2021年1月に行ったコーポレートサイトのリニューアルを実装した経験をもとにキーボードを叩いていきます。
アイレットのコーポレートサイト

Core Web Vitals(コアウェブバイタル)とは?

Core Web Vitals(以下コアウェブバイタル)とはGoogleが2020年より提唱する比較的新しいパフォーマンス品質指標で、ウェブで優れたユーザー体験(UX)を実現することにフォーカスされています。
※なおGoogle検索セントラル日本語版では「コアウェブバイタル」ではなく「ウェブに関する主な指標」と訳しています。個人的にこれはちょっと直訳調で硬いと考えましたので、ここでは「コアウェブバイタル」を使用させていただきます。

コアウェブバイタルの3つの指標〜LCP・FID・CLS〜

コアウェブバイタルにはページの読み込み時間を計測するLCP・ページのインタラクティブ性を計測するFIDページコンテンツの視覚的な安定性を計測するCLSの3つの指標があります。

  • Largest Contentful Paint(LCP) は、ユーザーがページでもっとも有意義なコンテンツをどのくらい早く見ることができるかを表します。感覚的な読み込みスピードを測定し、ページ読み込みタイムラインにおいてページの主要コンテンツが読み込まれたと思われるタイミングを指します。
  • First Input Delay(FID) は、最初の入力までの遅延を表します。応答性を測定して、ユーザーが最初にページを操作しようとする場合に感じるエクスペリエンスを定量化します。
  • Cumulative Layout Shift(CLS) は、ページがどのくらい安定しているように感じられるかを表します。視覚的な安定性を測定し、表示されるページ コンテンツにおける予期しないレイアウトのずれの量を定量化します。
    コアウェブバイタルの3つの指標〜LCP・FID・CLS〜を説明した図
    引用元: Web Vitals の概要: サイトの健全性を示す重要指標 – Google Developers

コアウェブバイタルの画期的な点は上記画像に示される通りそれぞれの指標の数値目標が明示されていて、なおかつGoogle ChromeデベロッパーツールのLighthouse (v6以降のバージョン) でいつでも誰でも(エンジニアでなくても)計測可能という点です。

それぞれの指標の数値目標は次の通りです。

指標 良好 要改善 悪い
LCP 2.5秒以内 4秒以内 4秒超
FID 100ミリ秒以内 300ミリ秒以内 300ミリ秒超
CLS 0.1以内 0.25以内 0.25超

これは今までになくわかりやすいですね!
なおLighthouse v6は2020年7月リリースのChrome 84以降に実装されています。

高速なwebページのメリット

少し寄り道してコアウェブバイタルをウェブ開発者ではなくウェブサイト運用担当者の目線で考えてみましょう。
運用担当者はGoogle Analyticsなどを用いて分析を行いサイトを改善するものですが、他のさまざまな指標と比較してもパフォーマンスの高速化は定量的かつ比較しやすいため、わかりやすい指標と言えます。
出典:『Lean Analytics − スタートアップのためのデータ解析と活用法』p.7

また、ページの高速化はビジネスに必要なすべての重要指標(サイト滞在時間・コンバージョン率・購入額)で良い結果を示すことが証明されています。
出典:『Lean Analytics − スタートアップのためのデータ解析と活用法』p.257
書籍『Lean Analytics − スタートアップのためのデータ解析と活用法』
さらにGoogleは2021年6月中旬より、ランキングシステムの一部としてコアウェブバイタルを用いたページエクスペリエンスの使用を開始するとアナウンスしています。パフォーマンス向上は一義的にはユーザー体験を向上させるものですが、SEOにも好影響を与えるということですね。

パフォーマンス改善でビジネスに貢献した事例

コアウェブバイタルを改善してビジネスに貢献した事例をご紹介します。

日本国内
国外

…など豊富な事例が報告されています。つまり運用担当者にとってもwebページの高速化は計測のしやすさビジネスに与えるインパクトの出しやすさという2つのメリットから、検討に値する施策の1つであると言えます。

実際にコアウェブバイタルを計測してみる

Google Chrome開発ツールに表示されたLighthouseの画面
では実際にLighthouseで数値を計測してみることにしましょう!

  1. 計測したいページに移動
  2. Macでは Option+Command+Iを、
    Winでは F12を押下しデベロッパーツールを立ち上げる
  3. Lighthouseタブを選択しGenerate Reportボタンを押します。

手順はたったこれだけ。簡単です。

リニューアル前のアイレットのコーポレートサイトをLighthouseで計測してみたところ63点(トップページ)という結果でした。これはとても悪いというわけではありませんがまだ改善できる点がありそうでした。
リニューアル前のアイレットのコーポレートサイト
個別の指標を見ると、もっとも有意義なコンテンツが素早く表示されたかどうかを示すLargest Contentful Paint(LCP)と、ユーザーが操作可能になるまでの時間を示すTime To Interactive(TTI)の数値がとくに悪く赤文字で表示されています。

リニューアル前のアイレットコーポレートサイトのスコアが表示されたLighthouseの画面。Performance:63点
つまりこの2点が主要な改善ポイントということです。

Lighthouse計測結果の分析

LCPとTTIのスコアが悪い原因はおそらく以下であろうと推察し、改善のための仮説を立てました。

  1. LCPが遅い原因: トップページのヒーローイメージ(メインビジュアル)が映像であるため、ファイルが重くローディング時間が長い
  2. TTIが遅い原因: 映像ファイル、webフォント、画像などのファイルが重い。またそれらのロード完了を待ってから発火するJavaScript(例えばjQueryで書かれた$(window).load)がある

.mp4や.movといった映像ファイルはその性質上どうしても重いため、1. のLCP問題を解決するためには実装だけでなくデザインから見直す必要がありました。
また、2. TTIに関しては画像ファイルの最適化・軽量化のほか、そもそも日本語のwebフォントを使わないなどデザインからの見直しを行いました。さらにJavaScriptについて、コンテンツのロード完了を待ってから実行するJavaScriptタスクを減らしたり、非同期化できるものは非同期化を行いました。さらにインタラクティブな動きのある実装をJavaScriptではなくCSSのみで実現できるものがないかを検討しました。
さらにCLSをさらに改善するため、原則全ての画像コンテンツにwidth / height属性を記述することとしました。

改善の結果

上記のポイントを中心にコーポレートサイトの改善施策を施した結果、2021年7月現在のスコアは83点と20点ほど向上しました
まだ改善点が残っていますが、リニューアルによってコンテンツ量が増えた中でも実装を工夫しコアウェブバイタルをベンチマークにしてスコア向上できたことは良かったと思います。

コーポレートサイトリニューアル後のアイレットコーポレートサイトのスコアが表示されたLighthouseの画面。2021年7月現在のスコアはPerformance:83点

Google Analyticsによる各種数値の分析

次にiretコーポレートサイトをGoogle Analyticsを用いてリニューアル後の6か月間と、前年同時期の6か月間を比較分析したところ、1日のアクティブユーザーが15%増オーガニック流入が13%増平均セッション時間が9%増とそれぞれ向上したことがわかりました。
1日のアクティブユーザーが15%増

オーガニック流入が13%増

平均セッション時間が9%増
iretコーポレートサイトはリード獲得型のwebサイトですから実際のKPIは成約率などになってきますが、パフォーマンスを改善したことによりその手前のファネルの数値を向上できたかと思います。

では次に具体的な改善手法をひとつひとつ紹介します…と言うべきところですが、文章が長くなったので仕切り直して次回の記事でご紹介いたします。

では次回の INSIDE UI/UXをお楽しみに👋

P.S. アイレットでは一緒に働いてくれるエンジニア、デザイナーを募集しています。詳しくは採用情報のページをご覧ください。

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。