Measure the real world experience and set appropriate goals. A good goal to aim for is First Meaningful Paint <1 s, a Speed Index value < 1250, Time to Interactive < 5s on slow 3G, for repeat visits, TTI < 2s. Optimize for start rendering time and time-to-interactive.
Prepare critical CSS for your main templates, and include it in the <head> of the page. (Your budget is 14 KB). For CSS/JS, operate within a critical file size budget of max. 170KB gzipped (0.7MB decompressed).
Trim, optimize, defer and lazy-load as many scripts as possible, check lightweight alternatives and limit the impact of third-party scripts.
- Serve legacy code only to legacy browsers with
- <script type="module">
- .
- Experiment with regrouping your CSS rules and test in-body CSS.
Add resource hints to speed up delivery with faster dns-lookup, preconnect, prefetch and preload.
- Subset web fonts and load them asynchronously, and utilize font-display in CSS for fast first rendering.
- Optimize images, and consider using WebP for critical pages (such as landing pages).
Check that HTTP cache headers and security headers are set properly.
- Enable Brotli or Zopfli compression on the server. (If that's not possible, don't forget to enable Gzip compression.)
- If HTTP/2 is available, enable HPACK compression and start monitoring mixed-content warnings. Enable OCSP stapling.
Cache assets such as fonts, styles, JavaScript and images in a service worker cache.
来源: https://juejin.im/entry/5c38073a6fb9a049c15f6d5e