Skip to content

Eliminate render-blocking resources #17966

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
geetika-kathuria opened this issue Jun 19, 2020 · 6 comments · Fixed by #19449
Closed

Eliminate render-blocking resources #17966

geetika-kathuria opened this issue Jun 19, 2020 · 6 comments · Fixed by #19449
Assignees
@alan-agius4
Labels
area: @angular-devkit/build-angular devkit/build-angular:browser feature Issue that requests a new feature severity4: memory/performance
Milestone
Backlog

Comments

@geetika-kathuria
Copy link

Team,

I'm getting the following recommendation using lighthouse
Screen Shot 2020-06-19 at 1 14 42 pm

Even for a base application with no content, its complaining about styles.css
After adding my own code, I'm sure it will reduce the performance score even further.

So the question is either is it a known bug and if yes, can you please point me to the issue tracker/expected fix? Or are there any best practices that I'm totally missing?

Apologies if its a basic question but I can really appreciate some help.

Thanks,
Geetika.
@ngbot ngbot bot modified the milestone: needsTriage Jun 19, 2020
@alan-agius4 alan-agius4 added the needs: investigation Requires some digging to determine if action is needed label Jun 19, 2020
@geetika-kathuria
Copy link
Author

geetika-kathuria commented Jul 30, 2020 •
edited
Loading

@alan-agius4 any update on this issue?

@alan-agius4
Copy link
Collaborator

Hi @geetika-kathuria, we are currently liaising with the Chrome team to find a solution for this.

@geetika-kathuria
Copy link
Author

@alan-agius4 Thank you for your prompt response.

@alan-agius4 alan-agius4 mentioned this issue Aug 1, 2020
Closed
@djouf007
Copy link

Any update for this ?

@alan-agius4 alan-agius4 mentioned this issue Sep 8, 2020
Closed
@alan-agius4
Copy link
Collaborator

We have created an RFC for this, kindly see: #18730

@alan-agius4 alan-agius4 added the feature Issue that requests a new feature label Sep 9, 2020
@ngbot ngbot bot modified the milestones: needsTriage, Backlog Sep 9, 2020
@alan-agius4 alan-agius4 removed the needs: investigation Requires some digging to determine if action is needed label Sep 9, 2020
@alan-agius4 alan-agius4 self-assigned this Sep 22, 2020
This was referenced Nov 20, 2020
Closed
Merged
clydin pushed a commit that referenced this issue Dec 4, 2020
@alan-agius4 @clydin
feat(@angular-devkit/build-angular): enable inlining of critical CSS …
eb30a92 
…optimizations

This is another feature that we mentioned in the Eliminate Render Blocking Requests RFC (#18730)

Inlining of critical CSS is turned off by default. To opt-in this feature set `inlineCritical` to `true`.

Example:
```json
"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "optimization": {
      "styles": {
        "minify": true,
        "inlineCritical": true,
       }
    },
```

To learn more about critical CSS see;
https://web.dev/defer-non-critical-css
https://web.dev/extract-critical-css/

In a future version of the Angular CLI `inlineCritical` will be enabled by default.

Closes: #17966
Closes: #11395
Closes: #19445
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jan 24, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@alan-agius4 alan-agius4

Labels
area: @angular-devkit/build-angular devkit/build-angular:browser feature Issue that requests a new feature severity4: memory/performance
Projects
None yet
Milestone
Backlog
Development

Successfully merging a pull request may close this issue.

feat(@angular-devkit/build-angular): enable inlining of critical CSS optimizations
3 participants
@alan-agius4 @geetika-kathuria @djouf007