Skip to content

Conversation

alan-agius4
Copy link
Collaborator

@alan-agius4 alan-agius4 commented Sep 26, 2024

Implement LRU cache for inlined CSS in server-side rendered HTML.

This optimization significantly improves server-side rendering performance by reusing previously inlined styles and reducing the overhead of repeated CSS inlining.

Performance improvements observed:

  • Latency: Reduced by ~18.1% (from 1.01s to 827.47ms)
  • Requests per Second: Increased by ~24.1% (from 381.16 to 472.85)
  • Transfer per Second: Increased by ~24.1% (from 0.87MB to 1.08MB)

These gains demonstrate the effectiveness of caching inlined CSS for frequently accessed pages, resulting in a faster and more efficient user experience.


Edit: Previously the numbers were calculated not using the Average but the Max.

@alan-agius4 alan-agius4 added action: review The PR is still awaiting reviews from at least one requested reviewer target: major This PR is targeted for the next major release labels Sep 26, 2024
@alan-agius4 alan-agius4 force-pushed the cache-inline-css branch 3 times, most recently from 88632fc to a73a101 Compare September 26, 2024 17:07
@alan-agius4 alan-agius4 reopened this Sep 26, 2024
@alan-agius4 alan-agius4 force-pushed the cache-inline-css branch 7 times, most recently from af25675 to f9d0e38 Compare September 27, 2024 09:39
Copy link

@AndrewKushnir AndrewKushnir left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

There is one comment about throwing an error vs doing a fallback for hashing algorithm, but we can do a followup PR with extra changes if needed (i.e. comments are non-blocking for merge).

Implement LRU cache for inlined CSS in server-side rendered HTML.

This optimization significantly improves server-side rendering performance by reusing previously inlined styles and reducing the overhead of repeated CSS inlining.

Performance improvements observed:
Performance improvements observed:
* **Latency:** Reduced by ~18.1% (from 1.01s to 827.47ms)
* **Requests per Second:** Increased by ~24.1% (from 381.16 to 472.85)
* **Transfer per Second:** Increased by ~24.1% (from 0.87MB to 1.08MB)

These gains demonstrate the effectiveness of caching inlined CSS for frequently accessed pages, resulting in a faster and more efficient user experience.
@alan-agius4 alan-agius4 added action: merge The PR is ready for merge by the caretaker and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels Sep 30, 2024
@alan-agius4 alan-agius4 merged commit 12ff37a into angular:main Sep 30, 2024
30 checks passed
@alan-agius4 alan-agius4 deleted the cache-inline-css branch September 30, 2024 06:42
@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 Oct 31, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: merge The PR is ready for merge by the caretaker area: @angular/ssr target: major This PR is targeted for the next major release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants