ABEMA における CriticalCSS の活用例

ABEMA における CriticalCSS の活用例 2023/04/28 Muddy Web #5

自己紹介藤嶋稜（ふじしまりょう）株式会社サイバーエージェント 2022 年新卒入社 Web フロントエンドエンジニア@ 株式会社AbemaTV
@Co9xsR

ABEMA における Critical CSS の活用例目次 Critical CSS の仕組みのおさらい ABEMA
における Critical CSS の実践例 Muddy な対応が必要だった例現状の課題まとめ

Critical CSS の仕組みのおさらいブラウザはページ表示の前に CSS を読み込む必要がある = CSS ファイルは rendering
block resource であるページに必要な CSS だけを先に読み込むことで、初期表示をブロックするような読み込み時間を減らすことができる = Web Vitals の LCP の改善などにつながる

Critical CSS の仕組みのおさらい Critical CSS 適用前ページに必要ない CSS の読み込みも待つ必要がある <head>
<meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>html served from backend server</title>  <link rel="stylesheet" href="/path/to/main.css" /> </head> <body>  <div class="awesome-component">This is awesome component</div> </body>

Critical CSS の仕組みのおさらい Critical CSS 適用後ページにあるコンポーネントに必要な CSS だけ先に読み込む <head>
<meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>html served from backend server</title>  <style> .awesome-component { color: red; padding: 8px; } </style> </head> <body> <div class="awesome-component">This is awesome component</div>  <link rel="stylesheet" href="/path/to/main.css" /> </body>

ABEMA における Critical CSS の実践例 abema-web の全体設計イメージバックエンドチームが管理している Go のマイクロサービス群
Web チームが管理している Node.js の BFF 層 gRPC 経由で各マイクロサービスを呼び出し、クライアントアプリケーションが期待する形に変換する変換したデータをもとに HTML を組み立てて serve するクライアントの React アプリケーションは HTML を受け取り hydration する

ABEMA における Critical CSS の実践例 1. SSR サーバーの Docker イメージのビルド、コンテナの起動
2. ヘッドレスブラウザで Critical CSS の抽出を行い JSON に保存 3. サーバーから HTML を serve する際は JSON ファイルから利用これらのステップが各環境のデプロイワークフローで行われる

2. ヘッドレスブラウザで Critical CSS の抽出を行い JSON に保存 3. サーバーから HTML を serve する際は JSON ファイルから利用ビルド時に CircleCI の workspace [※1] に保存していたコードを利用通常の環境で使っている SSR サーバーの Dockerfile を一部上書きして利用する SSR 時に gRPC 経由で呼び出す各マイクロサービスの向き先を独自のモックサーバーにするページとして出現する可能性のあるコンポーネントを全て表示させる必要があるので独自のモックデータを使いたい（詳細は後述） ※1 https://circleci.com/docs/ja/workspaces/

2. ヘッドレスブラウザで Critical CSS の抽出を行い JSON に保存 3. サーバーから HTML を serve する際は JSON ファイルから利用 penthouse [※1] というライブラリを利用している内部的には puppeteer を利用して chromium 経由でページにアクセス全体の CSS ファイル main.css からページに表示されている HTML のクラス名を基に抽出 CSS の抽出結果が含まれる JSON も CircleCI の workspace に保存 ※1 https://github.com/pocketjoso/penthouse

ABEMA における Critical CSS の実践例 PostCSS で必ず抽出対象に含めたい CSS ファイルを parse
してセレクタの一覧を取得し、それを forceInclude オプションに指定画面外のはずの footer などの要素に CSS が当たっていないことでなぜか CLS が悪化していたらしい const penthouse = require("penthouse"); const criticalCss = await penthouse({ url: `http://0.0.0.0:3000${path}`, forceInclude: isMobile ? mobileForceIncludeSelectors : desktopForceIncludeSelectors, });

2. ヘッドレスブラウザで Critical CSS の抽出を行い JSON に保存 3. サーバーから HTML を serve する際は JSON ファイルから利用 // JSON から対象の CSS を文字列として取得 const criticalCss = shouldEnableCriticalCss && criticalCssName ? manifest[`${criticalCssName}-${isMobile ? "mobile" : "desktop"}`] ?? null : null; // backend から返す html の head に埋め込む <CssLoader manifest={manifest} isMobile={isMobile} criticalCss={criticalCss} position="head" />

Muddy な対応が必要だった例新規画面実装後... QA 「dev 環境でリロードすると一瞬画面が崩れます！」ぼく「ローカルで動いてたはずでは？？ 😇」

Muddy な対応が必要だった例 penthouse による抽出結果のデバッグ CI で実行される Critical CSS 抽出処理をローカルで実行実際に撮影されるスクリーンショットを出力して、何が足りないのかを検証する
結果、モックサーバーに対象の gRPC メソッドが追加されておらず、そもそも SSR に失敗していることが判明 const penthouse = require("penthouse"); const criticalCss = await penthouse({ url: `http://0.0.0.0:3000${path}`, forceInclude: isMobile ? mobileForceIncludeSelectors : desktopForceIncludeSelectors, screenshots: { basePath: `./_screenshots/${name}-${platform}`, type: "jpeg", }, });

モックサーバーに gRPC のメソッドとモックデータを追加後... 「SSR は成功するようになったけど CLS が酷い 🤔」

Muddy な対応が必要だった例モックデータの追加同一ページで出現する可能性のあるコンポーネントが全て出るようなモックデータを作るパターン A の CSS ⊆ パターン
B の CSS の場合はパターン B で CSS を抽出する必要がある例: ABEMA Web 版におけるシリーズページ（パターン A 、パターン B ）

現状の課題マイクロサービス側への新規 gRPC メソッドの追加とモックサーバー側の更新が連動しておらず、手動で追加する必要がある結果、新規画面を一通り実装し dev で確認するまで Critical CSS
の抽出に失敗していることに気づかなかった 😇 proto ファイルから TypeScript の型定義を生成する仕組み自体は整備されているので、それを利用してモックデータの追加をやりやすくしたい同一ページでも条件によって全く異なる CSS が適用される場合は、モックデータで事前抽出するアプローチに限界がある実際のページへのアクセスごとに動的生成するなどの対応が必要？🤔

まとめ ABEMA における Critical CSS 抽出の仕組み自体は配属前から整備されていたが、チームメンバーが普段触る機会がなくデバッグが難しい状態デバッグ方法などの知見をドキュメント化してチームに共有できたのは良かった課題もかなり見つかったので改善策も見つけていきたい

ご清聴ありがとうございました！

ABEMA における CriticalCSS の活用例

ABEMA における CriticalCSS の活用例

Co9xs

More Decks by Co9xs

Other Decks in Programming

Featured

Transcript