Chrome DevToolsにはさまざまな機能が搭載されています。そのうちの1つ「Rendering」には、ページのレンダリングパフォーマンスを視覚化する機能や、さまざまな見え方を疑似的に再現する機能が含まれています。 サイトのレンダリングパフォーマンス改善の取り組みに活用できる、こちらのRenderingタブ内の各機能についてご紹介します。 利用方法と各機能について Renderingタブはデフォルトだと非表示になっており、利用するにはまず次のいずれかの方法で表示する必要があります。 Chrome DevToolsを開いた状態でWindowsではCtrl+Shift+P、MacではCommand+Shift+Pを押して表示されるコマンドメニューに「Rendering」と入力し、「Show Rendering」を選択 Chrome DevTools内の三点ドットから「More tools
![Chrome DevToolsのRenderingタブを活用しよう | フロントエンドBlog | ミツエーリンクス](https://cdn-ak-scissors.b.st-hatena.com/image/square/1b18662aae3f5c41897c0692bf299b1d8d113c2c/height=288;version=1;width=512/https%3A%2F%2Fwww.mitsue.co.jp%2Fknowledge%2Fblog%2Ffrontend%2Fimg%2F20210706_07.gif)