Tuesday, July 30, 2019

The Simplest Way to Load CSS Asynchronously

Scott Jehl:

One of the most impactful things we can do to improve page performance and resilience is to load CSS in a way that does not delay page rendering. That’s because by default, browsers will load external CSS synchronously—halting all page rendering while the CSS is downloaded and parsed—both of which incur potential delays.

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

Don't just up and do this to all your stylesheets though, otherwise, you'll get a pretty nasty "Flash of Unstyled Content" (FOUC) as the page loads. You need to pair the technique with a way to ship critical CSS. Do that though, and like Scott's opening sentence said, it's quite impactful.

Interesting side story... on our Pen Editor page over at CodePen, we had a FOUC problem:

What makes it weird is that we load our CSS in <link> tags in the <head> completely normally, which should block-rendering and prevent FOUC. But there is some hard-to-reproduce bug at work. Fortunately we found a weird solution, so now we have an empty <script> tag in the <head> that somehow solves it.

Direct Link to ArticlePermalink

The post The Simplest Way to Load CSS Asynchronously appeared first on CSS-Tricks.

from CSS-Tricks https://www.filamentgroup.com/lab/load-css-simpler/

The Simplest Way to Load CSS Asynchronously Find more on: Instant Web Site Tools



source https://www.instant-web-site-tools.com/2019/07/30/the-simplest-way-to-load-css-asynchronously/

No comments:

Post a Comment

40+ Best Minimal Logo Design Templates

Minimalist logo design is an art. How can you convey your brand with a professional logo, but keep the simplicity of a minimal, clean, and s...