head内でパフォーマンスの問題がある箇所、Webページのレンダリングを妨げる要因を明らかにするCSS

Webページのレンダリングを妨げる要因、<head>タグ内でレンダリングをブロックしているCSSやJavaScript、サードパーティーのリソースなどを表示して、どこを修正すればよいか教えてくれるCSSのスニペットを紹介します。

ちなみに下記のグリーンは問題なし、レッドはエラーで対応が必要、オレンジは特定のシナリオで問題が発生する、です。

Webページのレンダリングを妨げる要因、head内でパフォーマンスの問題がある箇所を明らかにするCSSスニペット

ct.css
ct.css -GitHub

ct.cssの特徴

<head>内にあるタグは、ページのレンダリングを妨げる要因となる最大の箇所で、正しい形式であることは非常に重要です。ct.cssは、Webページの<head>タグ内に潜在するパフォーマンス上の問題を明らかにするCSSのスニペットです。

サイトのキャプチャ

ct.css

ct.cssの使用にあたっての制限事項は、下記の通りです。

  • 一致しないmediaタイプ:
    ct.cssでは現在のところ、印刷用スタイルシートのみを考慮しています。そのため、他の非ブロッキングスタイルシートがある場合は誤検出される可能性があります。
  • 挿入されたscript要素:
    ct.cssはすべてのCSSと同様にHTMLではなく、DOMに対して機能します。そのため、挿入されたscript要素はブロッキングとして誤ってフラグが立てられます。
  • サードパーティのブロッキングリソース:
    サードパーティであるかどうかのチェックは、単純なものです。
  • CSPの問題:
    アプリがcsswizardry.comからのCSSファイルをブロックする場合は、ct.cssファイルを自分でホストするか、その内容をページ内に<style class="ct">...</style>タグを記述してください。

ct.cssのデモ

デモではct.cssで<head>内でどのようなパフォーマンスの問題があるか確認できます。

  • レッド: これはエラーで、対応する必要があります。
  • オレンジ: 特定のシナリオで問題になる可能性があります。
  • グリーン: 問題ありません、純粋に情報として提供されます。
  • ソリッド: このファイルが問題であることを示しています。
  • ダッシュ: 別のファイルがこのファイルで問題を引き起こしています。
サイトのキャプチャ

デモページ

ct.cssの使い方

使い方は2通りで、簡単です。

  1. WebページのHTMLに記述する
  2. デベロッパーツールのスニペットで利用する

1. WebページのHTMLに記述する

WebページのHTMLに外部ファイルとして記述します。

2. デベロッパーツールのスニペットで利用する

デベロッパーツールの「Sources」からスニペットとしてWebページで実行します。

デベロッパーツールのキャプチャ

Chromeのデベロッパーツール

「Sources」パネルから「New Snippets」をクリックして、以下のJavaScriptをペーストします。Webページを表示して、パネル下部の矢印(command+enter)をクリックして実行します。

cs.cssの中身は下記の通りです。
ローカルで利用したい時、外部ホストのファイルを利用できない時などにご利用ください。

sponsors

top of page

©2021 coliss