The obvious and immediate caveat is that now the whole HTML document is huge! In this example page the whole HTML document is 127KB (20KB gzipped) whence the regular one is 4.1KB (1.4KB gzipped). So does the problem of having to load JavaScript tricks to make the CSS loading non-blocking. The Flash of Unstyled Content problem goes away. Why not?! It has to be downloaded sooner or later anyway, might as well nip it in the bud straight away. *! * Bootstrap v4.0.0-beta () * Copyright 2011-2017 The Bootstrap Authors * Copyright 2011-2017 Twitter, Inc. css files downloading is delayed until after the lazyloadcss.js has loaded and executed. It's not as hot in Firefox because all the. css files start downloading before the lazyloadcss.js file has even started downloading. As seen in this Webpagetest using Chrome the. It works and the rel="preload" is a bonus for Chrome and Opera users because once the JavaScript "kicks in" the network loading is quite possible already done. It uses the scripts and techniques laid out by filamentgroup's loadCSS. You still have the Flash of Unstyled Content effect to confront and that's annoying. The basics is that you load a piece of JavaScript late which, as soon as it can, puts the into the DOM. Note, loadCSS contains a polyfill solution to the rel="preload" thing. It used to only work in Chrome and Opera but will soon work in Firefox and iOS Safari too. In particular the rel="preload" feature is getting more and more established. This technique is best done with loadCSS which can be done really well if you tune it. With JavaScript you can put in code that's definitely going to be executed after the rendering starts and, also, after the first rendering is finished (i.e. You can see in this Webpagetest that the "Start render" happens after the. In other words, not really a good solution at all. So it's not like JavaScript whereby putting it late in the DOM. Chrome and iOS actually block the rendering still. "FOUT") effect where the user is presented with the page very briefly without any styling, then the whole page re-renders onces the stylesheets have loaded. The only problem is that pesky "Flash of Unstyled Content" (aka. It's valid HTML5 and seems to work just fine in Safari iOS. The simplest solution is to simply move any out of the and put them just before the tag. What to do about it? Well, make it not blocking. Check out this Webpagetest Visual Comparison that compares two pages that are both styled with except one of them uses a piece of JavaScript at the bottom of the page that enables the stylesheet after the page has loaded. See Ilya Grigorik's primer on Render Blocking CSS. Or perhaps they visit sometimes but rarely enough that by the time they return their browser cache will have "moved on" and reset (to save disk space) what was previously cached. However if you care about loading performance (judging by the fact that you're still reading), you know that a large majority of your visitors only come to your site sometimes (according to Google Analytics, 92.7% of my visitors are "new visitors"). Even better, if it's cached by a service worker. If the URL is in the user's cache, great. What's important is that it's yet another thing that needs to be downloaded before the page can start to render. Really big.Īctually the size difference isn't hugely important. These CSS frameworks are super useful because they make your app look pretty. They're large blobs of CSS for doing all sorts of types of HTML (e.g. Point number 2 basically boils down to the likely fact that your app depends on like Bootstrap, Bulma or Foundation. It does this because it doesn't want to have to paint the DOM (as it would look like without CSS) and then repaint the DOM again, this time with CSS rules. GET /) as it parses the HTML document it sees that there and decides to not render any DOM to screen until that CSS file has been downloaded and parsed. Why? Because when the browser downloads your HTML (e.g. But what's even faster is to include the CSS with the HTML that the server responds in the first place. Things like HTTP2 and CDNs and preload are nice because they make the network lookup for your file as fast as possible. You use some CSS framework kitchen sink because you're not a CSS guru. The fastest performing web page is one that isn't blocked on rendering. Tl dr The ideal web performance, with regards to CSS, is to inline the minimal CSS and lazy load the rest after load.
0 Comments
Leave a Reply. |