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- 多 “ 维 ” 优化：前端高并发策略的更深层思考：一项指标的变好，总少不了相应优化策略的实施。优化并不是简单的一蹴而就，而是个不断迭代与推翻的过程。更深层的优化方案，往往是在某种思维策略之下，对问题场景和基本策略优缺的深刻理解后做出的当下最优的权衡结果。本文笔者从前端高并发优化这一具体点出发，逐步向大家阐述笔者在优化的 “ 术 ” 之上思维层面的一些思考。希望能给各位带来共鸣和感悟。
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.
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 #Project#: 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 #Project# : Highly performant, light ~0.5kb and configurable lazy loader in pure JS with no dependencies for images, iframes and more, using IntersectionObserver API
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.
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 #Project#:Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos
2017-Developer's Guide to E-Commerce Sites Speed Optimization: You need to optimize your e-commerce website for speed at a time when search engines themselves rank faster websites above slower ones. At that same time, audience's attention span is getting shorter by the day.
2017-Fundamentals of Responsive Images: In this article, I’ll be explaining some of the key concepts for responsive images, as well as providing an overview of a few different responsive image tactics.