- What you’ll learn
- #">Introduction#
- Set performance budgets 设置性能预算
- Optimize your images 优化你的图片
- Lazy-load images and video 懒加载图片和视频
- Optimize your JavaScript 优化你的JS
- Optimize your resource delivery 优化你的资源交货
- Optimize your CSS 优化你的CSS
- Optimize your third-party resources 优化第三方资源
- Optimize WebFonts 优化 Web 字体
- Optimize for network quality 优化网络质量
- Measure performance in the field 测量性能
- Build a performance culture 创造一个性能文化
When you’re building a modern web experience, it’s important to measure, optimize, and monitor if you’re to get fast and stay fast.
Performance plays a significant role in the success of any online venture, as high performing sites engage and retain users better than poorly performing ones.
Sites should focus on optimizing for user-centric happiness metrics.
Tools like Lighthouse (baked into web.dev!) highlight these metrics and help you take the right steps toward improving your performance.
To “stay fast”, set and enforce performance budgets to help your team work within the constraints needed to continue loading fast and keeping users happy after your site has launched.
当您建立现代的Web体验时,衡量,优化和显示器,如果您要快速速度并保持快速,这非常重要。
性能在任何在线企业的成功中发挥着重要作用,因为高性能的网站比表现不佳的网站比表现不佳的人更好。
网站应专注于优化以用户为中心的幸福指标。
像灯塔这样的工具(烤成web.dev!)突出显示这些指标,并帮助您采取正确的步骤来提高您的性能。
要“保持快速”,设置和实施性能预算,以帮助您的团队在您在网站推出后继续加载快速加载快速和保持用户快乐的约束中的制约因素。
What you’ll learn
- Introduction
- Set performance budgets
- Optimize your images
- Lazy-load images and video
- Optimize your JavaScript
- Optimize your resource delivery
- Optimize your CSS
- Optimize your third-party resources
- Optimize WebFonts
- Optimize for network quality
- Measure performance in the field
- Build a performance culture
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 设置性能预算
- 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 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 懒加载图片和视频
- Lazy-loading images
- Lazy-loading video
- Browser-level image lazy-loading for the web
Use lazysizes to lazy-load images
Optimize your JavaScript 优化你的JS
- 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 优化你的资源交货
- 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 优化你的CSS
- Minify CSS
- Extract critical CSS
Optimize CSS background images with media queries
Optimize your third-party resources 优化第三方资源
- Identify slow third-party JavaScript
Efficiently load third-party JavaScript
Optimize WebFonts 优化 Web 字体
- Optimize WebFont loading and rendering
-
Optimize for network quality 优化网络质量
Adaptive serving based on 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
Build a performance culture 创造一个性能文化
- How can performance improve conversion?
- What should you measure to improve performance?
- How to report metrics and build a performance culture
- Fixing website speed cross-functionally
- Relating site speed and business metrics