Fast webpage loading using the all new "HTML import" draft in 2018: replacing rel="stylesheet" with rel="import"

Question

While testing my mobile-friendly page with google page speed analyser it said this:

Eliminate render-blocking JavaScript and CSS in above-the-fold content. Your page has 2 blocking CSS resources. This causes a delay in rendering your page. None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

According to this google page and w3c 2018 March draft soon the web will support HTML import.:

Note that the web platform will soon support loading stylesheets in a non-render-blocking manner, without having to resort to using JavaScript, using HTML Imports.

My first quesion is:

What are the ways to convert old style stylesheets into HTML import?

Can I simply change...

<link rel="stylesheet" type="text/css" href="all.css"/>
<link rel='stylesheet' type='text/css' href='https://fonts.googleapis.com/css?family=etc'/>

...into:

<link rel="import" type="text/css" href="all.css"/>
<link rel='import' type='text/css' href='https://fonts.googleapis.com/css?family=etc'/>

My second question is:

(When) will the web platforms [major browsers like Chrome, Edge, Firefox and major server technologies like php 7.2 on apachee] be ready to safely make the move site wide from rel="stylesheets" to rel="import"?

My third bonus question is:

Aside from a small performance gain according to google, will there (in the future) be any down sites in using HTML import versus the old rel="stylesheet"?

Answer 1

You cannot simply convert a stylesheet <link> into an import <link> because <link rel="import"> will load only a HTML document, not a CSS stylesheet.

<link rel="import" href="imported-styles.html" async>

Therefore, the styles imported via HTML Imports must be included into elements:

imported-styles.html:

<style> 
    //content of all.css
    ... 
</style>

Alernately use standard <link rel="stylesheet">:

imported-styles.html:

<link rel="stylesheet" type="text/css" href="all.css"/>
<link rel='stylesheet' type='text/css' href='https://fonts.googleapis.com/css?family=etc'/>

Note that you should use the async attribute if you don't want to wait for the imported document to be loaded before processing the rest of the main HTML document.

---

By now only Chrome and Opera are implementing HTML Imports natively. Other browser vendors don't plan to implement it, so you'll need to use a polyfill with Edge and Firefox.

It's a cient-side technology so the server frameworks are not really concerned.

The downside in using HTML Imports is that, in some special situations, the behaviour could be slightly different with polyfilled implementations (which is true with most polyfills). See the limitatons of the polyfill.

Answer 2

First question

There is no way by now. HTML Imports are a way to include and reuse HTML documents in other HTML documents, see HTML Imports docs.

Second question

It's Hard to tell when rel="import" will be widely available, but you can easily track browser support on Can I Use website https://caniuse.com/#search=import, It also shows if the next version to release will support it.

Third bonus question

rel="import" is to import HTML files.

rel="stylesheets" is to import CSS files.

You still need to use rel="stylesheets" to load your CSS files.

Answer 3

HTML Import is actually being deprecated, although it's implemented already in Chrome. So don't use it.

https://dev.to/nektro/the-downfall-of-html-imports-is-upon-us-to-me

A similar feature which is called "HTML Module" will be introduced in the future, but even the standard itself is still being discussed on Github, so it'll take a long long time for us to be able to use it.

https://github.com/dglazkov/webcomponents/blob/html-modules/proposals/HTML-Imports-and-ES-Modules.md