前言
案例集
优秀网站
反面教材
技术资料
掘金前端性能文集
现代浏览器内部揭秘:第一部分
现代浏览器内部揭秘:第二部分
现代浏览器内部揭秘:第三部分
现代浏览器内部揭秘:第四部分
2018 前端性能优化清单 — 第 1 部分
2018 前端性能优化清单 — 第 2 部分
2018 前端性能优化清单 — 第 3 部分
2018 前端性能优化清单 — 第 4 部分
2019 前端性能优化年度总结 — 第一部分
2019 前端性能优化年度总结 — 第二部分
2019 前端性能优化年度总结 — 第三部分
2019 前端性能优化年度总结 — 第四部分
2019 前端性能优化年度总结 — 第五部分
2019 前端性能优化年度总结 — 第六部分
JavaScript 是如何工作的:渲染引擎和性能优化技巧
JavaScript 是如何工作的:CSS 和 JS 动画背后的原理 + 如何优化性能
JavaScript 是如何工作的:深入网络层 + 如何优化性能和安全
JavaScript 启动性能探究
通过 Lighthouse 了解 JavaScript 性能
高性能 JavaScript 最佳实践
使用多背景来提高感知性能
V8 性能优化杀手
网络现状:性能提升指南
性能指标都是些什么鬼?
找出可能影响性能的代码模式
重建 slack.com:使用 CSS Grid 重新设计,并针对性能和可访问性进行了优化。
Chrome DevTools - 性能监控
现代浏览器是如何提升性能的:网络层
保持 webpack 快速运行的诀窍:一本提高构建性能的现场指导手册
PWA 实战:Tinder 的性能优化之道
v3.1.0:大幅性能提升并支持流媒体服务端渲染
做好准备:新的 V8 即将到来,Node.js 的性能正在改变。
提高 10 倍性能:优化静态网站
开启性能预算
Google 工程师提升网页性能的新策略:空闲到紧急
Netflix 的 Web 性能案例研究
了解“多态”JSON 数据的性能问题
看我如何把网站性能提升 422%
前端开发 8 大性能分析工具
前端应用的性能指标
对产品经理而言的 Web 性能
在 Node.js 中避免内存泄漏:性能最佳实践
拖放库中 React 性能的优化
React 的内联函数和性能
React 实现条件渲染的多种方式和性能考量
用 React 的钩子函数和调试工具提升应用性能
如何使用 useRef 修复 React 性能问题
React 应用中 “神奇” 的多态—性能隐患
针对 Airbnb 清单页的 React 性能优化
React 应用性能调优
高性能 React:3 个新工具加速你的应用
Netflix: 使用 React 构建高性能的电视用户界面
使用 React.js 的渐进式 Web 应用程序:第 2 部分 - 页面加载性能
React 应用的性能优化之路
较为完整的 React.js / Vue.js 的性能比较 Part 1
较为完整的 React.js / Vue.js 的性能比较 Part 2
快速加载
—— 介绍 ——
为什么速度很重要?
速度是什么?
如何测量速度?
如何保持快速?
使用 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 性能测评
性能指标
删除阻塞渲染的资源
Properly size images
Defer offscreen images
压缩 CSS
压缩 JavaScript
删除未使用的 CSS
对图像进行高效编码
Serve images in modern formats
启用文本压缩
预连接到所需的源
Reduce server response times (TTFB)
避免多个页面重定向
Preload key requests
Use video formats for animated content
Reduce the impact of third-party code
避免非合成动画
使用 Facade (外观)延迟加载第三方资源
避免巨大的网络有效负载
Serve static assets with an efficient cache policy
避免 DOM 过大
避免链接关键请求
User Timing marks and measures
减少 JavaScript 执行时间
最少化主线程工作
确保字体文件加载时页面文字可见
Keep request counts low and transfer sizes small
Lighthouse 可访问性测评
Lighthouse 安全性测评
Lighthouse SEO 测评
本书使用 GitBook 发布
前言
WPO Cases
WPO Cases
网站性能优化案例集及相关技术资料。目前主要聚焦网站前端性能优化。