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

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"?

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.