Skip to content
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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve site performance metrics #3224

Open
wants to merge 18 commits into
base: main
Choose a base branch
from

Conversation

Blargian
Copy link
Member

@Blargian Blargian commented Feb 7, 2025

Summary

Various improvements to pull up site vitals:

  • adds docusaurus faster (closes Explore docusaurus-faster #3209)
  • add defer and async where missing on tags
  • add preconnect resource hints for external scripts
  • remove client side rerouting and move it to vercel instead (this is better for SEO in any case)
  • lazy load code blocks
  • extract critical css
  • remove some unused styles, fonts etc

Checklist

@Blargian Blargian marked this pull request as ready for review February 9, 2025 22:16
@Blargian
Copy link
Member Author

Blargian commented Feb 12, 2025

CC @gingerwizard

Implemented critical CSS extraction (critical CSS gets stripped from the bundled css and inserted directly into a style tag inside the head of html pages)... disappointing results. Shown top to bottom - current site (clickhouse.com), vercel preview with various changes (docusaurus faster, lazy loading code blocks, resource hinting etc), vercel preview with added critical css extraction:

Screenshot 2025-02-12 at 10 10 36

So essentially no benefit for added complexity, added build time to inject the CSS into all HTML elements + still need to spend more time on it as rendering looks bad with local development server (yarn start).

Focusing on all other improvements made (excluding CSS extraction):

Screenshot 2025-02-12 at 10 18 26

Loss of points on performance due to total blocking time:

Screenshot 2025-02-12 at 10 20 44

Screenshot 2025-02-12 at 10 22 05

I'm not sure how much control we really have over a lot of these. Reducing page sizes will help, but in the case of settings, functions etc it will take a big effort to restructure. Pages like this get flagged as good pages, and the only noticeable difference I can see is that the page is shorter.

The size of the main.js bundle is directly tied to how many routes we have. This is a known issue with docusaurus, and something they will improve over time: facebook/docusaurus#7256

Screenshot 2025-02-12 at 10 26 15

Performance improvement from around 40% to around 70% is already substantial + issues with FCP, LCP, CLS are fixed. I'd recommend we revert the CSS extraction changes and stop here for now, validate the fix on search console and see in 28 days if we need to further improve performance. Thoughts?

@Blargian Blargian force-pushed the improve_site_vitals branch from 988f68c to ff8807c Compare February 12, 2025 17:33
@gingerwizard
Copy link
Contributor

@Blargian my only concern is rendering issues. Painfully we probably need to sample a decent number of pages. Otherwise, if the improvements are significant merge and do further work under a new PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Explore docusaurus-faster
2 participants