Web Performance Optimization for Page Loading


Compression: 压缩

HTTP/2 Push | HTTP/2 推送


Edge Compiting

  • 2020-边缘加载: 淘宝是如何缩短首屏时间、降低服务器压力的?边缘计算告诉你答案!

Cache | 缓存优化

Prefetch | 预抓取

  • 2018-Preload, prefetch and other tags: Prefetch a CSS file, prerender a full page, or resolve a domain ahead of time – and you won’t have to wait for it when it’s actually needed! Sounds cool.

Critical Path | 关键渲染路径

Critical CSS | 关键 CSS

Lazy Loading | 懒加载

Code Spliting | 代码分割

  • Bundle Buddy #Project#: Bundle Buddy is a tool to help you find source code duplication across your javascript chunks/splits. This enables you to fine tune code splitting parameters to reduce bundle invalidation rates as well as improve repeat page load performance \o/.

  • 2018-Web Performance Optimization with Webpack by Addy Osmani: Taking advantage of its features for optimizing modern code, code-splitting scripts into critical and non-critical pieces and stripping out unused code.

  • 腾讯社交网络图片带宽优化技术演进之路: 为进一步降低运营带宽成本,减小用户访问流量及提升页面加载速度,社交网络 CDN 运维紧跟行业图片优化趋势,创新引入 WebP、SharpP、自适应分辨率、Guetzli 等图像压缩技术到现网,经过三年多的多部门联合攻关,已逐渐形成一套覆盖全图片类型(JPEG、JPG、PNG、WebP、GIF)多场景的图片压缩运营体系,适用于各类型终端,每年节约外网带宽几百 G。

Image Optimization: 图片优化