Web 性能优化 WPO 资源清单：工具、文章、指标、监控与最佳实践

资源合集
收藏
回帖
1条日志
新手上路 1小时前
主楼
来源：https://github.com/davidsonfellipe/awesome-wpo

这是一份面向 Web 性能优化的精选资源清单，覆盖文章、书籍、案例、文档、演讲、分析器、APM、真实用户监控、Core Web Vitals、CDN、图片优化、懒加载、压缩和服务器性能等方向。

目录

  • Analyzers - Analyzers 相关资源，聚焦编译器、解释器、运行时或编程语言实现，适合学习、收藏和实践。
  • Analyzers API - Analyzers API 相关资源，聚焦编译器、解释器、运行时或编程语言实现，适合学习、收藏和实践。

智能体技能

书籍

案例研究

  • WPOStats - 案例研究和实验展示了 Web 性能优化 (WPO) 对用户体验和业务指标的影响。
  • Google Developers Case Studies - 了解其他开发人员为何以及如何使用网络为其用户创造令人惊叹的网络体验。

文档

活动 / 会议

  • We Love Speed - 源于尽可能广泛地分享网络性能知识和经验的愿望。
  • PWA Summit - 免费、在线、单轨会议，专注于帮助每个人通过渐进式 Web 应用程序取得成功。
  • performance.now() - Performance.now() 会议将返回阿姆斯特丹！我们是一个由 14 位世界级演讲者组成的单轨会议，涵盖当今最重要的网络性能见解。
  • PerfMatters - Conference是国际知名性能开发者举办的在线网络性能会议。

工具

分析器

  • Request Map - 将第一方和第三方请求依赖关系可视化为交互式地图。
  • Web.dev - 借助 web.dev 的有用指导和分析，在您自己的网站和应用程序上获取网络的现代功能。
  • PageSpeed Insights - 针对任何 URL 的实验室和现场 CWV 诊断。
  • PageGym - 适合经验丰富的用户和技术 SEO 专业人员的高级页面速度分析和优化工具。
  • DebugBear - 基于Lighthouse的站点监控。查看您的分数和指标如何随时间变化，重点了解导致每次变化的原因。付费产品可免费试用 30 天。
  • Page Speed - PageSpeed 系列工具旨在帮助您优化网站的性能。 PageSpeed Insights 产品将帮助您确定可应用于您网站的性能最佳实践，而 PageSpeed 优化工具可以帮助您自动化该过程。
  • Dareboost - [多重审核] 跨性能、可访问性、SEO 和安全最佳实践的网站质量测试。
  • Screpy - [多重审核] 基于人工智能的性能、SEO、正常运行时间和质量监控。
  • YSlow - 分析网页并根据一组高性能网页规则提出提高其性能的方法。
  • Grunt-WebPageTest - 用于连续测量 WebPageTest 的 Grunt 插件。 （演示）。
  • Grunt-perfbudget - 用于执行性能预算的 Grunt.js 任务（更多关于性能预算的信息）。
  • Web Tracing Framework - 用于跟踪和调查复杂 Web 应用程序的库、工具和可视化工具。
  • Yandex.Tank - 适合高级 Linux 用户的可扩展开源负载测试工具，特别适合作为自动化负载测试套件的一部分。
  • Yellow Lab Tools - 在线快速简单的工具，可审核前端不良实践、揭示性能问题并分析 JavaScript。
  • Pagelocity - 一款Web性能优化和分析工具。
  • Speed Racer - 使用 Chrome headless 收集您的库/应用程序的性能指标。
  • Lightest App - 网页加载时间对于转化和收入极其重要。可视化网络性能与竞争对手的对比。
  • Redirect Checker - 分析 HTTP 重定向链、检测循环并测量对页面加载时间的性能影响。
  • Third Party Analysis Tool - 分析 WebPageTest 运行中的第三方请求风险、渲染阻塞影响以及潜在的单点故障。
  • Web Font Analyzer - 使用 WebPageTest 数据检查字体加载时间、有效负载和字形使用情况。
  • Webfont Usage Analyzer - Bookmarklet 脚本可将加载的 Web 字体映射到可见 DOM 使用情况并帮助发现字体优化机会。
  • Waterfall Tools - 用于 HAR、WPT JSON、Chrome 跟踪/网络日志和 tcpdump 捕获的高级客户端网络请求瀑布查看器。

分析器 API

  • PSI - Node.js 的 PageSpeed Insights - 带有报告。

应用性能监控

  • Datadog APM - 大规模的端到端分布式跟踪和 APM，与所有遥测相关。
  • BetterUptime - 一个很好的网站监控工具（捆绑状态页面、事件通知）。
  • Pingdom - 获取网站正常运行时间的工具（使用来自不同位置的探测器）。
  • UptimeRobot - 另一个正常运行时间监控工具（具有慷慨的免费计划）。
  • StatusList - 正常运行时间、带有调试详细信息的性能监控以及托管状态页面在一个简单的仪表板中。

真实用户监控

  • Catchpoint Real User Monitoring - 适用于 Web 和本机移动应用程序的 RUM，具有核心 Web Vitals、第三方影响以及与综合监控的相关性（基于 OpenTelemetry）。
  • Atatus - 全栈可观察性，包括 RUM、APM、综合正常运行时间、会话重放和 OpenTelemetry。
  • Datadog Real User Monitoring - 具有会话重播、Core Web Vitals 以及与跟踪和日志关联的浏览器和移动 RUM。
  • New Relic Browser Monitoring - 使用 Core Web Vitals 进行真实用户浏览器监控、后端分布式跟踪和部署标记。
  • SpeedCurve - Web 性能监控结合了综合测试、RUM、Lighthouse、Core Web Vitals、性​​能预算和竞争基准测试。
  • Boomerang (Open Source) - Boomerang 开源版本的文档，由 Akamai 员工在 OSS 社区的贡献下维护。
  • Akamai mPulse Boomerang - Boomerang 的 Akamai mPulse 版本的文档，其中包括特定于与 mPulse 交互的附加内容。

Bundle 分析器

  • Bundlesize - 控制您的捆绑包大小。
  • source-map-explorer - 通过源映射分析和调试包空间使用情况。
  • Bundlephobia - 帮助您发现将 npm 包添加到前端包对性能的影响。
  • bundle.js.org - 快速在线 npm 包大小检查器。
  • Webpack bundle analyzer - Webpack 插件和 CLI 实用程序将包内容表示为方便的交互式可缩放树形图。
  • Disc - 可视化 browserify 项目包的模块树并追踪膨胀。
  • Lasso-analyzer - 分析和可视化 Lasso 创建的项目包。
  • Compression Webpack plugin - 准备资产的压缩版本以通过内容编码为其提供服务。
  • BundleStats - 生成捆绑包报告（捆绑包大小、资产、模块、包）并比较不同构建之间的结果。

基准测试

  • CSS-perf - 测试 CSS 性能的完全不科学的方法。大多数这些测试将围绕确定有效 CSS 架构的方法和技术。换句话说，我想知道在特定的 CSS 策略比较中哪种方法最有效。
  • JSBench - 一个基于浏览器的现代 JavaScript 基准测试工具，用于快速创建和共享性能测试。
  • Benchmark.js - 一个强大的基准测试库，几乎适用于所有 JavaScript 平台，支持高分辨率计时器，并返回具有统计意义的结果。
  • JSlitmus - 用于创建临时 JavaScript 基准测试的轻量级工具。
  • Matcha - 允许您设计测量代码性能的实验。每个工作台都应关注应用程序中的特定影响点。
  • Timing.js - 用于使用导航计时 API 来确定应用程序将时间花在哪里的小助手。可用作独立脚本、DevTools 代码片段或小书签。
  • Stats.js - 此类提供了一个简单的信息框，可帮助您监控代码性能。
  • PerfTests - JavaScript继承模型的性能测试。
  • Memory-stats.js - 通过性能内存最小监控 JS 堆大小。
  • JSPerf - 创建并共享通过基准测试比较 JavaScript 代码片段性能的测试用例。请关注此问题以获取更新：https://github.com/jsperf/jsperf.com/issues/537。
  • PHPench - PHP 基准测试的图形输出：使用 GnuPlot 实时绘制任何函数的运行时间并导出结果图像。
  • php-bench - 对 PHP 代码块进行基准测试和分析，同时测量性能足迹。

书签工具

  • Yahoo YSlow for Mobile/Bookmarklet - YSlow 分析网页并根据一组高性能网页规则提出提高其性能的方法。
  • PerfMap - 一个书签，用于使用资源计时 API 创建浏览器中加载的资源的前端性能热图。
  • DOM Monster - 一个跨平台、跨浏览器的书签，它将分析您所在页面的 DOM 和其他功能，并为您提供其运行状况。
  • CSS Stress - CSS 的压力测试和性能分析。
  • Performance-Bookmarklet - 通过资源计时 API、导航计时 API 和用户计时分析当前页面 - 类似于轻量级实时 WebPageTest。作为 Firefox 插件，名称为 Performance-Analyser。

CDN

  • Cloudflare CDN - 使用下一代技术提供快速、可靠的 CDN 服务的内容交付网络。
  • PageCDN - 最先进的开源 CDN，使用 brotli-11 压缩、HTTP/2 服务器推送、更好的 HTTP/2 多路复用等进行积极的内容优化。已支持 100 个库和 2000 多个 WordPress 主题。易于使用、易于链接且速度非常快。
  • jsDelivr - 与 Google 托管库类似，jsDelivr 是一个开源 CDN，允许开发人员托管自己的项目，任何人都可以链接到他们网站上的我们托管文件。
  • Google Hosted Libraries - Google 为最流行的开源 JavaScript 库运行的 CDN。
  • CDNjs - 由 Cloudflare 赞助的 JavaScript 和 CSS 开源 CDN，托管从 jQuery 和 Modernizr 到 Bootstrap 的所有内容。
  • Amazon CloudFront - 亚马逊的内容交付网络，可以与其他亚马逊服务很好地集成，也可以单独使用。
  • jQuery - 由 MaxCDN 提供支持的最新稳定版本的官方 CDN。
  • CDNperf - 为您找到快速、可靠的 JavaScript CDN，让您的网站变得活泼、愉快。
  • Gulp-google-cdn - 将脚本引用替换为 Google CDN 脚本引用。

Core Web Vitals

  • web-vitals - 小型库，可在浏览器中准确测量 Core Web Vitals（LCP、FID、CLS、INP、TTFB）。
  • Lighthouse - 在实验室条件下审核核心网络生命（参见分析器）。
  • Lighthouse CI - 在 CI 中运行 Lighthouse 以在每次提交时强制执行 Core Web Vitals 预算。

浏览器扩展

生成器

  • AtBuild - JavaScript 代码生成工具，可让您编写输出 JavaScript 的 JavaScript。适合展开循环和编写编译运行时的库。
  • Glue - 一个简单的命令行工具来生成CSS精灵。
  • Pitomba-spriter - Spriter 是一个简单而灵活的 CSS 动态精灵生成器，使用 Python。它可以同步和异步处理 CSS，因为它提供了在 Python 代码中使用的类，并且还提供了一个监听器，可以侦听文件系统并在静态更改后立即更改 CSS 和 sprite。
  • Grunt-spritesmith - 用于将一组图像转换为精灵表和相应 CSS 变量的 Grunt 任务。
  • Grunt-sprite-css-replace - Grunt 任务，根据样式表中引用的图像生成精灵，然后使用新的精灵图像和位置更新引用。
  • Grunt-svg-sprite - SVG sprites & stacks galore - 围绕 svg-sprite 的 Grunt 插件读取一堆 SVG 文件，优化它们并创建各种风格的 SVG sprites 和 CSS 资源。
  • Gulp-sprite - 用于创建图像精灵的 Gulp 任务以及 Gulp 相应的样式表。
  • Gulp-svg-sprites - 用于创建 SVG 精灵的 Gulp 任务。
  • SvgToCSS - 优化并渲染 CSS / Sass sprites 中的 SVG 文件。
  • Assetgraph-sprite - 基于 CSS 依赖图自动生成精灵的 Assetgraph 转换。
  • Sprite Cow - 以可复制 CSS 的形式获取 spritesheet 中 sprite 的背景位置、宽度和高度。
  • CSS Sprite Generator - CSS 精灵允许您将多个图像合并到一个文件中。
  • Sprity - 具有很多功能的模块化图像精灵生成器：支持视网膜精灵，支持不同的输出格式，从图像目录生成精灵和适当的样式文件等。
  • Sprite Factory - sprite 工厂是一个 ruby​​ 库，可用于生成 CSS 精灵。它将目录中的各个图像文件组合成单个统一的 sprite 图像，并创建适当的 CSS 样式表以在您的 Web 应用程序中使用。

图片优化工具

  • Shortpixel - 通过删除图像中不必要的字节来压缩图像并将其转换为 WebP/AVIF。
  • Grunt-smushit - Grunt 插件使用 Yahoo Smushit 删除不必要的 PNG 和 JPG 字节。
  • Gulp-smushit - Gulp 插件使用 Yahoo Smushit 优化 PNG 和 JPG。在smosh之上制作。
  • Smush it - 使用特定于格式的优化从图像文件中删除不必要的字节。无损：优化图像而不改变其外观或视觉质量。
  • Imagemin - 使用 Node.js 无缝缩小图像。
  • Sharp - 此高速 Node.js 模块的典型用例是将多种格式的大图像转换为较小的、适合 Web 的不同尺寸的 JPEG、PNG 和 WebP 图像。
  • Gm - Node.js 的 GraphicsMagick 和 ImageMagick。
  • ExifCleaner - GUI 应用程序可通过拖放从图像和视频文件中删除 EXIF 元数据。免费和开源。
  • OptiPNG - PNG 优化器可将图像文件重新压缩为较小的尺寸，而不会丢失信息。
  • Grunt-contrib-imagemin - 为 Grunt 缩小 PNG 和 JPEG 图像。
  • Gulp-imagemin - 使用 Gulp 的 imagemin 缩小 PNG、JPEG、GIF 和 SVG 图像。
  • Grunt-WebP - 将您的图像转换为 WebP 格式。
  • Gulp-WebP - 将图像转换为 Gulp 的 WebP。
  • Imageoptim - 免费应用程序，使图像占用更少的磁盘空间并加载更快，而不牺牲质量。它优化压缩参数，并删除垃圾元数据和不必要的颜色配置文件。
  • Imager - 自动图像压缩可在网络上高效分发图像。
  • Grunt-imageoptim - 让 ImageOptim、ImageAlpha 和 JPEGmini 成为您自动化构建过程的一部分。
  • ImageOptim-CLI - 自动化 Mac 版 ImageOptim、ImageAlpha 和 JPEGmini，使图像批量优化成为自动化构建过程的一部分。
  • Tapnesh-CLI - Tapnesh 是一个 CLI 工具，可以轻松高效地并行优化所有图像！
  • Tinypng - 对 PNG 图像进行高级有损压缩，保留完整的 alpha 透明度。
  • Kraken Web-interface - 优化您的图像，可供下载 12 小时。
  • Compressor - JPG、PNG、SVG 和 GIF 在线图像压缩器。
  • mozjpeg - 改进的 JPEG 编码器。
  • Jpegoptim - 优化/压缩 JPEG 文件的实用程序。
  • AdvPNG - 重新压缩 PNG 文件以获得尽可能小的尺寸。
  • Leanify - 轻量级无损文件压缩器/优化器。
  • Trimage - 用于无损优化 PNG 和 JPG 文件的跨平台工具。
  • ImageEngine - 用于动态优化、调整大小和缓存图像的云服务，具有出色的移动支持。
  • ImageKit.io - 通过全球交付网络和存储进行智能实时图像优化、图像转换。
  • Optimizt - CLI 图像优化工具。它可以有损和无损压缩 PNG、JPEG、GIF 和 SVG，还可以为光栅图像创建 AVIF 和 WebP 版本。
  • ResponsiveImage - 使用 Vite 或 Webpack 插件生成优化的图像（WebP、AVIF）和 LQIP 占位符，并使用适用于多个框架的图像组件渲染响应式图像标记。
  • Adaptive Images - 服务器端 PHP 工具，可检测屏幕尺寸并根据现有 <img> 标记自动创建、缓存和提供适合设备大小的调整后的图像。

懒加载工具

  • lazyload - 使用独立的 JavaScript 延迟加载程序延迟图像、iframe 和小部件 (~1kb)。
  • lozad.js - 纯 JS 中的高性能、轻量 ~0.9kb 和可配置延迟加载程序，不依赖于响应式图像、iframe 等。
  • quicklink - 在视口中预取链接（通过 Intersection Observer）以使未来的导航更快。

加载器

  • HeadJS - 你头脑中唯一的脚本。用于响应式设计、特征检测和资源加载。
  • RequireJS - JavaScript 文件和模块加载器。它针对浏览器内使用进行了优化，但也可以在其他 JavaScript 环境中使用，例如 Rhino 和 Node.js。
  • Labjs - Getify Solutions 支持的开源（MIT 许可证）项目。 LABjs 的核心目的是成为一个通用的、按需的 JavaScript 加载器，能够随时从任何位置将任何 JavaScript 资源加载到任何页面中。
  • Defer.js - 异步一切：使用这个 JS 使页面的主要内容加载得更快。
  • InstantClick - 悬停时预加载页面，以便站点内链接感觉即时。
  • prerender.js - 在导航之前预加载页面和资源，以实现更快的页面转换。
  • JIT - Grunt 的 JIT（Just In Time）插件加载器。即使有很多插件，Grunt 的加载时间也不会减慢。
  • Guess.js - 使用分析和机器学习进行预测预取和性能优化。

指标监控

  • Phantomas - 基于 PhantomJS 的 Web 性能指标收集器和监控工具。
  • Bench - 使用 Phantomas（PhantomJS 支持的客户端性能指标抓取器）。对页面进行基准测试，将结果存储在 MongoDB 中，并通过内置服务器显示结果。
  • Keepfast - 监控网页性能相关指标的工具。
  • GTmetrix - 用于测试和监控页面性能的免费工具。使用 Lighthouse 对您的页面进行评分，并提供有关如何优化页面的可行建议。
  • Pingbreak.com - 免费站点和 SSL 监控以及响应时间警报（在 Slack、Twitter、Mattermost、Discord 或自定义 Webhook 上）。
  • Pingdom site Speed Test - 测试该页面的加载时间，分析它并找到瓶颈。
  • Dotcom-tools - 在全球 20 个地点的真实浏览器中分析您网站的速度。
  • WebPageTest - 使用真实的浏览器（IE 和 Chrome）以真实的消费者连接速度从全球多个位置运行免费的网站速度测试。您可以运行简单的测试或执行高级测试，包括多步骤事务、视频捕获、内容阻止等等。您的结果将提供丰富的诊断信息，包括资源加载瀑布图、页面速度优化检查和改进建议。
  • Sitespeed.io - 开源工具，可根据 Web 性能最佳实践检查您的网站，并使用导航计时 API 收集指标。输出 XML 和 HTML 报告。
  • Grunt-phantomas - Grunt 插件包装幻象来测量前端性能。
  • Perfjankie - 运行时浏览器性能回归套件（演示）。
  • BrowserView Monitoring - 从世界各地的多个点持续检查 Internet Explorer、Chrome 和 Firefox 中的网页加载时间。
  • DareBoost - 真正的浏览器监控。使用 YSlow、Page Speed 和众多自定义提示提供有关 Web 性能和质量的完整报告。
  • Perfume.js - 用于从真实用户收集 Core Web Vitals 和其他性能指标的小型库。
  • puppeteer-webperf - 在 Puppeteer 脚本中收集 Web 性能指标。
  • Telescope - 基于 Playwright 构建的跨浏览器 Web 性能测试 CLI 和库；跨 Chrome、Firefox、Safari 和 Edge 收集 HAR、Web Vitals、资源计时、控制台日志、屏幕截图和幻灯片。
  • WebPageTest API Wrapper for Node.js - WebPageTest API Wrapper 是一个 npm 包，它将 Node.js 的 WebPageTest API 包装为模块和命令行工具。
  • WebPerformance Report - 每周在您的收件箱中发送网络性能报告。获取有关您想要监控的电子商务或网站的 Web 性能和 Web 优化状态的个性化报告，其中包括核心 Web Vitals。

压缩工具

  • HTMLCompressor - 小型、快速的 Java 库，通过删除额外的空格、注释和不需要的字符来缩小 HTML 或 XML，而不破坏结构。包括命令行构建。
  • Django-htmlmin - 适用于 Python 的 HTML 压缩器，完全支持 HTML 5。支持 Django、Flask 和任何其他 Python Web 框架，以及用于静态站点或部署脚本的命令行工具。
  • HTMLMinifier - 高度可配置、经过充分测试、基于 JavaScript 的 HTML 压缩器，具有类似 lint 的功能。
  • Grunt-contrib-htmlmin - 一个使用 HTMLMinifier 来缩小 HTML 的 grunt 插件。
  • Gulp-htmlmin - 一个使用 HTMLMinifier 来缩小 HTML 的 gulp 插件。
  • Grunt-htmlcompressor - 用于 HTML 压缩的 Grunt 插件，使用 htmlcompressor。
  • HTML_minifier - kangax html-minifier 的 Ruby 包装器。
  • HTML_press - 用于压缩 html 的 Ruby gem，可删除所有空白垃圾，只留下 HTML。
  • Koa HTML Minifier - 使用 html-minifier 缩小 HTML 响应的中间件。它使用 html-minifier 的默认选项，默认情况下这些选项都是关闭的，所以你必须设置选项，否则它不会做任何事情。
  • HTML Minifier Online - kangax (HTMLMinifier Creator) 的 HTML min 工具。
  • Minimize - 基于node-htmlparser的HTML压缩器；目前仅限服务器端。计划客户端缩小。
  • Html-minifier - 一个简单的 Windows 命令行工具，用于缩小 HTML、Razor 视图和 Web 表单视图。
  • UglifyJS2 - UglifyJS 是一个 JavaScript 解析器、压缩器、压缩器或美化器工具包，用 JavaScript 编写。
  • Terser - 现代 JavaScript 压缩器和压缩器； UglifyJS 的后继者，支持 ES6+。
  • SWC - 快速 JavaScript 和 TypeScript 编译器和压缩器；转译速度明显快于 Babel/Terser。
  • CSSO - CSS 最小化器与其他最小化器不同。除了通常的缩小技术之外，它还可以对 CSS 文件进行结构优化，从而与其他缩小器相比，文件大小更小。
  • Grunt-contrib-concat - 用于连接文件的 Grunt 插件。
  • Grunt-contrib-uglify - 用于连接和缩小 JavaScript 文件的 Grunt 插件。
  • Clean-css - 一个快速、高效且经过充分测试的 Node.js CSS 压缩器。
  • Django-compressor - 将链接和内联 JavaScript 或 CSS 压缩到单个缓存文件中。
  • Django-pipeline - Pipeline 是 Django 的资产打包库，提供 CSS 和 JavaScript 连接和压缩、内置 JavaScript 模板支持以及可选的 data-URI 图像和字体嵌入。
  • JShrink - PHP 类可缩小 JavaScript 以更快地交付给客户端。
  • JSCompress - 最简约的在线JS压缩工具。
  • CSSshrink - 因为CSS是渲染页面的关键路径。一定很小！否则！
  • Grunt-cssshrink - 这只是 CSS Shrink 的一个 grunt 包装器。
  • Gulp-cssshrink - 使用 Gulp 的 cssshrink 缩小 CSS 文件。
  • Prettyugly - Uglify（去除空格）或 prettify（添加一致的空格）CSS 代码。
  • Grunt-contrib-cssmin - Grunt 的 CSS 缩小器。
  • Grunt-uncss - 从项目中删除未使用的 CSS 的繁琐任务。
  • Gulp-uncss - 从项目中删除未使用的 CSS 的 gulp 任务。

杂项

  • Fontaine - 基于字体规格的自动字体回退，以减少 Web 字体加载导致的累积布局偏移 (CLS)。
  • Socialite.js - Socialite 提供了一种非常简单的方法来实施和激活大量的社交共享按钮 - 任何时候你愿意。文档加载时、文章悬停时、任何事件时。
  • uCSS - 抓取大型网站以查找未使用的 CSS 选择器（不会删​​除未使用的 CSS）。
  • HTTPinvoke - 适用于浏览器和 Node.js 的无依赖 HTTP 客户端库，具有基于 Promise 或 Node.js 风格的基于回调的 API，用于处理事件、文本和二进制文件上传和下载、部分响应正文、请求和响应标头、状态代码。
  • Critical - HTML 页面中提取和内联关键路径 CSS (alpha)。
  • Csscolormin - 缩小 CSS 颜色的实用程序，例如：min("white"); // 缩小为“#fff”。
  • Lazysizes - 适用于图像（响应式和普通）、iframe 和脚本的高性能延迟加载程序，无需配置即可检测通过用户交互、CSS 或 JavaScript 触发的任何可见性更改。
  • react-virtualized - React 组件通过虚拟化可见行来高效渲染大型列表和表格数据。
  • TMI - 图片过多：发现您的图片在网络上的权重。

SVG

  • SVGO - 基于 Node.js 的 SVG 矢量图形优化器。
  • SVG OMG - SVGOMG 是 SVGO 缺失的 GUI，旨在公开 SVGO 的大多数（如果不是全部）配置选项。
  • Grunt-svgmin - 使用 SVGO for Grunt 缩小 SVG。
  • Gulp-svgmin - 使用 SVGO for Gulp 缩小 SVG。
  • Scour - 开源 Python 脚本，可积极清理 SVG 文件，去除工具或作者嵌入文档中的垃圾。
  • SVG Cleaner - 使用批处理模式、许多清理选项以及多核 CPU 上的线程处理来清理 SVG 文件中不必要的数据。

Web Components

  • Polymer Bundler - Polymer-bundler 是一个用于打包项目资产进行生产的库，以最大程度地减少网络往返。
  • Gulp-vulcanize - 使用 Vulcanize 将一组 Web 组件连接到一个文件中。

Web 服务器基准测试

  • HTTPerf - 通过灵活生成 HTTP 工作负载和服务器指标来衡量 Web 服务器性能。
  • Apache JMeter - 开源负载测试工具：它是一个Java平台应用程序。
  • Locust - 一个开源负载测试工具。使用 Python 代码定义用户行为，并让数百万并发用户涌入您的系统。
  • Autoperf - httperf 的 Ruby 驱动程序可自动对单个端点或通过日志重播进行负载和性能测试。
  • HTTPerf.rb - httperf 的简单 Ruby 接口，用 Ruby 编写。
  • PHP-httperf - HTTPerf.rb 的 PHP 端口。
  • HTTPerf.js - HTTPerf.rb 的 JS 端口。
  • HTTPerf.py - HTTPerf.rb 的 Python 端口。
  • Gohttperf - HTTPerf.rb 的 Go 端口。
  • wrk - HTTP 基准测试工具（带有可选的 Lua 脚本，用于请求生成、响应处理和自定义报告）。
  • beeswithmachineguns - 用于武装（创建）许多蜜蜂（微型 EC2 实例）以攻击（负载测试）目标（Web 应用程序）的实用程序。
  • k6 - 为开发人员构建的开源负载测试工具。易于集成到 CI 管道中。测试是用 ES6 JS 编写的，您可以使用 HTTP/1.1、HTTP/2 和 WebSocket 测试 API、微服务和站点。

Web 服务器模块

  • PageSpeed Module - PageSpeed 可加快您的网站速度并减少页面加载时间。此开源 Web 服务器模块会自动将 Web 性能最佳实践应用于页面和相关资产（CSS、JavaScript、图像），而无需您修改现有内容或工作流程。 PageSpeed 可作为 Apache 2.x 和 Nginx 1.x 的模块。
  • WebP-detect - WebP 与 Accept 协商。

规范

  • Web Performance Working Group - Web 性能工作组是富 Web 客户端活动的一部分，其使命是提供测量用户代理功能和 API 的应用程序性能方面的方法。
  • Page Visibility - 该规范定义了一种方法，网站开发人员可以通过编程方式确定页面当前的可见性状态，以便开发节能和 CPU 高效的 Web 应用程序。
  • Navigation Timing - 该规范定义了一个统一的接口来存储和检索与文档导航相关的高分辨率性能指标数据。
  • Resource Timing - 该规范定义了 Web 应用程序访问文档中资源的完整计时信息的接口。
  • User Timing - 该规范定义了一个接口，通过允许 Web 开发人员访问高精度时间戳来帮助他们测量应用程序的性能。
  • Performance Timeline - 该规范定义了一个统一的接口来存储和检索性能指标数据。本规范不涵盖单独的性能指标接口。
  • CSS will-change - 该规范定义了 will-change CSS 属性，允许作者提前声明哪些属性将来可能会更改，以便 UA 可以在需要之前设置适当的优化。这样，当实际更改发生时，页面会快速更新。
  • Resource Hints - 该规范定义了 HTML 链接元素 (<link>) 的 dns-prefetch、preconnect、prefetch 和 prerender 关系。这些原语使开发人员以及生成或交付资源的服务器能够协助用户代理决定应连接到哪些源，以及应获取和预处理哪些资源以提高页面性能。
  • RFC 9218: HTTP Prioritization - HTTP 的协议级优先级机制。

统计资料

  • HTTP Archive - 它是 Web 性能信息（例如页面大小、失败的请求和所使用的技术）的永久存储库。这些性能信息使我们能够了解 Web 构建方式的趋势，并提供用于进行 Web 性能研究的通用数据集。
  • Chrome User Experience Report (CrUX) - 来自 Chrome 用户的原始级真实用户性能数据。

其他 Awesome 清单

回复 点赞 举报
😀 😊 😵‍💫 😡 🤝 🙏 👍 👎 ❤️