CODEWITHSUNDEEP
cssrender-blocking
RedoColor
RedoColor

Reputation: 145

Elimiate CSS render-blocking, best way

i want to eliminate the render blocking from my website, but i can't. I don't use external css files, or fonts, only just a big css file. When i copyall content from css file in head AllcontentCSS, render blocking disappear from Google Page Insights Is there a way to eliminate render blocking and include the css file with link in head instead to copy all css in style tag or is good to insert the css in body tag?

Upvotes: 0

Views: 158

Answers (1)

tao
tao

Reputation: 90068

You are most likely looking for:

<link rel="stylesheet" href="yourFile.css" media="none" onload="if(media!='all')media='all'">

But, before you proceed, please read the following resources detailing the technique and its limitations:

Make sure you also go through the links provided by Taylor Hunt. You probably want to use loadCSS function/polyfill from Filament Group.

But be aware this technique will cause FOUC on your page. You should divide your CSS into two parts:

  • layout basics (load normally - render blocking),
  • async styles (load async).

Upvotes: 1

Related Questions