Web-LoadTuning-List

Web Performance Optimization for Page Loading

A Comprehensive Guide to Font Loading Strategies
前端渲染加速之 - Big Pipe
Preload, Prefetch And Priorities in Chrome: Today we’ll dive into insights from Chrome’s networking stack to provide clarity on how web loading primitives (like & ) work behind the scenes so you can be more effective with them.
2017- 多 “ 维 ” 优化：前端高并发策略的更深层思考：一项指标的变好，总少不了相应优化策略的实施。优化并不是简单的一蹴而就，而是个不断迭代与推翻的过程。更深层的优化方案，往往是在某种思维策略之下，对问题场景和基本策略优缺的深刻理解后做出的当下最优的权衡结果。本文笔者从前端高并发优化这一具体点出发，逐步向大家阐述笔者在优化的 “ 术 ” 之上思维层面的一些思考。希望能给各位带来共鸣和感悟。
The Best Request Is No Request, Revisited
How Modern Web Browsers Accelerate Performance: The Networking Layer: In this post, we’ll try to analyze what techniques modern browsers employ to automatically boost performance.

2018-Use streaming JSON to speed up your website: JSON streaming—or JSONS—is a simple technique we use to decrease search latency for users, particularly anyone on a slow connection.

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:Extract & Inline Critical-path CSS in HTML pages
critical-path-css-tools:Tools to help prioritize above-the-fold CSS
2017-Remove Unused CSS Rules: Removing unused styles can help make the situation more manageable.
UnCSS : UnCSS is a tool that removes unused CSS from your stylesheets. It works across multiple files and supports Javascript-injected CSS.
2017-Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS
2017-Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS: Isolating critical CSS is something that can be done programmatically, and in this article I’ll show you how to delegate it to your Webpack pipeline.
2018-purgecss : Purgecss analyzes your content and your css files. Then it matches the selectors used in your files with the one in your content files. It removes unused selectors from your css, resulting in smaller css files.

2017-Lozad.js : Highly performant, light ~0.5kb and configurable lazy loader in pure JS with no dependencies for images, iframes and more, using IntersectionObserver API
2017-How to use SVG as a Placeholder, and Other Image Loading Techniques

Bundle Buddy : 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。

2017-Essential Image Optimization: In 2017, image optimization should be automated. It’s easy to forget, best practices change, and content that doesn’t go through a build pipeline can easily slip.
2017-An Introduction to Progressive Image Rendering: In this article, we’ll look at how you can save your users bandwidth and time by loading and rendering well-optimized images lazily and progressively.
2017-Reducing Image File Size at Etsy: Serving images is a critical part of Etsy’s infrastructure.
Save time by transforming images in the command line
2017-Network based image loading using the Network Information API in Service Worker: Recently, Chromium improved their implementation of navigator.connection by adding three new attributes: effectiveType, downlink and rtt.
SuperTinyIcons :Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos

最近更新于 2023-04-16