前言
案例集
优秀网站
反面教材
技术资料
掘金前端性能文集
快速加载
- —— 介绍 ——
- 为什么速度很重要？
- 速度是什么？
- 如何测量速度？
- 如何保持快速？
- 使用 RAIL 模型衡量性能
- —— 设置性能预算 ——
- 性能预算基础
- 你的第一个性能预算
- Incorporate performance budgets into your build process
- 使用 Lighthouse 制定性能预算
- Using bundlesize with Travis CI
- 使用 Lighthouse 机器人制定性能预算
- 用 Lighthouse CI 监视性能
- —— 优化图片 ——
- 选择正确的图片格式
- 选择正确的压缩级别
- 使用 Imagemin 压缩图像
- 用视频替换 GIF 动画以加快页面加载
- 提供响应式图像
- 提供尺寸正确的图像
- 使用 WebP 图像
- 使用图像 CDN 优化图像
- —— 延迟加载图片和视频 ——
- 使用延迟加载提高加载速度
- 延迟加载图像
- 延迟加载视频
- 浏览器内置图像延迟加载
- 使用 lazysizes 延迟加载图像
- —— 优化 Javascript ——
- 使用 PRPL 模式实现即时加载
- 通过代码拆分减少 JavaScript 负载
- 删除未使用的代码
- 缩小和压缩网络有效负载
- 为现代浏览器提供现代代码以加快页面加载速度
- 发布、传输和安装现代 JavaScript 以实现更快的应用程序
- CommonJS 如何让您的捆绑包变得更大
- —— 优化资源交付 ——
- 内容分发网络 (CDNs)
- Prioritize resources
- 预加载关键资产以提高加载速度
- Establish network connections early to improve perceived page speed
- Prefetch resources to speed up future navigations
- 快速播放音频和视频预加载
- —— 优化 CSS ——
- 延迟加载非关键 CSS
- 压缩 CSS
- 提取关键 CSS (Critical CSS)
- 使用媒体查询优化 CSS 背景图像
- —— 优化第三方资源 ——
- 第三方 JavaScript 性能
- 识别慢速第三方 JavaScript
- 高效加载第三方 JavaScript
- —— 优化网络字体 ——
- 在字体加载期间避免不可见的文本
- 优化 WebFont 加载和呈现
- 减小 WebFont 大小
- —— 针对网络质量优化 ——
- Adaptive serving based on network quality
- —— 对性能进行实测 ——
- Using the Chrome UX Report to look at performance in the field
- 在 Data Studio 上使用 CrUX Dashboard
- Using the Chrome UX Report on PageSpeed Insights
- Using the Chrome UX Report on BigQuery
- Using the Chrome UX Report API
- —— 建立性能文化 ——
- 速度的价值
- 性能如何提高转化率？
- 你应该测量什么来提高性能？
- 如何报告指标和建立绩效文化
- 跨功能修复网站速度
- 关联网站速度和业务指标
Lighthouse 性能测评
Lighthouse 可访问性测评
Lighthouse 安全性测评
Lighthouse SEO 测评
本书使用 GitBook 发布

为现代浏览器提供现代代码以加快页面加载速度

为现代浏览器提供现代代码以加快页面加载速度

1. 确定您要定位的浏览器
2. 使用 @babel/preset-env
3. 启用现代错误修复
4. 使用