Appearance
Fast load times
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
#
- Why does speed matter?
- What is speed?
- How to measure speed?
- How to stay fast?
- Measure performance with the RAIL model
- 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
- 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
- Use lazy-loading to improve loading speed
- Lazy-loading images
- Lazy-loading video
- Browser-level image lazy-loading for the web
- Use lazysizes to lazy-load images
- 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
- 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
- Defer non-critical CSS
- Minify CSS
- Extract critical CSS
- Optimize CSS background images with media queries
- Third-party JavaScript performance
- Identify slow third-party JavaScript
- Efficiently load third-party JavaScript
- 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
- The value of speed
- 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
更新: 2021-05-15 15:01:43
原文: https://www.yuque.com/u3641/dxlfpu/ttnqva