タグ

developmentとCoreWebVitalsに関するklim0824のブックマーク (1)

  • Chrome DevToolsのRenderingタブを活用しよう | フロントエンドBlog | ミツエーリンクス

    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 | ミツエーリンクス
    klim0824
    klim0824 2021/07/28
    Chromeでペイントイベント、レイアウトシフト、FPSとGPUメモリ、スクロールパフォーマンス、CWV、ローカルフォント、印刷CSS、ライト/ダークテーマ 等々がチェックできる機能
  • 1