Current time: 10-22-2018, 07:41 AM 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
Hi

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="this.media='all'">

Using alternate -
<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">
OR
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 


Messages In This Thread
How to Identify non-render blocking (async) css using javascript - rasam25 - 06-01-2018 10:08 PM

Forum Jump:


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