翻译自:https://css-tricks.com/performance-tools/

嘿,各位,又到了周末总括时间!得益于大量的 Grunt 和 Gulp
插件,大家得以轻松完成网站数据的可视化,尽管深切精晓这个工具还相比较艰辛,但分门别类的将它们列出来,也是很有扶持的。

内容分发互联网(CDN)

CDN
可以帮你把网站的资源分发到世界各省,有助于增长网站的响应速度,当然,那对于那些特殊地区的用户是收效甚微的。

CloudFlare

CloudFlare 的强大之处在于它可以变成您的 DNS 服务器(CDN
只是它有着服务的一个组成部分),那样对您的网站发起的有着请求都会透过它。

CloudFlare 的 CDN
在过去十五年的安插性和进化中,并从未始终的寒酸和封建。大家的专利技术中丰盛利用了新式的技巧升高,包罗并不压制硬件、web
服务器和互联网路由。换言之,大家革新的建设了新一代的 CDN。新的 CDN
配置不难、价格低廉,其特性也一定比你利用过的任何传统 CDN 都要优质。

MaxCDN

CSS-Tricks 当前就在使用 马克斯CDN 托管所有的静态资源。它可以无缝地融为一体
WordPres 和 W3
的具备缓存资源,所以大家无需做什么样越发处理,即可将资源移入
CDN,并能有限支撑链接的准确性。

图片 1

对于一个博客来说,考虑到中间的大文件根本是 JavaScript、CSS
和图表,而不是摄像等品类,那带宽占用的可真多。

俺们的 CDN
服务均等是一个网站加快器和实时控制中央。创立它,就是为着让网站的用户和运维都能从下一代
CDN 中取得最大收入。

CloudFront

亚马逊(亚马逊)互联网服务(AWS)版本的 CDN。

亚马逊(亚马逊) CloudFront
是一个内容分发互联网服务。它可以无缝融合入其余的亚马逊(亚马逊)网络服务产品,为开发者和店家分发内容到最后用户手中提供了一种简易的措施,整个进度都抱有低顺延、高转换速度的表征,也远非最小使用量的强制必要。

CDNperf

上述的 CDNs
并不可能托管你随便的资源,它们往往只是托管最频繁用到的文书。纵然对于线上产品的话将资源和服务器托管到村办的
CDN 上并不是最好的不二法门,但那种办法对于分发资源来说仍然是很快和省略的。

CDNperf 可以帮您找出最快和最可信的 JavaScript
CDNS,让你的网站更快更有朝气。

图片 2

cdnperf

属性测试

上面的那个质量测试工具,使用了量化的形式测试了网站中诸如首字节加载时间(time
to first
byte)或者渲染时间等表现。有些工具还会检查越发检查资源是或不是被缓存,多个CSS 或 JS 文件是不是值得合并。

WebPagetest

WebPagetest
是性质测试的金子标准,它提供了多地点的量化目标用于品质测试,比如有一个中坚的评分,用于评论当前页面优化的水平;有一个截图,显示页面加载后的视觉效果;还有一个浏览器加载资源的瀑布流…

依据用户浏览器真实的连日速度,在中外范围内举行网页速度测试,并提供详细的优化指出。

图片 3

webpagetest

透过利用 API
wrapper
,也足以将
WebPagetest 的有关服务足够到 NPM 模块和命令行工具中。

  • webpagetest-mapper:将
    WebPageTest 的测试数据转换为可读的文档格式。
  • WPT Bulk
    Tester
    :使用
    谷歌(Google) Docs 测试四个 URLs(要是您具备 API key,也得以运用
    webpagetest.org 来做那件事,或者另曾外祖父开可访问的实例)。

Yslow

Yslow 基于 Yahoo
的高品质网页教条,分析网页的性质并付诸响应缓慢的原由。

Google PageSpeed

PageSpeed 依据网页最佳实践分析和优化测试的网页。

图片 4

google pagespeed

PageSpeed 也有一个 CLI(Command Line Interface)工具:PSI(PageSpeed
Insights with
reporting)

在营造进度中,可以利用 PSI
测试移动端和桌面端的性质,最后取得可读性卓越的测试结果。

图片 5

google pagespeed

自家的网站都付出到哪儿去了?

评估网站在世界各市为每个移动端用户支付的护卫费用。

图片 6

what does my site cost?

Pingdom 网站速度测试

输入 URL 地址,即可测试页面加载速度,分析并找出品质瓶颈。

图片 7

pingdom

SpeedCurve

SpeedCurve
既能够让您追踪竞争对手的特性表现,也可以追踪自己的属性表现。使用
SpeedCurve
时,你可以查阅某个因素在分歧站点的速度突显。对于移动用户来说,他们盼望网站在手机上加载起来要快于电脑,如若感觉加载迟缓,往往会飞快关上网页,所以,网站的响应速度对他们很关键。

图片 8

speedcurve

Calibre

Calibre 可以帮您追踪页面的加载时间,以及页面大小。难题页面(Janky
page)?是的,Calibre 会直接告知您怎么样页面有难点。

图片 9

image

GT Metrix

GT Metrix 结合了 谷歌 PageSpeed 和
YSlow,接济开发者创设火速、高效和完美优化的网页浏览体验。

图片 10

image

perf.js

在开发进度中,将品质的时序境况彰显在页面上。

perf bar

一种简单的方法,用于神速收集和查看网页质量,提供预置的量化标准,也支撑自定义的量化标准。

grunt-perfbudget

用以评估质量的 Grunt task。 grunt-perfbudget 使用 WebPagetest
的公有或个体实例在一定的 URL
进行测试。它会将测试结果和您预期的特性期望做相比,假若低于预期,那么这么些task
就顺利落成了,即使当先了您预期的品质期望,那么就会报告败北,并且会帮助您解析超出预期的原委。

Sitespeed

Sitespeed.io
是一个基于最佳实践以及部分加载时序等量化标准的开源工具,有助于开发者分析网页的加载速度和渲染品质。它会从开发者的站点收集多个页面的数量,依据最佳实践等规则来分析这几个网页,并将结果以
HTML 的花样出口,或者以数值的款式发送到 Graphite。

speedgun

该网站允许你使用
Speedgun.js
收集任意公开站点的质量数据。它会运行一遍,并浮现一个谈得来的示图,辅助开发者精晓当下页面的加载进度。

gulp size

体现档次大小。

图片 11

image

浏览器工具盒插件

Chrome 开发者工具

在 Chrome
的开发者工具中,对于评估质量有多个可怜有效的竹签:Audits

Network

奥迪(Audi)t
面板用于分析加载的页面。它可以提供优化提出,减少页面加载时间,加速页面的响应速度。

图片 12

image

Network
面板以动态的措施实时地出示了资源的伸手和下载。就算辨析和一定那些请求会比纯粹的加载页面多花一些时刻,但那么些消耗对于辅导页面的特性优化是越发紧要的。

图片 13

image

火狐开发者浏览器

该浏览器是为开发者而创造的,专注于劳动开发者的工作流。那是有史以来第一遍,将营造、测试和伸张等服务集中于一体。

越多新闻请查看 MDN 上的 Network
Monitor

Page performance

其一扩充插件应用于 Chrome
浏览器,可以开速分析当前页面的习性。就算浏览器打开了八个标签,那么该插件会自动分析当前页面的品质表现。

图片 14

image

审查

PerfAudit

大家查对页面的加载和渲染品质。对于令人反感的响应缓慢和题材页面,大家有本分的职责提供快捷、稳定和高精度的页面。

Perfmonkey

PerfMonkey 让追踪页面的渲染品质变得最好简单。

SVG 和图片

ImageOptim

ImageOptim
是一个免费的利用,它在收缩图片体积、提升加载速度的还要,还不会捐躯图片质量。它优化了压缩参数、移除了不算的头信息和非要求的颜料配置音讯。

图片 15

image

它也能够被合并到 Grunt 和 Gulp 中。

SVGO

SVG Optimizer 是一个基于 Nodejs 的 SVG 矢量图形优化工具。

即使你须求的是相互界面的操作,而不是 CLI,那么可以下载那么些
APP

SVGOMG

SVGOMG 是 SVGO’s Missing GUI 的缩写,意在揭破 SVG
文件的严重性难点,而不负有 SVGO 的总体可配置项。

图片 16

image

手动优化 SVGs

类似于其余的图形文件,SVG 也理应在上线前被优化。尽管有好多好像 Raymond的工具得以帮您做那种优化,但最好的点子如故尖锐领会其细节并做一些手动的优化。

Triamge

Triamge 是一个扩平台的 GUI 和 CLI
工具,用于优化网站的图形文件。它结合使用 optipng、pngcrush、advpng 和
jpegoptim,并按照文件类型做优化(最新版本中,已经支撑 PNG 和 JPG)。

图片 17

image

CSS

CSS Triggers

该网站用于展现什么 CSS 属性可以影响浏览器的布局、渲染和此外组成操作。

图片 18

image

愈多关于 CSS-triggers
的音讯,可以点击那里查看

CSS Stats

该网页应用以可视化的样式显得了开发者项目中有关 CSS 的计算音讯。

图片 19

image

CSS Shrink

CSS 压缩工具。由于 CSS
是页面渲染的中坚文件,所以必须维持轻巧,便于急速响应和渲染。

uncss

UnCSS 是一个用以移除脚本中没用 CSS
的工具。它可以审核三个文本,也得以核查由 JavaScript 注入的 CSS。

它也得以被购并到 Grunt 和 Gulp 中。

Critical path

领取和构成 HTML 中关键的 CSS。

HTML

HTMLMinifier

HTMLMinifier 是一个中度可配备、经过完美的测试、基于 JavaScript 的 HTML
压缩工具,并且放置了代码审查类的工具。

gulp-htmlmin

用以压缩 HTML 的 gulp 插件。

grunt-contrib-htmlmin

用来压缩 HTML 的 grunt 插件。

JavaScript

uglifyjs

JavaScript 解析器、混淆、压缩和美化工具集。

它也可以被合并到 Grunt 和 Gulp 中。

您恐怕并不要求某些 jQuery 插件

jQuery
及其直属工具都是老大不错的种类,使用它们往往使支付工作轻松而又快捷。

单向,假若您正在开发一个库,那么你需求思想一下是不是真的需求借助于
jQuery。也许你只要求引入几行代码,就足以甩掉引入一个库完毕某些意义。如若你的库只是指向于高级浏览器,那么可能一向调用浏览器的嵌入函数就可以兑现相关职能了。

图片 20

image

伸张阅读

相关文章

网站地图xml地图