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 : 5406  
 
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 AND DEVELOPMENT.

 
 
 

Related Posts

New graphic window units - CSS

''Intercop 2022' is a project announced by Google, Microsoft, Apple and the Mozzilla Foundation to make all browsers offer the same web experience. The project has 15 focus areas and one…

Let's create a Color Picker from scratch with HTML5 Canvas, Javascript and CSS3

HTML5 Canvas is a technology that allows developers to generate real-time graphics and animations using JavaScript. It provides a blank canvas on which graphical elements, such as lines, shapes, images…

Why shouldn't we use black?

Nowadays it is becoming more and more common for web pages to have the option to set them in dark mode, or to base their aesthetics directly on black or…

How to make your own custom cursor for your website

When I started browsing different and original websites to learn from them, one of the first things that caught my attention was that some of them had their own cursors,…

Nesting: future proofing CSS

Although not currently supported by browsers, there is a proposal for CSS nesting to support a feature that would provide better readability to native CSS, so in the future it…

Use the SRCSET attribute to improve your SEO

There is a new standard HTML attribute that can be used in conjunction with IMG called SRCSET. It is new and important as it allows webmasters to display different images…

Starting with Bootstrap-Vue step by step

Today we will show you how to use BootstrapVue, describe the installation process and show basic functionality. The project’s based on the world's most popular CSS framework - Bootstrap, for building…

Bootstrap 5 beta2. What offers?

Since the release of the Bootstrap 4 is three years, in this article we will present what is new in the world’s most popular framework for building responsive, mobile-first sites.…

Creating simple CSS spinner-loader

In today's article we will show you how to animate a basic loader that spins when some predefined action is defined, such as loading an image. That can be used…

How to use Parallax.js effect on your website

Today, we're going to write about the parallax effect, similar to parallax scrolling, and how to implement it to improve your landing page. In webdev, they say mobile first -…

How to make the website's dark mode persistent with Local Storage, CSS and JS

Recently we wrote about how to do a switchable alternative color mode or theme, a very useful and popular feature to websites. Today’s article is going to be about how…

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…

Clicky