-
Notifications
You must be signed in to change notification settings - Fork 483
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.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
inlineCriticalCss + extractCss have problems with global styles that can cause layout shifts #1918
Comments
Hi @akaufmann, thanks for trying this new feature and the provided feedback. Let me start by explaining the difference between extractCssThis option enables extraction of CSS from inlineCriticalCssCritical CSS is extracted and inlined into the HTML during rendering. This should improve FCP and reduce render blocking requests. I tired to replicate the the above, using the steps you provided.
The results are the below, I am not going to test using Without inlineCriticalCssWith inlineCriticalCssI'll try to continue looking at this in the coming days, however, it would be great if you can share your project (even privately), or minimal reproduction as a Github project. Thanks. |
This comment has been minimized.
This comment has been minimized.
Thanks @alan-agius4 for the quick reply. I adjusted the headline for each test in my first comment to make it clearer what was set to
The I see higher CLS with Here are the numbers I see with both set to When I set |
Thanks for the repro @akaufmann, I will look at it in next couple of days. |
Hi @akaufmann, I did take a look at the reproduction and found that;
|
Hi @alan-agius4!
Yes correct, I see that too. In both cases, the numbers for LCP fluctuate in the same range for multiple runs. Thanks @alan-agius4 for finding time to look at this so quickly and creating a fix in the Critters repo. |
The reason why LCP is fluctuating is because the duration of fetching external font resources varies between runs. |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
馃悶 Bug report
What modules are related to this issue?
Is this a regression?
No
Description
I tested the new experimental
inlineCriticalCss
and there are some issues with global styles defined under"styles": [...]
in the angular.json file......for example the
/src/styles.[s]css
or NG Material themes. To make global styles work withinlineCriticalCss
you must useextractCss: true
to inline some of these styles otherwise they will be added at runtime. However, this causes some selector errors in the console. So I measured the performance of different solutions with Lighthouse (Chrome 87).inlineCriticalCss:true + extractCss:true
With this combination you get styles errors in the console. For example for NG Material.
inlineCriticalCss:true + extractCss:false
inlineCriticalCss:false + extractCss:true
PS. Ignore the problems that affect the run of Lighthouse. It was audited in an incognito window but Firebase is used and writes to IndexedDB.
tl;dr
In the current form of
inlineCriticalCss
it looks like you get the best performance (because of lower LCP & CLS) with global styles that can cause layout shifts withoutinlineCriticalCss
andextractCss
set to true.馃敩 Minimal Reproduction
.foo { display: flex; }
when applied later and/or a NG Material theme to thestyles
option in your angular.json file.inlineCriticalCss
andextractCss
in the appropriate files.NODE_ENV=production ng build --prod && ng run <projectName>:server:production
.node dist/server/main.js
.馃實 Your Environment
The text was updated successfully, but these errors were encountered: