概述
在构建现代 Web 体验时，衡量、优化和监控是否要快速并保持快速非常重要。 性能对于任何在线企业的成功都起着重要作用，因为高性能网站比性能差的网站更能吸引和留住用户。 网站应该专注于优化以用户为中心的幸福指标。 像 Lighthouse（融入 web.dev！）这样的工具会突出显示这些指标，并帮助您采取正确的步骤来提高性能。 要“保持快速”，设置并执行性能预算以帮助您的团队在继续快速加载和在您的网站启动后保持用户满意所需的限制内工作。
Introduction #
- Why does speed matter?
- What is speed?
- How to measure speed?
- How to stay fast?
- Measure performance with the RAIL model
Set performance budgets #
- Performance budgets 101
- Your first performance budget
- Incorporate performance budgets into your build process
- Use Lighthouse for performance budgets
- Using bundlesize with Travis CI
- Using Lighthouse Bot to set a performance budget
- Performance monitoring with Lighthouse CI
Optimize your images #
- Choose the right image format
- Choose the correct level of compression
- Use Imagemin to compress images
- Replace animated GIFs with video for faster page loads
- Serve responsive images
- Serve images with correct dimensions
- Use WebP images
- Use image CDNs to optimize images
Lazy-load images and video #
- Use lazy-loading to improve loading speed
- Lazy-loading images
- Lazy-loading video
- Browser-level image lazy-loading for the web
Optimize your JavaScript #
- Optimize long tasks
- Apply instant loading with the PRPL pattern
- Reduce JavaScript payloads with code splitting
- Remove unused code
- Minify and compress network payloads
- Serve modern code to modern browsers for faster page loads
- Publish, ship, and install modern JavaScript for faster applications
- How CommonJS is making your bundles larger
Optimize your resource delivery #
- Content delivery networks (CDNs)
- Prioritize resources
- Preload critical assets to improve loading speed
- Establish network connections early to improve perceived page speed
- Prefetch resources to speed up future navigations
- Fast playback with audio and video preload
Optimize your CSS #
- Defer non-critical CSS
- Minify CSS
- Extract critical CSS
- Optimize CSS background images with media queries
Optimize your third-party resources #
- Third-party JavaScript performance
- Identify slow third-party JavaScript
- Efficiently load third-party JavaScript
- Best practices for tags and tag managers
Optimize WebFonts #
- Best practices for fonts
- Avoid invisible text during font loading
- Optimize WebFont loading and rendering
- Reduce web font size
Optimize for network quality #
Measure performance in the field #
- Using the Chrome UX Report to look at performance in the field
- Using the CrUX Dashboard on Data Studio
- Using the Chrome UX Report on PageSpeed Insights
- Using the Chrome UX Report on BigQuery
- Using the Chrome UX Report API
