Core Web Vitals トレーニング
Webチームと2時間、実際のページを使用します。固定料金で参加人数の制限はありません。
マスタークラスの内容
マスタークラスでは、チームが問題を特定する方法を学びます。その過程でサイトの課題を1つか2つ発見できるため、開発者はその週のうちに修正に着手できます。すべての修正項目をリストアップしてほしい場合は、監査をご利用ください。
-
実際のサイトとケースを使用
URL、チームがよく扱うページ、行き詰まっている問題を送ってください。モバイルでのLCP、INP、CLSのp75、Search Consoleが警告を出しているページグループ、過去数ヶ月の傾向を確認します。その後、それらのページのトレースを記録します。これに約半日かかります。
-
チームと2時間
最初の1時間は、記録したトレースを使って、ブラウザがページを読み込み、タップを処理する仕組みを説明します。次に、開発者の1人に画面を共有して操作してもらい、どこをクリックすべきか指示します。サイト構築に関わる全員を招待してください。タグマネージャーの運用担当者が別にいる場合は、その方も参加させてください。
-
録画とメモ
録画とスライドはお渡しします。数日以内に、発見した重要なポイントをまとめたメモもお送りします。セッションを欠席した人も、これらを使ってキャッチアップできます。
-
1ヶ月後のフォローアップ
オプションです。それまでにチームは独自に実践し、どこで行き詰まるかを把握しているはずです。持ち寄ったトレースを元にアジェンダを決め、さらに2時間のセッションを行います。
トレーニング後に開発者ができるようになること
-
Field data
Googleが見ている数値を読み解く
Lighthouseは95点でも、Search Consoleでは不合格になります。Lighthouseは、シミュレートされた1台のスマートフォンでの1回のページ読み込みにすぎません。Googleは、実際のモバイル訪問者のp75を見ています。チームは両方の読み取り方と、PageSpeed Insightsのどの項目を改善してもfield dataが変わらないかを学びます。効率的なキャッシュの有効期間にはGoogle自身のタグスクリプトがよく挙がりますが、そのキャッシュヘッダーは誰にも変更できません。
-
LCP
LCP要素の表示が遅い理由を特定する
パフォーマンスパネルでLCPマーカーを見つけ、リクエストまで遡ります。各フェーズを見れば、ブラウザが画像を見つけるのが遅かったのか、読み込みが遅かったのか、あるいは取得済みでも描画しなかったのかが分かります。見つけるのが遅い場合、原因はCSSの背景画像やスライダースクリプトによる追加であることが多く、画像を圧縮しても時間は短縮できません。
-
INP
遅いインタラクションの原因となるスクリプトを特定する
Search Consoleに「INP の問題: 200 ミリ秒超（モバイル）」が何ヶ月も表示されており、トレースにはミニファイされた関数名で埋まったコールスタックが表示されます。1つの遅いインタラクションを取り上げ、入力遅延、処理時間、表示遅延に分割します。Long Animation Framesからスクリプト名を特定します。原因の多くは、ページの半分を再レンダリングするクリックハンドラか、次のペイントの前に実行される分析イベントです。
-
CLS
レイアウトシフトの発生源を見つける
レイアウトシフトとは、予期せぬタイミングでページ上の要素が動く現象です。動いた要素自体がシフトを引き起こすことはほとんどありません。幅と高さがない画像、上部にコンテンツを追加するスクリプト、入れ替わるWebフォントなど、別の何かが要素を動かしています。
-
Third parties
各タグの影響を数値化する
開発者はタグマネージャーを管理していないため、チケットなしで新しいピクセルがページに追加されます。チームは、トレースと実際の訪問者のINPで各タグの影響を測定する方法を学びます。この数値こそが、マーケティング部門に提示すべき根拠です。
-
Releases
リリースの翌日に影響を確認する
デプロイ後にLCPが悪化しても、Search Consoleからメールが届くまで誰も気づきません。Search Consoleは過去28日間のデータを示すため、気づいた頃には原因となったリリースから数週間が経過しています。RUMを使えば、CoreDashや既存のツールで翌日に確認できます。
What clients say
Loop
"Arjen somehow makes LCP optimization sound simple. We used his approach and our metrics were 40% better within a week."
Nathan Ziarczyk
DPG Media
"Arjen can explain the most complicated performance problems, and you can tell he loves this stuff. It made learning the hard parts fun."
Ashkan Malekloo
Jamie Oliver Group
"After the training we finally understood why our INP was failing, and which interactions we had to make cheaper."
Nicole Keep
Core Web Vitalsトレーニングの料金体系
マスタークラスはチーム全体で1,500ユーロの固定料金です。開発者が5人でも15人でも同じ料金です。フォローアップはさらに2時間で750ユーロです。準備が少ないため、パワーアワーの時給とほぼ同じです。
- 私と、トレースを読み解いてきた17年の経験
- 開始前のモバイルp75の確認
- 参加人数の制限なし
- 2時間目は開発者の1人が実際に操作
- 録画、スライド、メモ
2時間、チーム全員
準備を含みます。
€1,500（税抜）フォローアップ €750
マスタークラスを予約する
URLとチームの概要をお送りください。
-
チームについて教えてください
人数、使用している技術、繰り返し発生する問題を教えてください。大型リリースやブラックフライデーなど、期限がある場合はそれも記載してください。
-
日程を調整します
1日以内に候補日を返信します。準備に1週間ほどかかるため、通常は1〜2週間後の日程になります。
-
当日
Google Meet、Zoom、Teamsなど、チームが使用しているツールで実施します。開発者の1人がChromeでサイトを開いておいてください。2時間目はその方が操作します。
Speakでのトレーニングの様子
クライアントのサイトを構築するオランダのデジタルエージェンシー
クライアントはエージェンシーにCore Web Vitalsについて常に質問します。なぜSearch Consoleが赤いのか、新しいテーマで直るのか、などです。Speakは自社の開発者が答えられるようになることを望んでいたため、実際のクライアントサイトを使ってチームをトレーニングしました。
1年後、Sander Los氏からメールが届きました。「トレーニングでのコンセプトと提案のおかげで、ページ速度とUXが大幅に改善しました」。彼のチームは、学んだことを活かしてクライアントのWebショップを再構築していました。
エージェンシーにとって、パフォーマンス改善は見積もりに含められる業務となり、これに高い料金を設定するエージェンシーもあります。
マスタークラス
Core Web Vitalsマスタークラスとは何ですか？
Webチーム向けのビデオ通話による2時間のトレーニングで、実際のページを使用します。2時間目には、チームの開発者自身がトレースを記録します。
開発者はすでにパフォーマンスの知識を持っている必要がありますか？
いいえ。HTML、CSS、JavaScriptの知識があり、DevToolsを開いたことがあれば十分です。パフォーマンストレースの読み方を教えます。プロダクトオーナーやマーケターも、最初の1時間は問題なくついていけます。
2時間でこれらすべてをカバーできますか？
すべてを同じ深さでは扱いません。サイトで失敗している指標に2時間の大部分を割き、残りはどこを見るべきかが分かる程度に説明します。INPの場合、これにはscheduler.yield()を使ってクリックハンドラの処理を分割することも含まれます。
Next.jsを使っていますが、問題ありませんか？
ブラウザはページが何で構築されたかを気にしないため、Next.js、Nuxt、Magento、Shopify、WordPressのどれでも仕組みは同じです。また、実際のサイトを例として使うため、フレームワーク固有の動作も含まれます。例えば、Next.jsページでの最初のタップをブロックするハイドレーションや、全テンプレートでスクリプトを読み込むShopifyアプリなどです。
チーム
何人まで参加できますか？
何人でも参加可能です。料金はチーム単位です。20人を超えると2時間目に1つの画面に人が集まりすぎるため、事前に形式を相談します。
エージェンシーですが、このトレーニングは役立ちますか？
はい。チームが最もよく知っているクライアントサイトか、現在問題が発生しているサイトを選んでください。トレーニング後も改善できないクライアントサイトには、エージェンシーサポートを提供しています。
オフィスに来てもらうことはできますか？
はい、距離に応じた交通費が別途かかります。全員が自分の画面でトレースを見られるため、オンラインでも同様に進められます。
料金とその後
2時間で十分ですか？
トレースの読み方を学ぶには十分です。サイトの修正はトレーニング後のチームのスプリントで行い、フォローアップは行き詰まった部分の解決に使います。
より長時間のトレーニングを予約できますか？
はい。半日、1日、または指標ごとに1セッションのシリーズも可能です。マスタークラスより長くなる場合は、開始前に範囲と料金を提示します。
監査との違いは何ですか？
監査では私が問題を発見してドキュメントにまとめ、チームが修正を構築します。マスタークラスでは、チームが自分で問題を見つける方法を学びます。同じサイトで何年も作業するチームにとって最も投資対効果が高くなります。期限が迫っている場合は、監査から始めてください。
