Css Progressive Loading in Chrome

CSS Progressive Loading in Chrome
by Janeth Kent Date: 09-05-2017 css chrome


Until now, only in IE/Edge could we leverage streaming of CSS to load progressively the CSS of the components as their HTML is streamed. In other browsers, they would normally block rendering till the entire CSS sources were loaded, giving us the white screen of wait before anything could render. With the latest Chrome Canary, Google has picked the CSS streaming idea from IE/Edge and is in the process of an open discussion to start its standardization by working on its specification.

<head>
  <link rel="stylesheet" href="/yourstyles.css">
</head>
<body>
  …content…
</body>

Right now, CSS blocks rendering leaving the user to a white screen, until yourstyles.css is completely downloaded.

It’s a common practice to bundle our site’s CSS only in one or two files. This might lead to the user downloading the CSS which might not be currently needed for the page he has landed on. Now, you may ask, why is it even a common practice to do so? Because delivering component level (a web page is made of many components, for example, header, chat, navigation bar, footer, etc.) CSS means fetching multiple CSS files (in HTTP/1) which can further elongate that white screen of wait.

However, this isn’t the case in the next gen HTTP/2 protocol, where many small resources can be delivered with a little overhead and can be independently cached.

<head>
  <link rel="stylesheet" href="/header.css">
  <link rel="stylesheet" href="/article.css">
  <link rel="stylesheet" href="/chat.css">
  <link rel="stylesheet" href="/about-me.css">
  <link rel="stylesheet" href="/footer.css">
</head>
<body>
  …content…
</body>

HTTP/2 solves multiple fetches slowing down a page download problem. But it means that you need to know what the page will contain when you are outputting the contents of the head tag. Also, the browser will still have to download all the CSS before anything is rendered for the user. That is, a slow loading footer will delay rendering for everything.

There’s a quick hack for it. You could inline your critical CSS so that you can style your major components or containers, and then async-sort-of lazy load the CSS later. But the biggest problem with inlining critical CSS is, that you have to set display: none to many components whose CSS hasn’t been loaded yet. When that CSS resource is loaded, things move here and there like this.

<link rel="stylesheet"> blocks rendering of subsequent content while the stylesheet loads, but allows the rendering of content before it.

The stylesheets load in parallel, but they apply in series.

This makes <link rel="stylesheet"> behave similar to <script src="…"></script>.

<head>
</head>
<body>
  <!-- HTTP/2 push this resource, or inline it, whichever's faster -->
  <link rel="stylesheet" href="/header.css">
  <header>…</header>

  <link rel="stylesheet" href="/article.css">
  <main>…</main>

  <link rel="stylesheet" href="/chat.css">
  <section class="comments">…</section>

  <link rel="stylesheet" href="/about-me.css">
  <section class="about-me">…</section>

  <link rel="stylesheet" href="/footer.css">
  <footer>…</footer>
</body>

Let’s say the header, article, and footer CSS have loaded, but the rest are still pending, here’s how the page would look:

  • Header: rendered
  • Article: rendered
  • Chat: not rendered, CSS before it(the HTML) hasn’t loaded yet (/chat.css)
  • About me: not rendered, CSS before it hasn’t loaded yet (/chat.css)
  • Footer: not rendered, CSS before it hasn’t loaded yet (/chat.css), even though its own CSS has loaded

This helps sequentially render the page. One doesn’t have to decide which parts of the page, what containers and layouts should one inline and then change the display: none to show the incoming CSS changes. It’s fully streaming compatible because one doesn’t need to output the link until just before one needs it. CSS Resources Load Progressively.

But did you see something peculiar? Did you? You didn’t see THE LINK TAGS IN THE BODY?  Didn’t it seem strange?

The HTML spec doesn’t cover how CSS should block page rendering, and it discourages <link rel="stylesheet"> in the body, but all browsers allow it. Of course, they all deal with link-in-body in their own ways:

  • Chrome & Safari: Stops rendering as soon as the <link rel="stylesheet"> is discovered, and won’t render until all discovered stylesheets have loaded. This often results in unrendered content above the <link> being blocked.
  • Firefox: <link rel="stylesheet"> in the head blocks rendering until all discovered stylesheets have loaded. <link rel="stylesheet"> in the body does not block rendering unless a stylesheet in the head is already blocking rendering. This can result in a flash of unstyled content (FOUC).
  • IE/Edge: Blocks the parser until the stylesheet loads, but allows content above the <link> to render. This is the pattern on the lines of which Chrome Canary has shipped progressive CSS rendering like explained in this article.
 
by Janeth Kent Date: 09-05-2017 css chrome hits : 2504  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.

 
 
 

Related Posts

The easiest way to align items using flexbox

With the release of flexbox in CSS, it has become an essential tool when placing elements next to each other, since, by default, the children of a display: flexare stacked…

Dark Mode on website using CSS and JavaScript

In today’s article we are going to learn how to build pretty much standard these days on the web pages and that is the alternative color mode and switching between…

How To Add Filter Effects to Images with CSS

To achieve interesting effects on your images, learn about the 'filter' and 'Backdrop-Filter' properties of CSS. CSS filters are a very attractive feature of CSS that allows you to apply certain…

Introduction to BEM (Block Element Modifier)

Problems with naming CSS classes I think I might not be the only one with this experience: after finally grasping all the important concepts regarding CSS I wanted to start giving…

Styling React components: recommendations and suggestions

With CSS we can set the presentation of a document through the rules that control the formatting of an element on a web page. Using CSS techniques, we can make…

How To Create a Logo SVG Animation Using Only CSS

Web animations are a joy. They enhance the user experience by providing visual feedback, guiding tasks, and vitalize a website. Web animations can be created in several ways, including JavaScript libraries,…

CSS in JavaScript (CSS-in-JS) Vs CSS in CSS

What actually is CSS-in-JS? You've certainly heard or read words like CSS-in-JS, Styled Components, Radium, Aphrodite and you're and you're stuck in limbo there, "why is it? I'm completely happy about CSS…

Best 5 Frontend Development Topics in 2019

Ah, a new year. A time of positivity, a time to restart. For new objectives and proposals. And in the world of developers, to look at the scenery and decide…

A roadmap to becoming a web developer in 2019

There are plenty of tutorials online, which won't cost you a cent. If you are sufficiently self-driven and interested, you have no difficulty training yourself. The point to learn coding…

The Absolute Beginner's Guide to Sass

You've probably heard about CSS preprocessors before, whether it's Sass, LESS or Stylus, and they're all great tools to maintain your CSS, especially when you work with large codebases. For…

How To Build A Presentation Using HTML, CSS, & JavaScript

The process of conceiving and constructing a presentation is often hard. Sometimes we're stuck with Keynote or PowerPoint, and the templates are extremely limited and generic. Today, we're going to learn how…

Parallax Landscape Scenes Built Entirely With CSS and HTML

Web design trends come and go, but the parallax effect has, well, stuck around. Parallax scrolling has had a big impact on user interface design, on both websites and mobile…

We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking "Accept all" you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select "System Cookies Only" to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on "settings".

Accept All Only sistem cookies Configuration