A JavaScript bookmarklet that diagnoses performance issues in your webpage's <head> section.

This tool provides a visual report of blocking scripts, third-party resources, and other elements that might impact your page's performance. It's a slightly enhanced version of Harry Roberts’ original CT Scan CSS tool, rewritten in JavaScript to avoid CSP restrictions and with an improved UI.

Key Features

Some time ago, I discovered the powerful CT Scan CSS by Harry Roberts (𝕏 @csswizardry) — a super-clever diagnostic tool that analyzes any webpage's <head> section to spot render-blocking resources and potential performance bottlenecks. The original tool (CT.css ➚ | GitHub ➚) works by injecting CSS into your page to visualize problematic elements.

Why CT Scan v2?

While using Harry's original bookmarklet, I kept running into a few challenges:

  1. Cross-Origin Resource Sharing (CORS) limitations created barriers injecting the css file hosted on Harry’s site.
  2. Content Security Policy (CSP) restrictions often blocked injected CSS on many sites, so merely inlining Harry’s CSS still wouldn’t always work.
  3. The original UI design made it difficult to quickly scan through complex head sections, or print out a report.

This inspired me to create CT Scan v2: a JavaScript-based rewrite that maintains the core functionality while addressing these issues and adding a couple new features like an export option and improved visual indicators.

Of course, I am not a skilled programmer. Did I use LLMs to convert this? Yes I did. A skilled coder could doubtless do better! (Please do!)

Caveats

So, like any quick diagnostic tool, CT Scan v2 still comes with a few limitations you should know about (very much like the first one):

Stylesheet Analysis All stylesheets are flagged as "render-blocking" regardless of their media attribute. Media-specific or print-only CSS may show warnings even when they don't impact rendering.
Runtime DOM ONLY The tool analyzes the current state of the DOM. Elements injected after you run the tool (or removed before) won't be included in the report.
Simple Origin Detection Third-party resources are detected using a basic ^https?:// pattern check, which may produce false positives (same-origin CDNs) or miss protocol-relative URLs.
UI Modifications The tool temporarily converts fixed/sticky elements to static positioning to prevent the report from being obscured. This may briefly alter your page layout.
State Preservation Running the tool twice will restore the page, but scroll position and dynamic UI state may not be preserved exactly.
Simplified Heuristics The tool uses tag and attribute checks to identify issues, not a complete render-path analysis. Treat the results as guidance, not absolute truth.

Key Advantage: CSP Compatibility

Unlike Harry’s original bookmarklet, CT Scan v2 applies all styling via JavaScript's element.style property rather than injecting <style> tags. This avoids triggering Content Security Policy restrictions that block inline styles.

Understanding the Results

When you run the Head Inspector bookmarklet, you'll see a color-coded report at the top of your page like this:

image.png

Using the Report:

  1. Click any item to expand and see its HTML