web performance research

网络性能研究

此存储库是我随着时间的流逝而消耗的资源来汇编，以获取知识并进行自己的Web性能研究。

Table of Contents

• Web Performance Research
  • Table of Contents
  • Architecture
  • Backend
  • Browser
    • Service Workers / Workers
    • Rendering Engines
  • Build tools
  • Cache & Memoization
  • Career
  • Case Studies
  • Community
    • Books
    • Blogs
    • Conferences & Meetups
    • Courses
    • Podcasts
  • Core Web Vitals
    • Cumulative Layout Shift (CLS)
    • Largest Contentful Paint (LCP)
    • First Input Delay (FID)
    • Interaction to Next Paint (INP)
    • Total Blocking Time
  • CSS
  • Fonts
    • Fonts Tools
  • General
    • Why it matters
  • Images
    • 图像工具
  • 基础架构
  • JavaScript
  • 测量性能
    • 运行时性能
    • DevTools
    • 如何度量
    • 基准
    • 测量工具工具
    • 内存管理
  • 绩效
    • 预算预定工具
  • 预取
    • 预约工具
  • Web
    • React React React
    • React React React React React React React
    • React
  • 可持续性
  • 推文
  • UX
  • Web Apis
  • 许可证许可证

架构

• ？高级渲染模式
• ？网上渲染：应用程序体系结构的性能含义
• ？流离等待
• ？在Next.js中流式传输
• ？水合水合之前发生的情况
• 2023 Web框架性能报告
现代
• 切割
• 芥末的现代采用
，
• 将SPA与SSG和SSR
• 的
• PRPL
• 模式
• 进行
• 了
• 即时
• 负载 partial hydration in React
• Instant Loading Web Apps with an Application Shell Architecture
• Islands Architecture
• Next.js: The Ultimate Cheat Sheet To Page Rendering
• Rendering Fundamentals
• Rendering on the Web
• Rendering Options on the Web: Server, Client, Static
• Rendering Patterns
• Server-Side Rendering: How Resumable Beats Hydration
• Signals: the nitty-gritty
• SPAs: theory versus practice
• Suspense hydration in React
• The Benefits of Server Side Rendering Over Client Side呈现
• 部分水合的情况（下一个和先进）
• ，网络的未来（以及过去）是服务器方面的渲染，
• 理解逐渐增强的
• 理解理解在jamstack
• web渲染模式
中呈现的呈现方式
• 是什么部分水合，为什么每个人都在谈论它？
• 为什么在JavaScript框架中有效的水合是如此挑战

您

• 有关延迟的所有知识都是错误的

浏览器

• ？浏览器渲染简介
• ？缓存控制
• ？缓存您的字体，图像和页面 - 打开工作箱包装
• ？关键的渲染路径 - 网络性能的速成课程
• ？在浏览器中提供60 fps
• ？在浏览器中提供60 fps
• ？直接让您的“头”
• ？摆脱用户的方式：与网络工作者的垃圾更少
• ？我们如何使用WebAssembly通过20X（案例研究）加快Web应用程序
• ？在循环中 - settimeout，微型任务，requestAnimationframe，requestIdleCallback
• ？优化即时移动网站的关键渲染路径
• ？主线程打开和关闭
• ？主线程劳累过度和薪水不足
• ？您的浏览器中有一个客户端代理（服务工作人员）
• ？ WebAssembly as cross-platform architecture
• 60 fps on the mobile web
• Accelerated Rendering in Chrome
• Accelerating JavaScript (in the browser)
• Adaptive Serving using JavaScript and the Network Information API
• Add the Priority Hints changes to the html spec
• Avoiding layout thrashing — Web Fundamentals
• Browser Performance
• Conclusions from Off Main Thread & Worker Exploration
• Don't Block the Event Loop (or the Worker Pool)
• Don't fight the浏览器预加载扫描仪的
• 动态页面内容与CloudFlare工人
• 快速很好，即时更好！
• 修复布局在现实世界中触及|马特·安德鲁斯（Matt Andrews）
• 前端网络表现：必需0
• 前端网络表现：要点1
• 可以知道浏览器的性能profiler
• javaScript的工作方式：与WebAssembly的比较：在某些情况下，在某些情况下，最好在JavaScript上使用javascript使用
• JavaScript如何使用JavaScript如何工作：深度潜入WebSockets and websockets and Http/jovers + blote + blote + blote + works + works your sse
• +何时可以选择何时工作：使用它们
• 浏览器如何呈现网页？ - DOM，CSSOM和渲染
• 如何消除渲染资源，
• 如何
• 通过删除未使用的预努力
• 来介绍Partytown的
javaScript使用Qwik + Partytown改善油漆指标，从而
• 改善
了
• 油漆
• 指标
？
• PagesPeed Insights | Google Developers
• 现代多进程浏览器体系结构
• 记录了浏览器工作方式
• 在JavaScript口译员上的注释
• JavaScript记忆分析的注释Google Chrome中的记忆分析
• 现在，这就是我所说的服务工作者！
• 在Chrome中的iOS Prerender页面
• 上的UIWebViews和网站中优化Web内容
，
• 以防止“布局thrashing” | Wilson Page Page
• 分析并优化了使用DevTools Performance Tab
• 与CloudFlare工人进行反映
• 和重新涂漆的云图像请求：CSS性能使您的JavaScript缓慢？
• 渲染：重新粉刷，回流/终止，restyle/stoyan
• 渲染：重新粉刷，回流/接用，restyle
• 滚动绩效
• 设置为网络绩效优化的Cloudflare工人，并测试
• 与服务工作者的较小的HTML有效载荷，
• 以便您听到客户互动，您会想到您有时间吗？错误地
• 了解浏览器中的反流和重新粉刷
• 使用Web工作人员使用Cloudflare工人从浏览器的主线程中运行JavaScript，以内
• 联CSS进行外部CSS，
• 我们花了一周的时间使Trello Boards的负载非常快。这就是我们的做法。 - Fog Creek博客
• Web浏览器工程
• 网络工程师
• WebKit Architecter
• 是什么强制布局 /回流
• 是什么使Web速度慢？浏览器的瓶颈
• 何时应该使用网络工人？
• Wilsonpage / Fastdom

服务工作者 /工人

• ？在Partytown中提高您的网站表演
• ？ Speed Up Your Site with Workers
• Cloudflare Worker recipes for frontend performance testing
• Get off the main thread with an inline web worker: an example
• How Partytown Eliminates Website Bloat From Third-Party Scripts
• Introduction to Workbox and service workers
• Making the Web Faster with Service Workers and Performance Research
• Service worker caching and HTTP caching
• Setting up Cloudflare Workers for web performance optimisation and testing
• Workbox: JavaScript libraries for Progressive Web Apps
• ? Partytown

渲染引擎

• ？ JavaScript引擎：好部分
• ？像素的生活
• ？ Rendering performance inside out
• RenderingNG: the new rendering engine of chrome
• The whole web at maximum FPS: How WebRender gets rid of jank
• Why Web Developers Need to Care about Interactivity

Build tools

• Webpack Tree Shaking
• Using Native JavaScript Modules in Production Today
• speed-measure-webpack-plugin
• Doing Differential Serving in 2019
• Publish, ship, and install modern JavaScript for faster applications
• Awesome Webpack Perf
• Faster JavaScript Builds with Metro
• 13 WebPack优化提示您应该知道
• 使用InspectPack在WebPack中查找和修复重复项的
• 方法如何改善WebPack Performance
Web Performance
• Web Performance and Compression
快速保持WebPack快速：更好地构建Performance
• WebPack Libs Optimizations
• webpack Libs优化的
• 现场

指南

• ？热爱您的缓存：为第二载

职业生涯的

优化

• ：网络绩效爱好者的工作委员会
• Mozilla Corp的完整堆栈软件工程师
• Mozilla Corp的高级绩效软件工程师
• Web Performent Engineer（W/M/D） - Bagend
• Software Engineer（L4）的Bagend或Hamburg -Netflix

案例研究

中的UI捐赠和绩效

• ？长期建造性能
• ？核心网络生命力：理论和实践
• ？从Chrome中的性能监控中学到的经验教训
• ？优化预览弹出窗口
• ？具有Redux的React和Transactional应用程序中的性能注册
• ？ Several Components are Rendering: Client Performance at Slack-Scale
• 300ms Faster: Reducing Wikipedia's Total Blocking Time
• A Netflix Web Performance Case Study
• A Pinterest Progressive Web App Performance Case Study
• A Tinder PWA Performance Case Study
• Agrofy: A 70% improvement in LCP correlated to a 76% reduction in load abandonment
• Analyzing Wikipedia Users' Perceived Quality of Experience
• Building a Better Web - Part 1: A faster YouTube on web
• Case Study Renault Group
• Case study: Analyzing Notion app performance
• Case study: analyzing the Walmart site performance
• Crafting a high-performance TV user interface using React
• Economic Times quest for fixing INP
• Enhancing The New York Times Web Performance with React 18
• From Development to Real Users: How to Create a Web Performance Story
• Gantry: Slack's Fast-booting Frontend Framework
• How Carpe achieved record-breaking sales by focusing on performance optimization
• How CLS优化增加了雅虎！ JAPAN News's page views per session by 15%
• How Mercado Libre optimized for Web Vitals (TBT/FID)
• How PubTech's Consent Management Platform reduced INP on their customers' websites by up to 64%, while also improving ad viewability by up to 1.5%
• How QuintoAndar increased conversion rates and pages per session by improving page performance
• How Rakuten 24's investment in Core Web Vitals increased revenue per visitor by 53.37% and conversion rate在33.13％的情况下，
• Redbus如何改善其网站的下一个油漆（INP）的互动，并将销售额提高了7％，
• 周日公民如何通过专注于表现
• 如何说服您的客户专注于网络绩效来改善转化率：一个案例研究
• 如何
• 将INP降低50％，从而减少
• 了
50％通过103个早期提示，Hughesnet vs Tesla
• 获得了98个灯塔得分
：
• WIX如何改善TTFB
• ：现场数据与实验室数据中的案例研究
• 改善了用户体验！我们如何管理Yahoo！ JAPAN News website
• Improving JavaScript Bundle Performance With Code-Splitting
• Improving Smashing Magazine's Web Performance: A Case Study
• Journey of Improving React App Performance by 10x
• Making GitHub's new homepage fast and performant
• Making instagram.com faster: Code size and execution optimizations (Part 4)
• Making Instagram.com faster: Part 1
• Making Instagram.com faster: Part 2
• Making Instagram.com faster: Part 3 — cache first
• NDTV achieved a 55% improvement in LCP by optimizing for Core Web Vitals
• Nikkei achieves a new level of quality and performance with their multi-page PWA
• Notion's page load and navigation times just got faster
• Optimizing Core Web Vitals on a Next.js app
• Optimizing INP for a React App & Performance Learnings
• Optimizing the Performance of a React Progressive Web App
• Performance audit of an Italian news website
• Quick Performance Audit - Taiwan COVID Vaccination Website
• React Performance Fixes on Airbnb Listing Pages
• REI: FCP and LCP improvements
• Speed Matters, But It Isn't Everything
• Spotify Performance Profiling
• The Impact of Web Performance
• The Road to Great Product Performance: The First Steps
• Treebo: A React PWA Performance Case Study
• Twitter Lite and High Performance React Progressive Web Apps at Scale
• Web dev: Case Study
• Web performance case study: Wikipedia page previews
• Web Performance Regression Detection (Part 1 of 3)
• Web Performance Regression Detection (Part 2 of 3）
• Web性能回归检测
• （

第

• 3
• 部分
• ）

Zillow

• ：
• 在
• 预算
• 社区
• 行星
• 上
• ，
• 更大
• ，
• 更快
• ，
• 更具
• 吸引力
• WebPageTest
• Web Browser Engineering
• Web Performance in Action

Blogs

• TK
• Harry Roberts
• Alex Russell
• Smashing Magazine - Performance
• Fershad Irani
• Modern DevTools
• Eugenia Zigisova
• Ivan Akulov
• Perf perf perf
• Barry Pollard
• Simon Hearne
• Medhat Dawoud

Conferences & Meetups

• Conffab - Performance
• New York Web Performance Group
• Perf Now Conf

Courses

• ??性能网络I：otimizando o前端
• ??性能网络II：关键路径，http/2 e资源提示
• ？ React: otimizando a performance
• Browser Rendering Optimization
• JavaScript and the DOM
• Modern DevTools
• Setting up DevTools for Performance Testing
• The React Performance Masterclass
• Web Performance Masterclass
• Website Performance Optimization
• Website Performance Optimization

Podcasts

• Catching Up With Web Performance
• Chasing Waterfalls
• Planet Performance Podcast
• PurePerformance
• Smashing Podcast

Core Web Vitals

• ?问我什么 - 核心网络生命力
• ？解密INP和核心网络生命力
• ？探索核心网络生命的未来
• ？洞察Chrome平台团队的核心网络生命力
• ？从Chrome中的性能监控中学到的经验教训（幻灯片）
• ？测量核心网络生命力
• ？优化核心网络生命值
• ？优化核心网络生命值
• ？核心网络生命的业务影响
• ？网站性能和核心网络生命力
• ？ Web中的新事物是
• 基于Google工具的以性能为中心的工作流程的
• 最深入指南，用于测量核心网络活力
• 分析Web pagetest的
• 最佳实践，用于测量核心Web
Web copitization
• cookie banners cookie banners和Web
• 的核心网络核心核心网络的
• 核心核心核心网络
• 的核心网络核心核心核心核心维特
• 及其核心核心的核心核心核心的进攻（
最终的
• 核心核心工具）的最佳实践（最终工具）
• 核心Web Vivals通过GA4，BigQuery和Google Data Studio
• for Web Vitals
CWV跟踪
• CWV将在2022年2月
• 在该领域中
• 定义核心Web Vitals Metrics Thresholds
• Elements元素时机的台式排名系数：一个真正的指标来统治它们吗？
评估
• 我们对核心Web Vitals和SEO所知道的所有了解的
• 页面体验，
• 我们对核心Web Vitals和SEO所知道的所有信息
• 都使用服务器思维时间更快地加载，并使用早期提示
• 反馈想要：实验性响应度量指标
• 与新的响应度量指标具有
核心Web Vitals
• 具有核心Web Vitals，使网络更快地使网络更快地使网络更快？
• How SPA architectures affect Core Web Vitals
• How to create a competitive analysis dashboard for Core Web Vitals using Google Data Studio
• How to get your page Core Web Vitals from the CrUX API
• How to Improve Core Web Vitals
• How to Improve Core Web Vitals
• How to measure CWVs on SPAs
• HTTP Archive: CrUX Report
• Improving Core Web Vitals, A Smashing Magazine Case Study
• Lighthouse scores as predictors of page-level CrUX data
• More time, tools,页面体验的详细信息更新
• 页面体验的更多时间，工具和详细信息更新更新
• 优化核心网络范围，
• 以使用灯塔使用灯塔优化Web
Vitals
• 我们的顶级核心Web Vitals建议2023
• 向
• Google
• Core核心Web Vitals团队
• 模拟
• 实验室中的真实用户
• ，
• 从
• 网站
• Web Vitals模式
• Web Vitals模式
• 如何制作新的Web重要指标，
• 为什么实验室数据和现场数据可能会有所不同（以及该怎么办）

累积布局偏移（CLS）

• ？了解BuzzFeed处的累积布局变化
• CLS-第1部分：在BuzzFeed处提高地板
• CLS-第2部分：从
• BuzzFeed处获得真实用户的帮助 - 第3部分：处理
• 实践中不可预测的累积累积布局变化
• 的累积布局在实践中的
• 累积布局中的累积布局转移
• 实践中的累积累积累积累积累积累积累积累积累
• 积累积累积累积的转移
• ，以避免累积累积累积的转移。不稳定性
• 调试布局变化
• 调试CLS
• 潜入新的累积布局变化，
• 不断发展CLS指标，
• 如何使用Epeploy脚本删除网站布局变化
• 如何修复累积布局转移（CLS）问题，
• 如何解决累积布局变化（CLS）
• 通过在电视媒体组中改善累积布局转移
• 的累积布局变化
• ，从而累积不良的布局变化Scrollbar-Gutter CSS属性
• 几乎完全完整的布局指南转移

最大的内容涂料（LCP）

• ？如何修复最大的内容油漆
• ？如何改善最大的内容涂料以获得更好的页面体验
• ？调查LCP：最大的内容油漆
• ？ This Is Your LCP On Images
• Case Study Vodafone: A 31% improvement in LCP increased sales by 8%
• Dynamic LCP Priority: Learning from Past Visits
• How to optimize largest contentful paint (LCP) on client side
• Improve Largest Contentful Paint (LCP) by removing image transitions
• LCP(FE)
• Measuring Largest Contentful Paint
• Optimising Largest Contentful Paint
• Optimize Largest Contentful Paint
• Optimizing resource loading with the Fetch Priority API
• 优先提示和优化LCP
• 提示 - 使用fetchPriority =高加载您的LCP英雄图像更快地
• 了解浏览器如何识别LCP元素，
• HTTP档案可以告诉我们最大的内容涂料？

首先输入延迟（FID）

• 第一个输入延迟（FID）
• 闲置直到紧急
• 提高文本输入

互动中的响应能力（INP）

• ？分解长期任务
• ？调试INP
• ？挖掘下一个油漆的互动
• ？挖掘下一个油漆的互动
• ？如何改善与下一个油漆（INP）的互动
• ？如何通过与下一个油漆的交互优化Web响应能力
• ？与下一个油漆和其他网络生命的互动[Blinkon 16]
• ？与下一个油漆的互动显示：5个真相会加快您的网站
• ？与下一个油漆的互动
• ？调试INP的新现场见解
• ？优化INP：深度潜水
• ？网络响应能力的状态
• ？ Understanding and Optimizing Interaction to Next Paint (INP)
• 7 Ways to Minimize Main Thread Work
• Analysis of INP performance using real-world RUMvision data
• Avoid large, complex layouts and layout thrashing
• Breaking up long tasks
• Client-side rendering of HTML and interactivity
• Debugging Interaction to Next Paint (INP)
• Demystifying INP: New tools and actionable insights
• Find slow interactions in the field
• Google Chrome web-vitals.js v4 to support LoAF + INP breakdown
• How do modern frameworks perform on the new INP metric
• How large DOM sizes affect interactivity, and what you can do about it
• How To Improve INP: Yield Patterns
• How to Improve Interaction to Next Paint (INP)
• How to solve Interaction to Next Paint (INP) issues
• Improving INP with React 18 and Suspense
• Interaction to Next Paint (INP)
• Interaction to Next Paint by kev
• Manually diagnose slow interactions in the lab
• Measure And Optimize Interaction to Next Paint (INP)
• Mobile INP performance: The elephant in the room
• Optimize Interaction to Next Paint
• Optimize long tasks
• Preparing For Interaction To Next Paint, A New Web Core Vital
• Reduce the scope and complexity of style calculations
• Reduce the scope and complexity of style calculations
• Script evaluation and long tasks
• Sluggish CATs: Category Pages Have the Worst Responsiveness (INP) on e-Commerce Sites
• Style Recalculation Secrets They Don't Want You To Know
• The Fight For The Main Thread
使用网络工人在浏览器的主线程
• 网络绩效专家指南
• 中运行JavaScript，
以掌握与下一个油漆的互动

总数的总阻塞时间

• 总封锁时间：更快乐的用户

CSS

• Airbnb
• 的
• Linaria访问Linaria的
• 行程
• ，
• 从
• - Performance Cheatsheet
• Performance comparison of css-in-js libraries
• PurgeCSS
• Real-world CSS vs. CSS-in-JS performance comparison
• Reduce bundle size via one-letter css classname hash strategy
• Style performance and concurrent rendering
• The truth about CSS selector performance
• Why We're Breaking Up with CSS-in-JS

Fonts

• Can I use woff2

Fonts Tools

• ?字体松鼠
• ？ glyphhanger
• ？ Google字体
• ？可变字体

通用

• ？常见的错误会降低前端性能
• ？深入研究第三方表演
• ？脱神秘的速度工具
• ？出色的前端性能技巧以及我们为什么要做
• ？从快速加载到即时加载
• ？改善现代网络应用程序中的页面性能
• ？改善现代网络应用程序中的页面性能
• ？默认情况下，包容性设计很快
• ？下一级Web性能
• ？速度必需品：快速网站的关键技术
• ？网络性能2022年8月
• ？网络性能的光明未来
• ？性能的途径
• ？速度心理
• ？大量JavaScript无法忍受的重量
• ？十大表演陷阱
• ？恶劣条件的Web性能优化
• ？ Webabundles - JS交付没有权衡
• ？什么时候JavaScript字节
• ？什么时候JavaScript字节
• ？为什么绩效很难在
• 3phperf指南
中很难
• 进行5个常见错误，团队在跟踪性能时会犯下
• 一个绩效的管理成熟模型，
• 绩效成熟度矩阵
• 统一的Web绩效理论
• HTML-优先的心理模型
• 是您的JavaScript长期任务使用户感到沮丧吗？
• 标签和标签经理的最佳实践
• 更快地建造DOM：投机性解析，异步，延迟和预紧力
构建
• Web术语体验的
• DOM
• Chrome的油漆闪烁工具
定义
• 。网络。框架。未来。我。
• Fast load times
• Fast load times
• Fixing Performance Regressions Before they Happen
• Flame Graphs
• From Development to Real Users: How to Create a Web Performance Story
• Front-End Performance Checklist 2021
• Gantry: Slack's Fast-booting Frontend Framework
• Getting Started with Web Performance
• How to Eliminate Render-Blocking Resources: a Deep Dive
• Improving React Runtime Performance
• Javascript Performance in Extreme Environments
• Learn Performance
• Learning Web Performance
• Loading Performance Overview
• Low-Hanging Web Performance Fruits: A Cheat Sheet
• Maybe you不需要生锈和WASM来加快您的JS
• 监视您的核心网络生命（性能）
• 我对网络性能社区的挑战，
• 可以优化Spa捆绑尺寸以加快应用程序的速度，以加快应用
程序的加载。在Next.JS
• 性能和大图
中
• 表现出色的前端体系结构
中的
• 大量型号
中的
• 第三方脚本加载量，快速启用了网络属性，以实现
网络属性的效果，以实现网络属性的效果，以优化网络属性，以优化网络属性，以优化网络
• 属性，
以优化网络
• 构图，以优化网络构图，以优化
网络构图，以优化网络构图，以优化
• 网络构图，以实现网络的效果，
• 以实现网络效果。绩效
• 优化JavaScript快速页面的最终指南加载
• 网站优化的原因：更好的搜索排名网站
• 优化的原因：更好的用户体验网站优化的原因：
• 帮助地球网站的原因：
• 网站优化的原因：增加网站转换
• 网站的优化：降低操作性
• 5级绩效5绩效perf compusions
• web Perf 101
• Web绩效：趋势和洞察力：趋势和洞察力从4个顶级表现出色的表现出色，
• 以及为什么绩效效果如何？
• 为什么您的缓存JavaScript仍然很慢，并且会侵犯性能开销，

为什么要

如何衡量您的前端应用程序
• 速度速度和业务指标
• 的能源消耗，
• 什么是站点速度，我为什么要关心？
• 为什么Web Performance

Images

• 存储库收集Web图像的最佳实践
• ？ WebP更新
• ？使用AVIF图像加载时间更快|研讨会
• ？图像压缩深度潜水
• ？图像优化| performance.now（）2018
• ？图像以jamstack的速度爆炸
• ？ jpeg'files'＆color（jpeg pt1）
• ？ JPEG DCT，离散余弦变换（JPEG PT2）
• ？ JPEG XL：更新
• ？图片完美
• ？网络响应式图像
• ？ AVIF图像格式
• ？ WebP，Avif等：图像采用统计统计信息
• 我可以使用avif，
• 我可以使用JPEG-XL
• 可以使用WebP
• 图片完美图像与Modern <img>元素
• 通过删除正确完成的元数据
• 响应式图像来减少图像大小：正确完成的指南：和srcset
• 图像优化的最终指南
• 图像解码属性实际上是什么？

图像工具

• ？云
• ？压缩或die
• ？ imageOptim
• ？最佳
• ？ Squosh
• ？ Webponize

基础架构

• ？无线电的移动性能：4G架构及其含义
• 云计算无容器
• 内容输送网络（CDN）

JavaScript

• ？ Multicore JavaScript: Past, Present and Future
• 13 Tips to Write Faster, Better-Optimized JavaScript
• 17 Javascript optimization tips to know in 2021
• How JavaScript works: an overview of the engine, the runtime, and the call stack
• How JavaScript works: Event loop and the rise of Async programming + 5 ways to better coding with async/await
• How JavaScript works: inside the V8 engine + 5 tips关于如何编写优化代码
• JavaScript的工作方式：内存管理 +如何处理4个常见内存泄漏
• JavaScript编译器优化技术 - 仅适用于

衡量性能的

专家

• ？使用DevTools＆WebPagetest分析和提高Web性能
• ？制作性能警报工具
• ？从毫秒到数百万：驱动Web Perf的数字
• ？如何理解真实的用户性能指标（朗姆酒）
• ？网络上的UX真的如何？
• ？让我们将真实的用户数据分析变成科学
• ？用SpeedCurve＆WPT测量性能
• ？测量浏览器中的实际用户性能
• ？ Web Perf的可观察性
• ？一个数字，多个指标
• ？与哈里·罗伯茨（Harry Roberts）进行分析表演
• ？网络性能审核
• 一份逐步指南通过Chrome UX报告
• 朗姆酒档案分析的简介
• 运行时性能
• 基准测试，分析和优化JavaScript图书馆
• 完整的指南，以了解和衡量网站
• 核心Web Vitals dashboard在Google Analytics上
的性能的性能，可以快速地
• 进行airbnb的绩效效果
• ：可以快速地
• 对网站进行效果：如何快速地效果效果。
• 如何读取WebPagetest连接图表
• 如何阅读WebPagetest瀑布图表
• 如何使用Google Crux进行分析和比较JS框架的性能，
• 以识别，审核和讨论第三方介绍第三方
• 介绍轨道：一个以用户为中心的绩效模型，绩效模型
• 可以通过示例中的绩效衡量您的绩效效果，衡量绩效的效果，以
• 衡量绩效的效果，以衡量效果的效果，以衡量效果的效果，以
• 衡量效果的效果
，该效果是如何衡量的
• ，该效果是如何衡量的，效果是如何效果效果。
• My Performance Audit Workflow
• Noise Canceling RUM
• React Performance Profiling Optimization
• Response Times: The 3 Important Limits
• Show me the money: Justifying performance improvements using Google Analytics
• Start performance tests your browser's address bar
• Stress testing site performance
• Testing a web page with PageSpeed Insights
• Testing Slow Third-Parties with Puppeteer
• The RUM Archive and Benford's Law
• The Web Performance Engineer's Swiss Army Knife
• Tracking CPU with Long Tasks API
• Tracking real Core Web Vitals分数
• 通过免费的Treemap工具
• Web Performance日历
可视化您的资源
• 。
• Wikipedia的全球网络：CPU基准

运行时性能

• ？使用剧作家进行绩效测试
• ？

DevTools

• 的性能工具集合

• ？ Chrome DevTools：性能选项卡
• ？使用Chrome DevTools探索国家铁路网站的前端性能
• ？通过Chrome Devtools改善页面性能
• ？用Chrome Devtools制作图像懒负荷
• ？内存管理大师班
• ？在YouTube搜索框上运行性能配置文件
• ？使用Chrome DevTools了解涂料性能
• 综合指南，用于使用Chrome DevTools
• CPU火焰图形
• 网络网络在Chrome DevTools中

如何度量

• 数据可视化
• 如何读取
• 如何读取朗姆酒直方直方图
• 合成与真实用户监控
• 是什么是真实的用户监控是什么？朗姆酒解释了

基准

• ？微生物测试中的冒险
• ？反应基准
• ？转速表
• ？ tinybench

衡量

• 使用木偶的Web性能食谱的
工具
• ？回旋镖
• ？ Perfsee：一组用于测量和调试前端应用程序性能的工具
• ？速度
• ？ TREO

内存管理

• 与JavaScript垃圾收集
• 器

性能预算

的内存管理实验中的速成课程

• ？核心网络生命值 - 衡量重要的
• ？
JavaScript
• Chrome的油漆闪光工具
• 的成本
• 通过绩效预算
• 优化
启动性能
• 预算101
• 绩效预算，务实
• 响应迅速的设计在预算
• 设定绩效预算
• 启动预算预算预算
• 在2019年
• 用户以用户为中心的绩效指标绩效
• 预算的绩效绩效预算远远超过thresholds

绩效预算工具

• ？浏览器卡路里
• ？绩效预算计算器
• ？绩效预算计算器

预取

• ？预测性预取
• <link rel=”prefetch/preload”>在WebPack
• 即时和一致的页面加载中，通过预先
• 浏览，预摘要和Chrome
• Speed的优先级，并使用预取
• webpack预挑选/预取用模式
• ？预加载 - webpack-plugin

预取工具

• ？

通过在空闲时间

Web Frameworks

• 中进行预摘要内的访问链接，更快的后续页面载荷

可以吗

• ？ Dom作为二等公民
• ？ React 18并发，解释说
• ？ React绩效调试大师班
21绩效优化技术，用于
• 一千个UseCallbacks的
• React Apps
死亡
• ，React 18如何在内部工作？
• How to write performant React apps with Context
• How to write performant React code: rules, patterns, do's and don'ts
• How to write performant React code: rules, patterns, do's and don'ts
• Improved Next.js and Gatsby page load performance with granular chunking
• Mobile Performance of Next.js Sites
• New Suspense SSR Architecture in React 18
• Next.js Performance: Making a Fast Framework Even Faster
• Optimize Data Fetching
• Optimizing third-party script loading in Next.js
• 渐进式反应
• 并发性，解释的
• React钩子和提示，以避免在列表中应用的无用组件渲染
• React绩效 - 优化您的React App应用程序的13种方法
• ：对REECT SSR的性能测试伴侣
• ，流媒体，流媒体和CSS-JS-JS-JS-JS-JS
• 在Etsy
• Advanced React
上更新React React
• ？ Eslint-Plugin-react-perf

反应渲染

• ？纤维的卡通介绍
• ？用React服务器组件获取数据
• ？对并发的深入潜水
• ？内部光纤：您想要的深入概述
• ？反应纤维
• 对状态的深度深度深度解释和道具在纤维内部的更新
：在React
• 学习
• 新的和解算法的深入概述中，
与性能措施进行了反应态度
• 反应性能：如何避免冗余的重新贷方
React React
• React React React React React React React React React React React React React React React指导：所有事物都
可以使您的
• 启用
• 服务器和客户的组合
• 能够启用所有启动，并将每个启动启动启用？
• Signal Boosting
• The future of rendering in React
• Why React Re-Renders

Measuring React

• ? How to use the React Profiler to find and fix Performance Problems
• ? Profiling React Apps like a Pro
• ? React Performance with React Dev Tools
• Get Fast, Stay Fast: How To Monitor React Render Performance
• Measuring JS code performance. Part I: using react-benchmark
• Measuring JS code performance. Part II: interaction speed
• Measuring React app performance
• Performance Profiling a Redux App
• Profiling & Optimizing the runtime performance with the DevTools Performance tab
• Profiling React.js Performance

Sustainability

• Core Web Vitals meets sustainability
• How Improving Website Performance Can Help Save The Planet
• Web Performance + Ecological Impact
• Website performance and the planet

Tweets

• Another reason for not declaring React components inside other components
• Blank page with an embedded tweet.有多糟糕？
• Check out the new Priority Hints
• ChromeDevTools Long Tasks
• Compile Code — Profiling
• CSS Selector Performance
• Frontend performance tips to keep top of mind
• Google Search Console warning the INP
• How can I optimize my frontend for the fastest page load times?
• How I typically test performance
• How Wix improved TTFB with 103 Early Hints
• Image performance cheatsheet
• img fetchpriority="high": LCP improvement of ~150ms
• Investigating Core Web Vital issues
• mobile performance for sites built with Next.js
• Optimize head and body separately
• Optimizing LCP
• Performance Insights by Builder.io
• React 18 Concurrency, Explained
• React 18 Concurrency
• React Perf: Causal Case Study
• React Time Slicing
• Signals — Reactivity + UI
• Spotify Performance Profiling
• The difference between "On Load" and "Document Complete" in WebPageTest
• The most important problems in Web Perf
• Things I found in a slow React website today
• Tool: quantify what will make a real difference
• Use Map over object
• useCallback and useMemo: no perf effect
• Video Compression
• Web Performance at Slack
• React & Redux performance at Slack
• Performance Budget

UX

• ? Adaptive Loading - Improving web performance on slow devices
• ? Building The Web
• ? Design Principles For The Web
• ? Measuring User Perceived Performance to Prioritize Product Work
• ? Perceived Performance: The only kind that really matters
• ? Stephanie Walter on Cheating The UX When There Is Nothing More To Optimize
• ? The Layers of the Web
• A Bone to Pick with Skeleton Screens
• A Designer's Guide to Perceived Performance
• An experimental responsiveness metric
• Designing for Performance
• Hands On with the new Responsiveness Metrics
• How Much Faster is Fast Enough? User Perception of Latency & Latency Improvements in Direct and Indirect Touch
• How to Improve Perceived Performance in Mobile Apps
• Improving Perceived Performance
• Optimistic UI Patterns for Improved Perceived Performance
• Performance Design: Designing for the illusion of speed
• Performance perception: Correlation to RUM metrics
• Performance perception: How satisfied are Wikipedia users?
• Performance perception: The effect of late-loading banners
• Resilient web design
• The Art of UI Skeletons
• Towards an animation smoothness metric
• True Lies Of Optimistic User Interfaces

Web APIs

• Every Transition is a Page Transition?
• Speed Up Resource Loading with Priority Hints and fetchpriority
• Tracking CPU with Long Tasks API
• Web Performance APIs Appreciation Post

License

MIT © TK