head内でパフォーマンスの問題がある箇所、Webページのレンダリングを妨げる要因を明らかにするCSS
Post on:2021年10月1日
sponsors
Webページのレンダリングを妨げる要因、<head>タグ内でレンダリングをブロックしているCSSやJavaScript、サードパーティーのリソースなどを表示して、どこを修正すればよいか教えてくれるCSSのスニペットを紹介します。
ちなみに下記のグリーンは問題なし、レッドはエラーで対応が必要、オレンジは特定のシナリオで問題が発生する、です。
ct.cssの特徴
<head>内にあるタグは、ページのレンダリングを妨げる要因となる最大の箇所で、正しい形式であることは非常に重要です。ct.cssは、Webページの<head>タグ内に潜在するパフォーマンス上の問題を明らかにする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通りで、簡単です。
- WebページのHTMLに記述する
- デベロッパーツールのスニペットで利用する
1. WebページのHTMLに記述する
WebページのHTMLに外部ファイルとして記述します。
|
1 |
<link rel="stylesheet" href="https://csswizardry.com/ct/ct.css" class="ct" > |
2. デベロッパーツールのスニペットで利用する
デベロッパーツールの「Sources」からスニペットとしてWebページで実行します。
Chromeのデベロッパーツール
「Sources」パネルから「New Snippets」をクリックして、以下のJavaScriptをペーストします。Webページを表示して、パネル下部の矢印（command+enter）をクリックして実行します。
|
1 2 3 4 5 6 7 |
(function(){ var ct = document.createElement('link'); ct.rel = 'stylesheet'; ct.href = 'https://csswizardry.com/ct/ct.css'; ct.classList.add('ct'); document.head.appendChild(ct); }()); |
cs.cssの中身は下記の通りです。
ローカルで利用したい時、外部ホストのファイルを利用できない時などにご利用ください。
|
1 2 3 4 5 |
/*!========================================================================== #CT.CSS ==========================================================================*//*!* ct.css – Let’s take a look inside your <head>… * * © Harry Roberts 2021 – twitter.com/csswizardry*/head{--ct-is-problematic: solid;--ct-is-affected: dashed;--ct-notify: #0bce6b;--ct-warn: #ffa400;--ct-error: #ff4e42}head,head script,head script:not([src])[async],head script:not([src])[defer],head style,head [rel=stylesheet],head script~meta[http-equiv=content-security-policy],head>meta[charset]:not(:nth-child(-n+5)){display:block}head script,head style,head [rel=stylesheet],head title,head script~meta[http-equiv=content-security-policy],head>meta[charset]:not(:nth-child(-n+5)){margin:5px;padding:5px;border-width:5px;background-color:#fff;color:#333}head ::before,head script,head style{font:16px/1.5 monospace,monospace;display:block}head ::before{font-weight:700}head script[src],head link[rel=stylesheet]{border-style:var(--ct-is-problematic);border-color:var(--ct-warn)}head script[src]::before{content:"[Blocking Script – " attr(src) "]"}head link[rel=stylesheet]::before{content:"[Blocking Stylesheet – " attr(href) "]"}head style:not(:empty),head script:not(:empty){max-height:5em;overflow:auto;background-color:#ffd;white-space:pre;border-color:var(--ct-notify);border-style:var(--ct-is-problematic)}head script:not(:empty)::before{content:"[Inline Script] "}head style:not(:empty)::before{content:"[Inline Style] "}head script[src]:not([async]):not([defer]):not([type=module])~title,head script:not(:empty)~title{display:block;border-style:var(--ct-is-affected);border-color:var(--ct-error)}head script[src]:not([async]):not([defer]):not([type=module])~title::before,head script:not(:empty)~title::before{content:"[<title> blocked by JS] "}head [rel=stylesheet]:not([media=print]):not(.ct)~script,head style:not(:empty)~script{border-style:var(--ct-is-affected);border-color:var(--ct-warn)}head [rel=stylesheet]:not([media=print]):not(.ct)~script::before,head style:not(:empty)~script::before{content:"[JS blocked by CSS – " attr(src) "]"}head script[src][src][async][defer]{display:block;border-style:var(--ct-is-problematic);border-color:var(--ct-warn)}head script[src][src][async][defer]::before{content:"[async and defer is redundant: prefer defer – " attr(src) "]"}head script:not([src])[async],head script:not([src])[defer]{border-style:var(--ct-is-problematic);border-color:var(--ct-warn)}head script:not([src])[async]::before{content:"The async attribute is redundant on inline scripts"}head script:not([src])[defer]::before{content:"The defer attribute is redundant on inline scripts"}head script[src][src][src^="//"],head script[src][src][src^=http],head [rel=stylesheet][href^="//"],head [rel=stylesheet][href^=http]{border-style:var(--ct-is-problematic);border-color:var(--ct-error)}head script[src][src][src^="//"]::before,head script[src][src][src^=http]::before{content:"[Third Party Blocking Script – " attr(src) "]"}head [rel=stylesheet][href^="//"]::before,head [rel=stylesheet][href^=http]::before{content:"[Third Party Blocking Stylesheet – " attr(href) "]"}head script~meta[http-equiv=content-security-policy]{border-style:var(--ct-is-problematic);border-color:var(--ct-error)}head script~meta[http-equiv=content-security-policy]::before{content:"[Meta CSP defined after JS]"}head>meta[charset]:not(:nth-child(-n+5)){border-style:var(--ct-is-problematic);border-color:var(--ct-warn)}head>meta[charset]:not(:nth-child(-n+5))::before{content:"[Charset should appear as early as possible]"}link[rel=stylesheet][media=print],link[rel=stylesheet].ct,style.ct,script[async],script[defer],script[type=module]{display:none} |
sponsors
