Render-blocking CSS

With Google now ranking how fast your sites loads, I’ve been putting a lot more emphasis on website speed (more than normal). I’ve read at least 20 articles or more on how to eliminate render block and or with the use of media queries.

I have quite a few stylesheets (image below), and with this comes render blocking css. They say to eliminate render blocking is inline style everything above the fold (that doesn’t necessarily work with responsive site, or it becomes an excessive amount of inline styles) or you run into the issue of FOUC (flash of unstyled content).

I would prefer to do eliminate the render blocking css through media queries. I realize no matter how style sheets you have whether or not there sized for a particular screen the browser is going to download all of them. Seeing as this is the case I have all of my styles with the exception of a few, all in one style sheet.

Is it possible to pull all media queries from one style sheet to to eliminate the need to have 5 separate style sheets.

for example:

 <link rel="stylesheet" media="screen and (min-width:320px)" type="text/css" href="assets/styles/layout-pages.min.css"> 
 <link rel="stylesheet" media="screen and (min-width:400px)" type="text/css" href="assets/styles/layout-pages.min.css"> 
 <link rel="stylesheet" media="screen and (min-width:690px)" type="text/css" href="assets/styles/layout-pages.min.css"> 
 <link rel="stylesheet" media="screen and (min-width:960px)" type="text/css" href="assets/styles/layout-pages.min.css"> 

I’ve tried but it still held my “layout-pages.min.css” as render blocking. So I’m entirely sure where I’m going wrong or if this is even correct way to pull from one style sheet.

Image of website speed test (not all css is still there)

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.