Arjen Karel, Core Web Vitals consultant
小規模チーム、制作会社、セカンドオピニオン向け

Core Web Vitals 診断

開発者が1〜2名で、まず何を修正すべきか知りたいチーム向けです。サイトの刷新や新しいテーマ、プラグインを任され、着手前にセカンドオピニオンが欲しい方にも適しています。定額制で期間は1週間。スコープを取り決める前に、まずサイトを確認します。

Arjen Karel2009年からのWebパフォーマンスコンサルタント
Some of the teams I've worked with
Erasmus MC Saturn Cloud Happy Horizon Fotocasa Nestlé Featured on web.dev
診断の流れ

診断の進め方

診断では、3つの疑問に答えます。何が遅いのか、なぜ遅いのか、そして何から修正すべきかです。field dataを元にこれらを特定し、初対面の開発者でも迷わず実装できる形でまとめます。

レポートの実例:field dataから具体的な修正策まで。
  1. まずはfield dataから

    Googleが重視する基準、つまりCrUXにおける75パーセンタイルの実訪問者データから着手します。CrUXでわかるのは、遅いという事実だけです。どの画像やどのスクリプトが原因かまではわかりません。すでにRUMを導入しているなら、それを活用します。未導入の場合は診断中にCoreDashを追加し、そのRUMデータを使って遅延の原因となっている箇所を特定します。

  2. テンプレートごとに調査

    次に、売上に直結するテンプレートを精査します。トップ、カテゴリ、商品、チェックアウトなどです。Chrome上でリクエストを1つずつトレースし、LCP画像の表示が遅い理由や、タップ時にmain threadで何が起きているかを突き止めます。LCP画像単体で遅いケースは滅多にありません。検出のタイミングやネットワークの混雑、その他いくつかの小さなミスが重なり、結果として1秒以上の遅延につながっています。そのうち1つだけを直しても、変化はほとんど実感できません。正しい順序で修正することで、問題を根本から解決できます。

  3. 開発者がそのまま実装できるレポート

    検出事項ごとに、原因、影響、修正方法をコード例付きで記載します。最優先で対応すべきこと、後回しにできること、他の修正を行って初めて効果が出るものを重要度順に整理します。冒頭には意思決定者向けの1ページの要約を用意し、残りは開発者向けの実装内容です。

  4. チームとの2時間のミーティング

    社内の開発者、制作会社、あるいはその両方が対象です。診断結果を詳しく説明します。疑問点にはその場ですべて回答し、月曜から何を実装すべきかが完全に明確になった状態で終了します。

料金

Core Web Vitals 診断の費用は?

定額1,500ユーロです。着手前にスコープを取り決め、1週間以内にレポートをお渡しします。初日に重大かつ容易に直せる問題が見つかった場合は、その日のうちにお知らせします。

含まれる内容
  • チェックリストを持ったジュニアコンサルタントではなく、私自身が担当
  • 各問題の原因、影響、および修正方法
  • 開発者や制作会社がそのまま使えるコード例
  • 重要度順に整理された修正リスト
  • 専門用語を抑えた1ページのエグゼクティブサマリー
  • チームとの2時間のミーティング
  • 実装期間中のメールによる質問対応(追加費用なし)
Core Web Vitals 診断

定額料金

トップ、カテゴリ、商品、チェックアウトなど、主要4ページタイプ。

€1,500 定額(税別)1週間以内
Arjen Karel

診断を依頼する

サイトのURLと、現在の状況について一言お送りください。

  1. サイトの状況を共有

    URLと、困っている点をお知らせください。返信する前にfield dataと主要なテンプレートを確認し、問題の当たりをつけます。具体的な質問もフォームにご記入いただければ、レポート内でお答えします。

  2. スコープの決定

    1日以内に折り返し連絡します。いくつか質問をさせていただく場合もあります。その後、対象となる4つのページタイプを選定します。通常は最も重要なページを指定していただきます。コンテンツを最も理解しているのは皆さんであり、技術の専門家は私です。

  3. ご発注・診断開始

    システムへのアクセス権限などは不要です。不明点があれば確認をお願いすることがありますが、そうしたケースは滅多にありません。1週間後にレポートをお渡しし、チームと一緒に内容を確認します。

Request an audit

対象となる方

Core Web Vitals 診断はどのようなチーム向けか?

  1. 小規模チーム

    開発者1〜2名体制

    この規模のチームにとって、何ヶ月にも及ぶコンサルティングは過剰です。優秀な開発者なら、試行錯誤を重ねればCore Web Vitalsの課題を自力で解決できるでしょう。私はその試行錯誤を省きます。2009年からこの分野に携わっているため、何が問題で何から修正すべきかを即座に特定できます。

  2. 制作会社

    クライアントサイトの診断

    サイトを構築したものの、クライアントのSearch Consoleに警告(赤色)が出ている場合です。サイトを診断し、開発者がそのまま実装できる形にレポートをまとめ、チームと一緒に内容を精査します。クライアントは、信頼関係のある既存の制作会社から高速なサイトを提供してもらえます。継続的なサポートをご希望の場合は制作会社向けサポートをご利用ください。

  3. セカンドオピニオン

    さらなる投資を行う前に

    サイトの全面改修や新しいテーマ、すべてを解決すると謳うプラグインの導入を提案されたものの、確信が持てない場合です。提案された計画をfield dataと突き合わせ、それが本当に訪問者の遅延を解消するのか、あるいは別の方法をとるべきかを判断してお伝えします。

診断事例 · Voices

Voicesにおける診断の実例

WordPressのマーケティングサイト、声優プロフィール用の独立したアプリ、ブログ、ポッドキャスト

2.2秒モバイルのLCP(過去28日間)
189msモバイルのINP(過去28日間)
0.01モバイルのCLS(過去28日間)
Lighthouse test of the Voices homepage in 2022: performance 50, LCP 9.6 seconds, CLS 0.35
2022年のLighthouseテストにおけるトップページ:LCP 9.6秒、CLS 0.35。

Voicesは企業が声優を起用するためのプラットフォームです。そのサイトは実質的に、WordPressのマーケティングサイト、声優プロフィール用の独立したアプリ、ブログおよびポッドキャストという3つのサイトで構成されていました。これら全体で約25のURLを調査しました。トップページでは、読み込み中にレイアウトが3回ズレていました。まずfallbackフォントがRobotoに切り替わり、サイズ指定のないヒーロー画像がコンテンツ全体を押し下げ、その後にRobotoがPoppinsへと切り替わっていたのです。

ブログは数値上は問題ないように見えました。最適化プラグインがスクリプトの実行を約4秒間遅延させていたため、Lighthouseで94点を記録していたのです。しかし、これはテストを欺いているだけで、実際の訪問者には何の役にも立ちません。そのため、ブログに対する最初のアドバイスは、そのプラグインを外すことでした。

その後、開発チームと打ち合わせを行いました。最優先で解決すべき問題の修正手順を伝え、要点をレクチャーしました。これにより、彼らは手探りで試行錯誤する手間を省くことができました。しばらくして開発責任者から、実施した対策リストのメールが届きました。スクリプトのフッターへの移動、重複フォントの削除、font-displayの修正、重要な画像へのfetchpriorityの付与などです。チームはこれらの改善を一気に成し遂げました。

これは2022年のことです。上記の数値は、4年が経過した現在における、過去28日間の実際のモバイル訪問者のデータです。

診断について

Core Web Vitals 診断とは何ですか?

実際の訪問者にとってサイトの何が遅いのか、なぜ遅いのか、そして何から修正すべきかを明らかにします。lab testではなく、Googleも採用しているfield dataに基づいた診断です。結果は文書でお渡しし、サイトを構築している担当者と一緒に内容を確認します。

PageSpeed診断とCore Web Vitals 診断は同じものですか?

同じではありません。一般的なPageSpeed診断の多くは、シミュレートされた1台の端末で1回測定したLighthouseスコアを起点にします。一方、私はGoogleが重視する75パーセンタイルの実際の訪問者体験から着手します。lab testも実行しますが、それは遅い理由を解明するためであり、遅いかどうかを判定するためではありません。

LCP、INP、CLSだけを調査するのですか?

いいえ。3つの指標だけで終わるWebパフォーマンス診断では、原因を見落とします。問題の大半は、TTFB、render blockingなCSS、フォント、サードパーティ製スクリプト、読み込み順序に起因します。レポートにはこれらも重要度順に記載されます。

自社でPageSpeed Insightsを実行するだけでは不十分ですか?

自社での実行も可能ですし、ぜひ行うべきです。不合格であるという事実と、大まかな問題の箇所はわかります。しかし、なぜブラウザがLCP画像を見つけるのが遅いのか、クリック時にどのスクリプトがmain thread上にあるのか、どの提案を適用してもfield dataがまったく改善しないのかまではわかりません。

対象サイト

ShopifyやWordPressで構築されたサイトでも診断できますか?

はい、可能です。ホスティングプラットフォーム自体の変更はできませんが、テーマや追加したアプリ、スクリプトは自社で管理する領域であり、問題の大部分はそこにあります。WordPressのテーマやプラグインについても同様です。

公開前のサイトでも診断できますか?

はい、ステージング環境で診断可能です。実際の訪問者がいないためfield dataはありませんが、lab testや類似サイトで得られた知見を活用して分析します。公開後は、field dataによって診断が正しかったかどうかがわかります。

事前に用意するものはありますか?

サイトのURLと、重視するページタイプをお知らせください。Search Consoleやアナリティクス、ソースコードへのアクセス権があると便利ですが、必須ではありません。必要な調査の大部分はブラウザ上で完結します。

範囲と料金

診断の料金はいくらですか?

トップ、カテゴリ、商品、チェックアウトなど、4つのページタイプまでで定額1,500ユーロです。複数ドメイン、多言語展開、またはマーケティングサイトとは別のWebアプリが存在する場合は、着手前にスコープを取り決めて確定料金をご提示します。時間制(タイムチャージ)ではありません。

期間はどのくらいかかりますか?

着手可能になってから1週間以内です。大規模なサイトの場合はさらに時間がかかることがありますが、着手前にスコープで期間を明示します。

事前に打ち合わせは必要ですか?

不要です。診断をご依頼いただいた後、スコープをメールでお送りします。事前に直接話したい場合は、フォームにその旨をご記入いただければ20分ほど打ち合わせを行います。

診断後のサポート

修正作業も直接代行してもらえますか?

いいえ。診断は修正すべき内容を特定するものであり、実装は社内の開発者や制作会社が担当します。実装期間中の伴走支援を希望される場合は、コンサルティングをご利用ください。

制作会社が構築したサイトでも問題ありませんか?

問題ありません。初対面の開発者でも実装できる形でレポートを作成し、制作会社と直接打ち合わせを行うことも歓迎です。制作会社には具体的な実装指示が渡り、発注側には作業を確認するための明確な基準が手に入ります。

実装中に疑問が生じた場合はどうすればよいですか?

メールでお問い合わせください。想定より実装が難航した場合や、予想と異なる結果になった場合の確認も診断内容に含まれており、追加費用はかかりません。

診断はどのくらいの頻度で受けるべきですか?

通常は1回で十分です。あとはリニューアル、新テーマの導入、プラットフォーム移行時などに実施することをおすすめします。RUMとアラートを設定しておけば速度低下にすぐ気づけるため、毎年定期的にWebパフォーマンス診断を受ける必要はありません。

Core Web Vitals 診断 | Arjen Karel Core Web Vitals Core Web Vitals 診断 | Arjen Karel