Web性能优化

Awesome WPO Awesome

GitHub contributors MIT license Reviewed by Hound

Web性能优化的精选列表. 每个人都可以在这里贡献力量!

Categories

Articles

>前往 https://github.com/davidsonfellipe/awesome-wpo/blob/master/ARTICLES.md.

Blogs

>前往 BLOGS.

Books

>有关WPO的最佳书籍

Case studies

  • WPOStats -案例研究和实验证明了Web性能优化(WPO)对用户体验和业务指标的影响.

Documentation

  • Browser Diet -有关前端性能的协作指南.
  • PageSpeed Insights Rules -PageSpeed团队创建的指南. 不推荐使用. 该版本已弃用,并将于2019年5月关闭.版本5是最新版本,并提供Chrome用户体验报告中的真实数据和Lighthouse中的实验室数据.
  • Best Practices for Speeding Up Your Web Site -该列表包括由Yahoo!创建的35个最佳实践,分为7类. 卓越的绩效团队.

People

>前往 https://github.com/davidsonfellipe/awesome-wpo/blob/master/PEOPLE.md.

Events

>因为社区很重要!

Conferences

  • Velocity –在Velocity,Web运营,性能和DevOps专业人员学习构建快速,灵活且高度可用的网站和应用程序.

Meetups

>它们分为 https://github.com/davidsonfellipe/awesome-wpo/blob/master/MEETUPS.md.

Talks

>它们分为 https://github.com/davidsonfellipe/awesome-wpo/blob/master/TALKS.md.

Tools

Analyzers

  • Web.dev -借助来自web.dev的有用指导和分析,在自己的网站和应用程序上获得网络的现代化功能.
  • Confess -使用PhantomJS无头分析网页并生成清单.
  • DebugBear -DebugBear是基于Lighthouse的网站监视工具. 查看您的分数和指标如何随时间变化,重点是了解导致每次变化的原因. DebugBear是具有30天免费试用版的付费产品.
  • Page Speed -PageSpeed系列工具旨在帮助您优化网站的性能. PageSpeed Insights产品将帮助您确定可应用于您的网站的性能最佳实践,而PageSpeed优化工具可以帮助您使流程自动化.
  • Lighthouse -渐进式Web应用程序的审核和性能指标工具.
  • YSlow -YSlow分析网页,并根据一组高性能网页的规则提出改进网页性能的方法.
  • YSlow for PhantomJS -PhantomJS的YSlow还为自动化测试框架引入了新的输出格式:TAP(任何测试协议)和JUnit.
  • Grunt-WebPageTest -Grunt插件,用于连续测量WebPageTest. (Demo)
  • Grunt-yslow -使用PhantomJS(无头WebKit浏览器)测试页面性能的艰巨任务.
  • Grunt-perfbudget -用于执行性能预算的Grunt.js任务(more on performance budgets).
  • Web Tracing Framework -Web跟踪框架是一组库,工具和可视化工具,用于跟踪和研究复杂的Web应用程序
  • HP LoadRunner -惠普提供的性能和测试自动化产品,用于应用程序负载测试:检查系统行为和性能,同时生成实际负载.
  • Yandex.Tank -针对高级linux用户的可扩展的开源负载测试工具,特别适合作为自动负载测试套件的一部分.
  • Yellow Lab Tools -在线快速简便的工具,可审计前端不良做法,揭示性能问题并配置JavaScript.
  • Pagelocity -网络性能优化和分析工具.
  • Varvy -测试您的网站,看看它是否符合Google的速度指南.
  • Web Bloat Score Calculator -将页面大小与同一页面的压缩图像进行比较
  • Speed Racer -使用Chrome Headless收集库/应用程序的性能指标.
  • Speedrank -Speedrank在后台监控您网站的性能. 它随时间显示Lighthouse报告,并提供改进建议. Speedrank是14天试用期的付费产品.

Analyzers - API

  • Node-yslowjs -Node.js上的YSlow.js是一个简单的Node.js包装器,用于以编程方式运行phantomjs yslow.js.
  • PSI -节点的PageSpeed Insights-带有报告.

Bundle Analyzer

  • Bundlesize -检查包的大小.
  • source-map-explorer -通过源映射分析和调试捆绑包空间使用情况.
  • Bundlephobia -帮助您找到将npm软件包添加到前端捆绑包中对性能的影响.
  • Disc -可视化浏览器项目捆绑包的模块树并追踪膨胀.
  • Lasso-analyzer -分析和可视化由Lasso创建的项目包.
  • Packtracker.io -在每个拉取请求中检查您的webpack捆绑统计信息,并随着时间进行跟踪.

Benchmark - CSS

  • CSS-perf - Completely unscientific way of testing CSS performance. Most of these tests will revolve around methodologies and techniques for determining effective CSS architecture. Put another way, I want to know what works best given a particular comparison of CSS strategies.

Benchmark - Javascript

>一组用于创建测试用例并比较JavaScript中不同实现的工具.

  • JSPerf -jsPerf旨在提供一种创建和共享测试用例的简便方法,通过运行基准比较不同JavaScript片段的性能.
  • Benchmark.js -健壮的基准测试库,可在几乎所有JavaScript平台上运行,支持高分辨率计时器,并返回具有统计意义的结果.
  • JSlitmus -JSLitmus是用于创建临时JavaScript基准测试的轻量级工具.
  • Matcha -Matcha可让您设计实验来衡量代码的性能. 建议每个工作台重点关注应用程序中的特定影响点.
  • Timing.js -Timing.js是一小组帮助程序,可与Navigation Timing API一起使用,以识别您的应用程序在哪里花费时间. 可用作独立脚本,DevTools代码段或书签.
  • Stats.js -此类提供了一个简单的信息框,可帮助您监视代码性能.
  • PerfTests -JavaScript继承模型的性能测试.
  • Memory-stats.js -通过性能内存最小监视JS堆大小.

Benchmark - PHP

  • PHPench -PHPench为PHP基准创建图形输出. 使用GnuPlot实时绘制任何函数的运行时间,并根据结果创建图像.
  • php-bench - Benchmark and profile PHP code blocks whilst measuring the performance footprint.

Bookmarklets

CDN

>内容交付网络或内容分发网络(CDN)是部署在整个Internet上多个数据中心中的服务器的大型分布式系统. CDN的目标是以高可用性和高性能向最终用户提供内容. 在中查看CDN的大清单 Wikipedia.

  • jsDelivr -类似于Google托管库,jsDelivr是一个开放源CDN,开发人员可以使用它托管自己的项目,任何人都可以在其网站上链接到我们托管的文件.
  • CDNjs -由CloudFlare赞助的用于Javascript和CSS的开源CDN,托管从jQuery和Modernizr到Bootstrap的所有内容.
  • jQuery -jQuery CDN –由MaxCDN支持的最新稳定版本. :cn: UpYun CDN -由upyun提供的CDN. :cn: Bootstrap中文网开放CDN服务 -Bootstrap中文网开放CDN服务(仅HTTP).

>要找到有用的更多信息,以便您在付费CDN之间做出正确选择,请访问 CDNPlanet.

CDN - Monitor

  • CDNperf -为您提供快速可靠的JavaScript CDN,使您的网站生动有趣.

CDN - Utilities

  • Cdnex -在资产网址前添加自定义CDN网址.
  • Gulp-google-cdn -将脚本引用替换为Google CDN的脚本引用.

Extensions

Image Optimizers

>如何删除所有不必要的数据并为您提供文件而又不降低质量.

  • Grunt-smushit -Grunt插件,使用Yahoo Smushit删除不必要的PNG和JPG字节.
  • Gulp-smushit -Gulp插件,使用Yahoo Smushit优化PNG和JPG. 在烟熏之上制成.
  • Smush it -Smush它使用特定于图像格式的优化技术从图像文件中删除不必要的字节. 这是一个“无损”工具,这意味着它可以在不改变外观或视觉质量的情况下优化图像.
  • Imagemin -使用Node.js无缝缩小图像.
  • Sharp -此高速Node.js模块的典型用例是将多种格式的大图像转换为尺寸较小,对网络友好的JPEG,PNG和WebP图像.
  • Gm -用于节点的GraphicsMagick和ImageMagick.
  • Exexif -纯灵丹妙药库,可从jpeg文件中提取tiff和exif元数据.
  • OptiPNG -OptiPNG是PNG优化器,可以将图像文件重新压缩为较小的大小,而不会丢失任何信息.
  • Grunt-contrib-imagemin -为Grunt缩小PNG和JPEG图像.
  • Gulp-imagemin -使用imagemin for Gulp缩小PNG,JPEG,GIF和SVG图像.
  • Grunt-WebP -将图像转换为WebP格式.
  • Gulp-WebP -将图像转换为WebP for Gulp.
  • Imageoptim -免费应用程序,可在不牺牲质量的情况下使图像占用更少的磁盘空间并更快地加载. 它优化了压缩参数,消除了垃圾元数据和不必要的颜色配置文件.
  • Grunt-imageoptim -使ImageOptim,ImageAlpha和JPEGmini成为自动化构建过程的一部分.
  • ImageOptim-CLI -使Mac的ImageOptim,ImageAlpha和JPEGmini自动化,以使批量图像优化成为自动构建过程的一部分.
  • Tinypng -用于PNG图像的高级有损压缩,可保留完整的Alpha透明度.
  • Kraken Web-interface -优化图像,可以下载12个小时.
  • Compressor -JPG,PNG,SVG和GIF的在线图像压缩器.
  • Shrinkray -一键优化Github存储库中的图像
  • mozjpeg -改进的JPEG编码器.
  • Jpegoptim -用于优化/压缩JPEG文件的实用程序.
  • ZopfliPNG -用于优化PNG图像的命令行程序.
  • AdvPNG -重新压缩png文件以获得尽可能小的尺寸.
  • Leanify -轻量无损的文件压缩/优化工具.
  • Trimage -用于无损优化PNG和JPG文件的跨平台工具.
  • ImageEngine -云服务,可通过强大的移动支持即时优化,调整大小和缓存图像.

Lazyloaders

  • lazyload -带有独立JavaScript lazyloader的lazyload图片,iframe,小部件〜1kb
  • lozad.js -纯JS中的高性能,轻量级〜0.9kb且可配置的延迟加载程序,不依赖于响应图像,iframe等

Loaders

  • HeadJS -您的HEAD中唯一的脚本. 用于响应设计,功能检测和资源加载.
  • RequireJS -RequireJS是JavaScript文件和模块加载器. 它针对浏览器内使用进行了优化,但可以在其他JavaScript环境中使用,例如Rhino和Node.
  • Labjs -是Getify Solutions支持的开源(MIT许可证)项目. LABjs的核心目的是成为一个通用的按需JavaScript加载器,能够随时随地将任何JavaScript资源从任何位置加载到任何页面中.
  • Defer.js -异步处理所有内容:使用此JS工具,可以更快地加载页面内容.
  • InstantClick -InstantClick使您网站中的以下链接即时生效.
  • JIT -用于Grunt的JIT(即时)插件加载程序. 即使有很多插件,Grunt的加载时间也不会减慢.

Metrics Monitor

  • Phantomas -基于PhantomJS的Web性能指标收集器和监视工具.
  • Showslow -开源工具,可随时监控各种网站性能指标. 它捕获YSlow,Page Speed Insights,WebPageTest和dynaTrace AJAX版的结果.
  • Bench -使用Phantomas(PhantomJS支持的客户端性能指标抓取工具). 对页面进行基准测试,将结果存储在MongoDB中,并通过内置服务器显示结果.
  • Keepfast -监视与网页性能相关的指标的工具.
  • GTmetrix -GTmetrix使用Google Page Speed和Yahoo! YSlow为网站的性能评分,并提供可行的建议来解决这些问题.
  • Pingbreak.com -具有响应时间警报的免费网站和SSL监视(在Slack,Twitter,Mattermost,Discord或自定义Webhook上).
  • Pingdom Website Speed Test -测试该页面的加载时间,对其进行分析并找到瓶颈.
  • Dotcom-tools -在全球20个地点的真实浏览器中分析您网站的速度.
  • Sitespeed.io -Sitespeed.io是一个开源工具,它将根据Web性能最佳实践规则检查您的网站,并使用Navigation Timing API收集指标. 它将创建结果的XML和HTML输出.
  • Grunt-phantomas -Grunt插件包装了幻像来衡量前端性能.
  • Perfjankie -运行时浏览器性能回归套件(Demo).
  • BrowserView Monitoring -持续检查来自世界各地的Internet Explorer,Chrome和Firefox中的网页加载时间.
  • New Relic Browser Monitoring -实时监视您的浏览器端应用程序,重点关注实际最终用户的体验.
  • DareBoost -真正的浏览器监控. 使用YSlow,Page Speed和众多自定义提示提供有关Web性能和质量的完整报告.

Metrics Monitor - API

Minifiers - HTML

  • Django-htmlmin -用于Linux的HTML压缩程序中的django-html,完全支持HTML5.它支持Django,Flask和任何其他Python网络框架. 它还提供了可用于静态网站或部署脚本的命令行工具.
  • HTMLMinifier -HTMLMinifier是一种高度可配置的,经过测试的,基于Javascript的HTML缩小器,具有类似lint的功能.
  • Grunt-contrib-htmlmin -一个咕gr的插件,用于缩小使用HTMLMinifier的HTML.
  • Gulp-htmlmin -gulp插件,用于使用HTMLMinifier缩小HTML.
  • Grunt-htmlcompressor -使用htmlcompressor的用于HTML压缩的Grunt插件.
  • HTML_minifier -用于kangax html-minifier的Ruby包装器.
  • HTML_press -用于压缩html的Ruby gem,可删除所有空白垃圾,仅保留HTML.
  • Koa HTML Minifier -使用html-minifier缩小HTML响应的中间件. 它使用html-minifier的默认选项,这些默认选项在默认情况下都处于关闭状态,因此您必须设置这些选项,否则它将无法执行任何操作.
  • HTML Minifier Online -kangax提供的HTML min工具(HTMLMinifier Creator).
  • Minimize -Minimize是基于node-htmlparser的HTML缩小器,当前,HTML缩小器仅是可用的服务器端. 客户端缩小版将在以后的版本中添加.
  • Html-minifier -一个简单的Windows命令行工具,以最小化您的HTML,Razor视图和Web窗体视图

Minifiers - JS & CSS

  • YUI Compressor -JavaScript压缩器,除了删除注释和空格外,还使用尽可能小的变量名来混淆局部变量. 即使使用诸如“ eval”或“ with”之类的构造(尽管压缩不是最佳的情况),这种混淆也是安全的.与jsmin相比,平均节省约20%.
  • UglifyJS2 -UglifyJS是用JavaScript编写的JavaScript解析器,压缩器,压缩器或美化器工具箱.
  • CSSO -CSS最小化工具与众不同. 除了常用的缩小技术外,它还可以执行CSS文件的结构优化,与其他缩小器相比,文件大小更小.
  • CSSmin.js -cssmin.js是YUICompressor的CSS缩小器的JavaScript端口.
  • Grunt-contrib-concat -用于连接文件的Grunt插件.
  • Grunt-contrib-uglify -Grunt插件,用于连接和缩小Javascript文件.
  • Clean-css -用于node.js的快速,高效且经过良好测试的CSS缩小器.
  • Django-compressor -将链接和内联javascript或CSS压缩为单个缓存文件.
  • Django-pipeline -Pipeline是Django的资产打包库,提供CSS和JavaScript串联和压缩,内置JavaScript模板支持以及可选的data-URI图像和字体嵌入.
  • JShrink -JShrink是一个PHP类,可最小化javascript,以便可以更快地将其交付给客户端.
  • JSCompress -最简约的在线JS压缩工具.
  • CSSshrink -因为CSS是渲染页面的关键路径. 它一定很小! 要不然!
  • Grunt-cssshrink -这只是CSS Shrink的包装.
  • Gulp-cssshrink -使用cssshrink for Gulp缩小CSS文件.
  • Prettyugly -丑化(带空格)或美化(添加一致的空格)CSS代码.
  • Grunt-contrib-cssmin -Grunt的CSS Minifier.
  • Gulp-cssmin -Gulp的CSS Minifier.
  • Grunt-uncss -艰巨的任务,用于从项目中删除未使用的CSS.
  • Gulp-uncss -一项从您的项目中删除未使用的CSS的任务.

Miscellaneous

  • Socialite.js -社交名流提供了一种非常容易的方法,可以随时随地实现和激活大量的社交共享按钮. 无论何时发生文档加载,文章悬停时.
  • uCSS -uCSS是用于爬网(大型)网站以查找未使用的CSS选择器,而不是删除未使用的CSS的.
  • HTTPinvoke-用于浏览器和Node.js的无依赖性HTTP客户端库,具有基于promise或基于Node.js样式的基于回调的API来处理事件,文本和二进制文件的上载和下载,部分响应主体,请求和响应标头,状态码.
  • Critical -在HTML页面(alpha)中提取和内嵌关键路径CSS.
  • Csscolormin - Utility that minifies CSS colors, example: min("white"); // minifies to "#fff".
  • StyleStats -StyleStats是一个Node.js库,用于收集CSS统计信息.
  • Lazysizes -用于图像(响应和正常),iframe和脚本的高性能惰性加载程序,无需配置即可检测到由用户交互,CSS或JavaScript触发的可见性更改.
  • Perf-Tooling -Perf Tooling是共享资源,可以跟踪新的和现有的性能工具.
  • TMI -TMI(图像太多)-在网络上发现图像的权重.

Generators

  • Glue -胶水是生成精灵的简单命令行工具:
  • Pitomba-spriter -Spriter是使用Python的CSS的简单灵活的动态精灵生成器. 它可以提供同步处理和异步处理CSS的功能,因为它提供了要在python代码中使用的类,并且还提供了一个监听程序,该监听程序侦听您的文件系统,并在更改静态值后立即更改CSS和Sprite.
  • Grunt-spritesmith -Grunt任务,用于将一组图像转换为Spritesheet和相应的CSS变量.
  • Grunt-sprite-css-replace -Grunt任务,该任务根据样式表中引用的图像生成一个精灵,然后使用新的精灵图像和位置更新引用.
  • Grunt-svg-sprite -SVG精灵和丰富的堆栈-Grunt插件环绕svg-sprite,可读取一堆SVG文件,对其进行优化,并创建各种样式的SVG精灵和CSS资源.
  • Gulp-sprite -gulp任务,用于创建图像精灵和相应的Gulp样式表.
  • Gulp-svg-sprites -用于创建svg精灵的gulp任务.
  • SvgToCSS -在css / sass精灵中优化和渲染SVG文件.
  • Assetgraph-sprite -Assetgraph变换,用于基于CSS依赖图自动生成精灵.
  • Sprite Cow -Sprite Cow可帮助您获取Spritesheet中Sprite的背景位置,宽度和高度,作为可复制CSS的一部分.
  • Spriteme -轻松创建,集成和维护CSS精灵.
  • ZeroSprites -ZeroSprites是一个CSS精灵生成器,旨在使用VLSI布局规划领域中使用的算法来最小化面积.
  • CSS Sprite Generator - CSS sprites allow you to combine multiple images into a single file.
  • Sprity -具有许多功能的模块化图像精灵生成器:支持视网膜精灵,支持不同的输出格式,从图像目录中生成精灵和适当的样式文件,等等.
  • Sprite Factory -Sprite Factory是一个ruby库,可用于生成CSS Sprite. 它将目录中的各个图像文件组合到一个统一的Sprite图像中,并创建适当的CSS样式表以用于您的Web应用程序.

SVG

  • SVGO -SVGO是用于优化SVG矢量图形文件的基于Node.js的工具.
  • SVG OMG -SVGOMG是SVGO的Missing GUI,旨在公开SVGO的大多数(如果不是全部)配置选项.
  • Grunt-svgmin -使用SVGO for Grunt缩小SVG.
  • Gulp-svgmin -使用SVGO为Gulp缩小SVG.
  • Scour -Scour是一个开放源代码的Python脚本,可以主动清除SVG文件,从而消除了某些工具或作者嵌入到其文档中的大量“内容”.
  • SVG Cleaner -SVG Cleaner可以帮助您从不必要的数据中清除SVG文件. 它具有许多清理和优化选项,以批处理模式工作,并在多核处理器上提供线程处理.

Web Components

  • Polymer Bundler -聚合物捆扎机是一个用于包装生产项目资产以最大程度减少网络往返次数的库.
  • Gulp-vulcanize -将一组Web组件连接到一个使用Vulcanize的文件中.

Web server Benchmarks

  • HTTPerf -httperf是用于衡量Web服务器性能的工具. 它提供了一种灵活的工具来生成各种HTTP工作负载和评估服务器性能.
  • Apache JMeter -开源负载测试工具:这是一个Java平台应用程序.
  • Locust -开源负载测试工具. 使用Python代码定义用户行为,并让数百万同时用户拥护您的系统.
  • Autoperf -Autoperf是httperf的ruby驱动程序,旨在帮助您自动化任何Web应用程序的负载和性能测试-在单个端点上或通过日志重播.
  • HTTPerf.rb -使用Ruby编写的用于httperf的简单Ruby接口.
  • PHP-httperf -HTTPerf.rb的PHP端口.
  • HTTPerf.js -HTTPerf.rb的JS端口.
  • HTTPerf.py -HTTPerf.rb的Python端口.
  • Gohttperf -转到HTTPerf.rb的端口.
  • wrk -HTTP基准测试工具(带有可选的Lua脚本,用于生成请求,响应 处理和自定义报告)
  • beeswithmachineguns -一种用于武装(创建)许多蜜蜂(微型EC2实例)以攻击(负载测试)目标(Web应用程序)的实用程序.
  • k6 -为开发人员构建的开源负载测试工具. 易于集成到CI管道中. 测试是用ES6 JS编写的,您可以使用HTTP / 1.1,HTTP / 2和WebSocket测试API,微服务和网站.

Web server Modules

Specs

  • Web Performance Working Group -Web性能工作组的任务是Rich Web Client活动的一部分,旨在提供方法来衡量用户代理功能和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,预连接,预取和预渲染关系. 这些原语使开发人员和服务器能够生成或交付资源,从而帮助用户代理确定应连接到哪个原始源以及应该获取和预处理哪些资源以提高页面性能的决策过程.

Stats

  • HTTP Archive -这是Web性能信息的永久存储库,例如页面大小,失败的请求和所使用的技术. 这些性能信息使我们能够了解Web的构建趋势,并提供用于进行Web性能研究的通用数据集.

Other Awesome Lists

Contributing

For contributing, open an issue 和/或 pull request.