Current time: 03-04-2021, 04:22 PM Hello There, Guest! (LoginRegister)

Post Reply 
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
How to Identify non-render blocking (async) css using javascript
06-01-2018, 10:08 PM (This post was last modified: 06-08-2018 08:02 PM by rasam25.)
Post: #1
Question How to Identify non-render blocking (async) css using javascript

I want to track render Blocking & non-blocking CSS using javascript on every pageview on my site

CSS is treated as a render blocking resource but there are async CSS loading approaches such as
Using media tag -
<link rel="stylesheet" href="mystyles.css" media="nope!" onload="'all'">

Using alternate -
<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">
loading CSS in body

I am using async/defer tag to identify non-blocking js, but for CSS I am not able to figure out as my script will execute after onLoad event & will check No of blocking CSS, till the time media/rel attribute value is changed

how webpagetest identify it
Find all posts by this user
Quote this message in a reply
Post Reply 

Forum Jump:

User(s) browsing this thread: 1 Guest(s)