Skip to main content

Performance Optimization

🤖WARNING
The English translation was done by AI.

Website Loading​

  • Server-side rendering (SSR)

Performance Monitoring​

  • pageSpeed
  • lighthouse
  • web-vitals

Performance Metrics​

  • FCP
  • LCP
  • FID
  • CLS

Caching​

API Caching​

For content that doesn't often change, API caching can be used, such as for category pages.

Caching Medium​

  • Redis for server-side rendering, example
  • localStorage for client-side rendering

Network​

  • Reduce HTTP requests (for HTTP2 and below)
  • Use HTTP2
  • HTTP cache 304
  • DNS prefetching, use <link rel="dns-prefetch" href="https://fonts.googleapis.com/"> to prefetch third-party websites
  • Enable gzip
  • DNS cache (Node.js)

JS​

  • Use web workers for high-computation tasks
  • Use requestAnimationFrame for smooth animations and frame rate optimization
  • Event delegation

CSS​

  • Minimize CSS repaints and reflows
  • Place CSS at the top and JS at the bottom (JS loading and execution block HTML parsing, or use defer)
  • Reduce CSS selector complexity

Static Resources​

Prioritize using CDNs

JS​

  • Lazy loading (code splitting)
  • documentFragment
  • Script loading Script Loading

Images​

  • Image lazy loading
    • Native
    • getBoundingClientRect
    • IntersectionObserver
  • Webp format
  • Progressive image optimization
  • Responsive images
  • Use semantic HTML tags
  • Reduce unnecessary elements and nesting
  • Images should have clear and meaningful alt descriptions
  • Specify image width and height, especially for above-the-fold images that affect CLS
  • TDK (react-helmet)
    • title
    • description
    • keywords
  • Structured data - application/ld+json
  • Prevent crawling of certain links by search engines using <a href="xxx" rel="nofollow">
  • Specify canonical landing page with <link rel="canonical" href="https://alanwang.site">, preventing crawlers from crawling https://alanwang.site?name='alan'
  • Proper usage of h1 and h2 tags