Skip to content

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
Collaborator

@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.

Copy link
Collaborator

@gingerwizard gingerwizard left a comment

Choose a reason for hiding this comment

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

minor changes please on comments and new lines

@@ -0,0 +1,47 @@
import React, {useState, useRef, useCallback, useEffect} from 'react';
Copy link
Collaborator

Choose a reason for hiding this comment

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

@lio-p this is where our code block will go. Pay attention to lazy-loading - @Blargian found this to important for google site metricsw

@Blargian Blargian merged commit e2579b7 into ClickHouse:main Feb 15, 2025
6 checks passed
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