Chrome DevToolsでパフォーマンス計測

全3回

Chromeの開発者ツールのうち、フロントエンドのパフォーマンス計測と改善や、レンダリングのチェックを行える「タイムライン」の機能を取り上げます。

最終回 リソースが読み込まれるまでを見る

背景画像の読み込みと表示が遅れるため、チカっと途中で差し変わる現象が確認できました。この記事では、なぜ画像の読み込みが遅れてしまうのか、その原因をブラウザの描画の仕組みから解き明かします。

第2回 フレームチャートを見る

前回記録したタイムラインのうち、主に描画処理の様子を確認できるフレームチャートの見方を解説します。タイトルの背景画像が描画されるまでに起こっていることを詳しく確認することができます。

第1回 タイムラインを記録する

昨今、パフォーマンスはページロード時の読み込みの速さだけではなく、ユーザー操作時における速度も重要です。そんな計測に役立つChrome DevToolsのタイムライン機能について詳しく解説します。