フロントエンド描画最適化の実践

ページ読み込みに時間がかかり、ユーザーが離脱していく。この問題は、フロントエンドの最適化で改善できます。

ウェビナーでは、ブラウザがHTMLを解析してピクセルを描画するまでの流れを詳しく説明します。DOMツリー構築、スタイル計算、レイアウト、ペイント、コンポジットという各段階で何が起きるのかを理解することで、最適化のポイントが見えてきます。用語集の技術概念も、Chrome DevToolsで実際の動作を確認しながら学べます。

リフローとリペイントの削減

スタイルやレイアウトの変更は、ブラウザに大きな計算負荷をかけます。どのプロパティがリフローを引き起こすのか、どう回避するのかを具体的に示します。

講師の高野瑞穂は、大規模なECサイトで描画パフォーマンス改善を担当してきました。仮想スクロールやCSS transformの活用、アニメーション最適化など、実践的なテクニックを紹介します。

リソース読み込みの工夫

JavaScriptバンドルのサイズ削減、コード分割、画像の遅延読み込みなど、多角的なアプローチを解説します。Lighthouseスコアの改善実例も取り上げます。

参加者は自分のサイトを分析し、具体的な改善策を見つけられます。測定ツールの使い方から実装まで、一連の流れを体験できる内容です。