Best Practices

• Code optimization:
  • Fast CSS styles: CSS Performance.
  • Fast JavaScript code (Effective JavaScript):
    • DOM performance.
    • React performance.
    • Concurrency: asynchronous/web worker.
    • Use monomorphic objects due to shape and inline caches.
    • Use monomorphic function in hot code paths.
• Resources optimization (HTML/CSS/JS/Images/Audio/Video/Fonts):
  • Remove useless files: Chrome devtool code coverage panel.
  • Code splitting: Webpack splitChunks.
  • Tree shaking.
  • Gzip/Brotli (Accept-Encoding/Content-Encoding).
  • CDN: faster resources.
• Loading performance:
  • PreFetch/PreLoad/PreRendering (SSR).
  • Lazy loading: HTML/CSS/JS/Images/Audio/Video/Fonts.
  • Resources priority hints.
  • Resources loading hints.
• Web caching:
  • Offline caching: PWA.
  • HTTP caching: 强缓存与协商缓存.
  • CDN: shared public caches.
• Network protocols performance:
  • Reducing HTTP requests.
    • 重用 TCP 连接.
    • 多路复用.
    • 减少传输冗余资源.
  • Caching and reducing DNS lookups:
    • Remove too much domains.
    • HTML5 DNS prefetch.
  • Avoid HTTP redirects.
  • CDN: minimize RTT.

Library

Speed tools list:

• WebPageTest
• PageSpeed Insights
• Chrome UX report.
• Chrome DevTools
• LightHouse CI action.
• Chrome audit tab:
  • Performance audit.
  • PWA audit.
  • Best practices audit.
  • Accessibility audit.
  • SEO audit.
• Chrome inspector: chrome://inspect/#devices to start inspecting.

References

• web.dev performance optimization guide.
• web.dev performance newbie course.
• Performance budgets.
• Next.js SEO course.
• The anatomy of a web performance report.