原文地址

https://dev.to/ender_minyard/the-ultimate-guide-to-web-performance-ci4

HTML

✨ Minify HTML
☄️ Order your styles and scripts for pagespeed
⚡️ Eliminate render-blocking resources
🌟 Minimize layout thrashing
🎉 Prioritize resources
✨ Preload critical assets to improve loading speed
💥 Establish network connections early
⚡️ Prefetch resources
🌟 Implement adaptive serving

CSS

⭐️ Minify CSS
✨ Remove unused CSS
💥 Defer non-critical CSS
⚡️ Minimize CSS requests by combining external CSS
🚀 Optimize CSS background images with media queries
⭐️ Avoid CSS inside the body tag
☄️ Inline critical CSS
✨ Avoid expensive styles
💫 Optimize CSS length

Images

✨ Choose the right image format
💫 Choose the correct level of compression
⭐️ Use Imagemin to compress images
💥 Defer offscreen images
⚡️ Properly size images
✨ Replace animated gifs with video
🎉 Serve responsive images
⚡️ Serve images with correct dimensions
🌟 Use WebP images
⚡️ Use AVIF images
🎊 Use image CDNs to optimize images
✨ Use lazy-loading
🚀 Lazy-loading video
⚡️ Use lazysizes to lazy-load images
⭐️ Compress JPEG images
🔥 Optimize PNG images
✨ Optimize SVG vector files

Fonts

💫 Avoid invisible text during font loading
💥 Use preconnect to load fonts faster
⚡️ Optimize Webfont loading and rendering
☄️ Reduce Webfont Size
✨ Keep Webfont size under 300kb

JavaScript

💫 Apply the PRPL pattern
⭐️ Limit the size of NPM dependencies
⚡️ Use code splitting
🌟 Combine external JavaScript
💥 Remove unused code
🎉 Use tree-shaking in Webpack
✨ Minify JavaScript
💫 Serve modern code to modern browsers
🌟 See how CommonJS makes your bundles larger
⚡️ Defer loading JavaScript
⭐️ Prefer Vanilla JavaScript🎊
💡 Use service workers to cache data
🎊 Use web workers
💥 Write optimized code for V8
🎉 Compile your JavaScript to faster JavaScript with Prepack
✨ Compile your JavaScript to faster JavaScript with Closure Compiler

Server

☀️ Use HTTPS
☄️ Keep the size of cookies low as possible
🔥 Avoid bad requests
💫 Set HTTP cache headers
⭐️ Enable gzip and brotli compression
⚡️ Self-host your static asssets
🌟 Enable OCSP stapling
💥 Adopt IPv6
💡 Serve assets over HTTP/2
🎉 Implement HPACK compression
✨ Set proper security headers

Testing Tools

💫 Measure site speed with Pingdom
🌟 Measure site speed with WebPageTest
🎊 Measure performance with the RAIL model
⚡️ Configure Webpack performance hints
⭐️ Use bundlesize
💥 Measure JavaScript execution time
🎉 Use lighthouse-ci
☄️ Use Lighthouse Bot to set a performance budget
☀️ Test on remote real devices
🔥 Use Sitespeed
✨ Use Calibre
💫 Use SpeedCurve
🎊 Use k6
⚡️ Use SpeedTracker

Frameworks

⭐️ Use an ahead of time compiler
💥 Improve Angular performance
☀️ Debug React perfomance
🔥 Eliminate common React issues
✨ Make components connection aware
💫 Implement adaptive serving
🎉 Serve Adaptive Components Using the Network Information API