Feature request: option to add attributes to style tag for styles added via angular-cli.json to index.html

[cmddavid]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [X] feature request

Versions.

All versions

Repro steps.

Not relevant, new feature

The log given by the failure.

Not relevant, new feature

Desired functionality.

I would like to be able to set the media and onload attribute to styles added via angular-cli.json to index.html so I can prevent "render blocking" CSS for my application. The docs at https://github.com/angular/angular-cli/wiki/angular-cli don't mention anything about this being possible. My research on this matter seems to tell me this is not yet possible but it would be crucial to achieve a perfect score on Google Pageinsights.

This feature would also help to make CSS work only for specific devices, for example mobile, web, print.

Mention any other details that might be useful.

More info on render blocking CSS and how it can be prevented:
http://keithclark.co.uk/articles/loading-css-without-blocking-render/

Good to know: I'm using Angular Universal starter

[clydin]

Something to note is that critical CSS should be blocking as it is required for first render. For non-critical CSS, that blog post is unfortunately outdated. For a modern approach, a suggestion would be this: https://github.com/filamentgroup/loadCSS . It leverages preload hint support and polyfills it on browsers that do not support it.

Also, modern web browser are quite good at performing preloading analysis of html and scheduling asset downloading. However, usage of preload and prefetch, where appropriate, to provide hints to the web browser of assets within CSS and/or javascript can provide additional performance benefits. Assets that could be considered in this regard include web fonts or CSS-based background images.

[cmddavid]

@clydin Google Pageinsights suggests to use inline CSS for the "above the fold" content. That way you can atleast make the page look like it has fully loaded even though it is still retrieving the CSS required for the "below the fold" content.

[clydin]

Closing in favor of #11395 which has more discussion on the topic.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}