Skip to content

fix: use renderBlockingStatus to avoid false positives in Critical CSS Detection#65

Merged
nucliweb merged 1 commit intomainfrom
fix/critical-css-detection-false-positive
Mar 10, 2026
Merged

fix: use renderBlockingStatus to avoid false positives in Critical CSS Detection#65
nucliweb merged 1 commit intomainfrom
fix/critical-css-detection-false-positive

Conversation

@nucliweb
Copy link
Owner

@nucliweb nucliweb commented Mar 10, 2026

Closes #64

Summary

  • Replaces the DOM-only media attribute check with PerformanceResourceTiming.renderBlockingStatus as the primary signal
  • Correctly handles the media="print" onload="this.media='all'" deferral pattern — stylesheets loaded this way are now reported as non-blocking
  • Keeps the DOM heuristic as a fallback for browsers without renderBlockingStatus support (pre-Chrome 107), with a comment noting the known limitation

Root Cause

The snippet read link.getAttribute("media") at runtime. By that point, the onload handler from the deferral pattern has already changed the attribute from "print" to "all", so the check incorrectly flagged those stylesheets as render-blocking.

Test plan

  • Run the snippet on https://zizicache.superhost.sk/ — CSS deferred with media="print" onload should appear in the Non-Blocking section, not Render-Blocking
  • Run on a page with genuinely render-blocking CSS — should still be flagged correctly
  • Run on a browser without renderBlockingStatus support — fallback DOM check activates

Before

image

After

image

…S Detection

Fixes #64

The media/onload deferral pattern (media="print" onload="this.media='all'")
was incorrectly flagged as render-blocking. By the time the snippet runs,
the onload handler has already mutated the media attribute to "all", making
the DOM-based check unreliable.

Now uses PerformanceResourceTiming.renderBlockingStatus (Chrome 107+) as
the primary signal — it reflects actual render-blocking during page load.
The DOM heuristic is kept as a fallback with a comment noting its limitation.
@vercel
Copy link

vercel bot commented Mar 10, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
webperf-snippets Ready Ready Preview, Comment Mar 10, 2026 11:26am
webperf-snippets-u6am Ready Ready Preview, Comment Mar 10, 2026 11:26am

@nucliweb nucliweb merged commit 832424e into main Mar 10, 2026
3 checks passed
@nucliweb nucliweb deleted the fix/critical-css-detection-false-positive branch March 10, 2026 11:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

False positive in Critical CSS Detection with media/onload deferral pattern

1 participant