posted

How to load CSS Asynchronously

i am getting error at google pageinsights

Eliminate render-blocking resources

Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles.

there is one css is blocking load so i want to load it with async tag but it dont work

Edit Question

denyy
answered Apr 25 '23 00:00

Loading CSS asynchronously can improve page loading times and overall user experience. Here's one way to load CSS asynchronously in HTML:

1.Add the following code to the head section of your HTML document:


<link rel="stylesheet" href="path/to/stylesheet.css" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="path/to/stylesheet.css"></noscript>

2.This code includes the CSS file with a media ="print" attribute that will prevent it from being loaded initially. Once the file has loaded, the onload event will change the media attribute to " all ", which will allow it to be used.

3.In the noscript section, include a fallback stylesheet that will be loaded if the user has disabled JavaScript.

By loading the CSS asynchronously in this way, the page content will be displayed without waiting for the CSS to load. Once the CSS is loaded, it will be applied to the page without requiring a page reload.

Edit Answer

posted

How to load CSS Asynchronously

denyy answered Apr 25 '23 00:00

Latest Questions

Insert link

Insert image

denyy
answered Apr 25 '23 00:00