kangax
Feature Request: Support to convert css link tags to async/preload tags
This plugin does a great job.
Here's a feature request to please add support to convert css link tags to async/preload tags
for example convert
<link rel="stylesheet" href="styles.117bbb465e9c23da0dcf.css">
to
<link rel="stylesheet" href="styles.117bbb465e9c23da0dcf.css" media="print" onload='this.media="all",this.onload=null'>
I think this is out of scope of this library which does only and should only do compression.
onload='this.media="all",this.onload=null'
This is not really how async / preload natively works. I guess you mean the async attribute and rel="preload".
Thank you so much @DanielRuf fro your response.
I am actually referring to a solution which is used to eliminate render blocking stylesheets. As mentioned here https://stackoverflow.com/a/46750893/2755616 .
I know its primarily a html minification plugin, but this could be an added feature, maybe available behind some flag, so that users can enable by passing a parameter e.g asyncCSS=true when desired.
I think this is out of scope of this library which does only and should only do compression.
I still think it's nothing that should be done by this library. There are probably already other solutions (plugins for gulp, webpack, ...) which do this.
The library is about saving bytes / compressing your input, not performance improvements by adding code.
Ok, can you please point out any which can be run through command line? Thanks
And also see https://caniuse.com/#feat=link-rel-preload and https://caniuse.com/#feat=script-async
https://www.npmjs.com/search?q=async%20stylesheet https://github.com/search?q=async+stylesheet https://github.com/devpreview/async-stylesheet-webpack-plugin
But personally loading styles asynchronically makes not much sense in most cases (FOUT, FOIC, ...).
I guess you can use any regex / search&replace solution.
Thank you so much @DanielRuf for sharing these, really appreciate :)
But personally loading styles asynchronically makes not much sense in most cases (FOUT, FOIC, ...).
Yes I agree, but it could be useful when the css for the critical path and above the fold item is already inlined in the html file.
In my case its an Angular app, and during the build process the Angular CLI automatically generates the filename for style sheet and adds it to the index.html. What I want is after the Angular CLI has generated the output, I run some command line npm plugin which converts stylesheet tag to async tag as mentioned above.
https://www.npmjs.com/package/inline-critical has a CLI that might cover your usecase.
Thanks again @DanielRuf .
I just tried this, but it has two issues:
- It requires css file name in advance
- It prints html output on console instead of updating the html file.
- I tried it with hardcoded files(html and css) like
inline-critical dist/index.html dist/styles.3818ec537453af2e8d93.css -p, but the html printed on console contains empty<head>tag.
I will explore it further, and search for other plugins as well.
I know its not appropriate to do these conversation on github issues .
Thank you once again for your time :)
It prints html output on console instead of updating the html file.
See the readme. You want to pipe it to a file using > file.html.
I think it is better if you mention the issues at https://github.com/bezoerb/inline-critical/issues
Thanks, I'll explore it again, if the issue persists I will report the issue.