Eliminate render-blocking resources for stylesheets

Question

I have read many times articles about eliminating the render-blocking resources warning on Web.dev for my website but the result is the same.

This is my HTML code inside the header tag :

<link rel="stylesheet" href="https://example.com/assets/inc/bootstrap.min.css" media="all" async>
<link rel="stylesheet" href="https://example.com/assets/inc/fontello.css" media="all" async>
<link rel="stylesheet" href="https://example.com/assets/inc/styling.css" media="all">
<link rel="stylesheet" href="https://example.com/v2/_assets/css/bootstrap-rtl.min.css" media="all" async>
<link rel="stylesheet" href="https://example.com/v2/_assets/css/theme.css" media="all" async>

And I added the async attribute for every stylesheet link I don't want on my first Contentful Paint.

instead of having so many stylesheets, can you not just merge them into one minified sheet? [See this](https://stackoverflow.com/questions/9287823/combine-and-minify-multiple-css-js-files) — Pete, Jan 15 '20 at 14:25
`async` has no effect on CSS stylesheet links so it won't make any difference. — volt, Jan 15 '20 at 14:29
The first things: Load minified css as early as possible in the ``. Load minified javascripts at the bottom above ``. Merge css files. Merge script files. Use async script loading. Load only woff2 and woff font (optional ttf), forget svg and eot. Optionaly use a stylesheet loader (with javascript) but take care to load the page structure without the loader. — bron, Jan 15 '20 at 14:40

bron · Accepted Answer · 2020-01-15T15:23:10.750

This will reduce some loading time of the stylesheets. First, load bootstrap.min.css in the normal way. Then, merge the other css files into one file (minify first if they aren't) and load them with this Javascript.

var LinkHref = 'https://www.example.com/style.css'; // href of <link>
var LinkId   = 'cssStyle1'; // unique id of <link>
if (!document.getElementById(LinkId)) {
  var LinkCss  = document.createElement('link');
  LinkCss.href = LinkHref;
  LinkCss.id   = LinkId;
  LinkCss.rel  = 'stylesheet';
  LinkCss.type = 'text/css';
  document.getElementsByTagName('head')[0].appendChild(LinkCss);
}

Eliminate render-blocking resources for stylesheets

1 Answers1