Blog/home page: Improve core web vitals

[hunghvu]

• First contentful paint (FCP)
  • Avoid chaining critical request

• Largest contentful paint (LCP)
  • Hight time to first byte (TTFB) and render delay.

• Total blocking time
  • Avoid an excessive DOM size (cut in half by UI overhaul in Move blog (home) page to server component #91 and Consider the use of animated svg (created), for background. #92)
  • Minimize main-thread work (largely reduced by SRR in Move blog (home) page to server component #91)
  • Reduce JavaScript execution time (largely reduced by SRR in Move blog (home) page to server component #91)
  • Avoid long main-thread task (largely reduced) by SRR in Move blog (home) page to server component #91)/

• Cumulative layout shift (CLS)
  • This is more of an issue between PrimeReact and Tailwind, we will see if there is a more reliable workaround compared to a importing a large CSS file: Flash of unstyled content (FOUC) primefaces/primereact#5188

[hunghvu]

Note, that due to #91 and #92, the layout was substantially changed. Although the measurement is different, the core idea of this ticket remains. The pictures below is from running next start on local next build.

FCP

LCP

TBT

CLS

[hunghvu]

With 35d936, it shifts the LCP measurement to this.

[hunghvu]

It might not be trivial to improve FCP in appDir:

• optimizeCss doesn't include any inline style vercel/next.js#53863
• Add support for critical CSS inlining with App Router vercel/next.js#57634

[hunghvu]

If we can optimize the import of CSS, then hljs (CSS + JS), perhaps LCP will decrease. Or is it simply due to sheer length and need lazy loading?

[hunghvu]

If it is not trivial to add inline critical CSS, then we can consider purging (PurgeCSS) or minifying CSS (CSS Nano).

CSS Nano does not seems to work with Next.js, because CSS Nano is internally used by Next.js (big question mark? Only applied to .module.css?)

[hunghvu]

Two points to think about.

• Why is LCP still high even with server components?
• How to reduce unused bytes?
  

[hunghvu]

In fd4c940, it seems either due to @tailwind resides in layers, or due to misconfiguration because tailwind.config.js resides in another package (path issue?), Tailwind JIT does not work. This causes all Tailwind CSS are delivered to production, causing a large amount of unused CSS bytes.

Besides, removing PrimeReact node_modules from tailwind config content did something. In short,

• Before the change: Total size 64k, unused 27k
• After change, with PrimeReact node_modules included: Total size 64k, unused 58k (?)
• After change, with PrimeReact node_modules remove: Total size 12k, unused 4k!!

[hunghvu]

We will go ahead and finish the optimization process here. There are still 2 unresolved issues, which will be for future tasks.

• High LCP, especially render delay. It seems impossible to remove that even when we have only a barebone Next.js application, or is there some misconfiguration?
• Inline critical CSS, no official support for app router, leading to blocking render requests (CSS).