パフォーマンス診断から4年、モバイルのLCPは2.1秒

マーケティング担当エンジニアのTomは、チームを離れる前に私のアドバイスの多くを実装してくれました。そのおかげで2022年3月には、PageSpeedでプロフィールがグリーンになる場面も増えていました。しかしその後、サイト全体で新機能が一斉にリリースされ、プロフィールのパフォーマンスは再び悪化してしまいました。5月、開発マネージャーのJayme Cousinsから「もう一度見てほしい」とメールがありました。翌週の月曜日、すぐに効果が出る3つの改善策を送りました。CloudflareのRocket Loaderを無効化したことで、GoogleとAppleのサインインスクリプトがrender blockingになっていたため、deferを付与してbodyの末尾に移動する必要がありました。ロゴにはwidthとheightの指定が必要でした。そしてLCP要素がCSSの背景画像になっていたため、preloadを指定した通常の画像に置き換える必要がありました。先方のビクトリアデーとこちらの昇天祭（休日に仕事をすると妻に嫌がられます）の合間となる水曜日に時間を合わせ、その日のうちに簡易的なページキャッシュを含むサンプルコードも送りました。

8月までに、プロフィールのheadサイズは251 kBから40 kBに縮小しました。

デスクトップ環境では、この2回目の改善の効果がはっきりと確認できます。新機能リリース後の4月には、TTFBが一時1.1秒まで悪化していました。それが10月には0.8秒に改善してグリーンとなり、LCPも3月の1.8秒から1.5秒まで短縮されました。

4年後、この記事のためにCrUXでVoicesを改めて確認したところ、すべての指標がグリーンでした。モバイルではLCPが2.0〜2.3秒、INPが150〜200msに収まり、CLSはここ1年間毎月0を維持しています。この成果はすべて、先方の開発チームによるものです。