www.301.net:前端性能优化和测试工具总结,值得收藏

值得珍藏!Web开荒的种种质量工具

2015/06/22 · HTML5 ·
性能

原稿出处: Robin
Rendle   译文出处:南北   

嘿,各位,又到了周日总括时间!得益于大批量的 Grunt 和 Gulp
插件,大家得以轻松完成网址数量的可视化,尽管深刻精晓那几个工具还比较困难,但比物连类的将它们列出来,也是很有救助的。

翻译自:

如何是主要 CSS

2017/10/05 · CSS ·
CSS

原稿出处: Dean
Hume   译文出处:众成翻译   

网络速度超慢,不过有大器晚成部分大概的战略能够使网址变快。此中之大器晚成就是将关键的css内联插入到网页的“标签,
然而,如若您的网址富含数百页,以至更不佳的是包涵数百种不相同的模板,那么您该如何是好吧?
你无法手动做那事。 Dean休谟解释了二个简约的点子来造成它。倘让你是经验丰硕的网页开采职员,您或者会发掘那篇文章综上说述,并且明显,但对于你的顾客和低档开拓职员来讲,那是二个很好的拈轻怕重。—
Ed.

提供高速,流畅的网络体验是几天前营造网址的注重片段。
大多数场合下,大家开垦网址,而不去精通浏览器实际在做什么。
浏览器是哪些从大家创制的HTML,CSS和JavaScript渲染大家的网页?
大家什么运用这几个文化来加紧大家网页的渲染

内容分发互连网(CDN)

CDN
能够帮你把网址的财富分发到世界各市,有利于进步网址的响应速度,当然,那对于这些特殊地区的客户是收效甚微的。

嘿,各位,又到了星期天总括时间!得益于多量的 Grunt 和 Gulp
插件,我们得以轻易完结网址数量的可视化,就算深远精晓那么些工具还比较不方便,但分类一下的将它们列出来,也是很有救助的。

在 SmashingMag阅读更多:

  • 改正打碎杂志的展现:案例研究
  • PostCSS介绍
  • 预加载,有啥受益?
  • 前面贰特性能检查表

意气风发经自身想快速提升网址的性情, 谷歌的 PageSpeed
Insights
工具是小编的首要推荐。 当尝试检查测试网页并找到须要改善的区域时,那可怜实用。
您只需输入要测量检验的页面包车型大巴U库罗德L,该工具就能提供意气风发雨后苦笋质量提出。

假如你已经通过PageSpeed
Insights工具运维自身的网址,您恐怕会遇到以下提议。

www.301.net 1

CSS and JavaScript 会阻塞页面的渲染。
(查看大图)

笔者必得承认,小编首先次会见这几个时有一些纠葛。 该建议的剧情如下:

“要是以下财富未下载完结,您的页面上的其余内容都不会被渲染。
尝试推迟或异步加载阻塞能源,或直接在HTML中内联嵌入那一个能源的基本点部分。“

幸运的是,肃清那几个难点比看起来更简便易行!
答案在于CSS和JavaScript在你的网页中的加载方式。

CloudFlare

CloudFlare 的兵不血刃之处在于它能够改为您的 DNS 服务器(CDN
只是它具备服务的贰个组成都部队分),那样对您的网址发起的全体央浼都会透过它。

CloudFlare 的 CDN
在过去十五年的宏图和前行中,并不曾一向的半封建和古板。大家的专利技术中充裕利用了最新的才具发展,满含并不防止硬件、web
服务器和网络路由。换言之,大家立异的建设了新一代的 CDN。新的 CDN
配置不难、价格低廉,其质量也必定比你利用过的别的守旧 CDN 都要美丽。

CDN
能够帮您把网站的能源分发到世界外省,有帮衬坚实网址的响应速度,当然,那对于那多少个特殊地区的顾客是收效甚微的。

什么是第意气风发CSS?

对CSS文件的伸手能够鲜明加多网页呈现所需的时间。
原因是私下认可景况下,浏览器将延期页面展现,直到它形成加载、拆解深入分析和施行全部在“页面”中引用的CSS文件。
这样做是因为它须要计算页面包车型大巴布局。

不好的是,这表暗暗提示气风发旦大家有多少个特别大的CSS文件,何况须要生龙活虎段时间本领达成下载,大家的顾客就要浏览器初阶表现页面在此以前等待整个文件被下载下来。
幸运的是,有贰个琳琅满指标技术,使咱们能够优化咱们的CSS的传输并缓慢解决阻塞。这种技艺被称呼优化关键渲染路线。
关键渲染路线表示浏览器显示页面包车型大巴有着必需步骤。
我们想要找到细小的短路CSS集结 ,或者关键 CSS,以使页面展现给顾客。
要害能源是唯恐过不去页面首屏展现的有着能源。
那背后的主见是,网址应当在前多少个TCP数据包响应中为客户获得第一个显示屏的内容(或“首屏”内容)。
想要简要询问什么在网页上干活,请查看下边包车型大巴图片。

www.301.net 2

要害 CSS是向客商显示第风流倜傥屏的剧情所需CSS的起码集结。
(翻开大图)

在上面的示范中,网页的根本部分只是顾客在第一遍加载页面时得以观察的剧情
那意味着大家只须求加载最一些些的CSS来渲染页面顶上部分的内容。
对于CSS的别的部分,大家不须求担忧,因为大家得以异步加载它。

小编们怎么显著第少年老成CSS?
明确页面包车型地铁最首要CSS是格外复杂的,必要你浏览网页的DOM。
接下来,大家须求分明当前使用于视图中各样成分的样式列表。
手动实践此操作将是多少个累赘的经过,但是有个别很棒的工具得以自行实践那么些进程。

在本文中,笔者将向你显示什么使用重要的CSS进步你的网页呈现速度,并介绍三个足以协助您自动推行此进度的工具。

MaxCDN

CSS-Tricks 当前就在行使 马克斯CDN 托管全体的静态财富。它能够无缝地融为风姿浪漫体
WordPres 和 W3
的持有缓存财富,所以我们无需做怎么样极其管理,就可以将能源移入
CDN,并能保障链接的准确性。

www.301.net 3

对于二个博客来讲,驰念到里面包车型大巴大文件重大是 JavaScript、CSS
和图纸,实际不是摄像等体系,那贷款占用的可真多。

我们的 CDN
服务同样是一个网址加速器和实时间调节制宗旨。创制它,便是为了让网址的客商和平运动维都能从下一代
CDN 中取得最大受益。

CloudFlare

CloudFlare 的有力之处在于它能够成为你的 DNS 服务器(CDN
只是它兼具服务的三个组成都部队分),那样对你的网址发起的有所央求都会经过它。

CloudFlare 的 CDN
在过去十一年的筹算和前行中,并不曾一直的半封建和古板。大家的专利本事中充裕利用了最新的本事升高,富含并不仰制硬件、web
服务器和互联网路由。换言之,我们革新的建设了后辈的 CDN。新的 CDN
配置轻易、价格低廉,其属性也自然比你利用过的任何守旧 CDN 都要精粹。

关键CSS实践

接纳主要CSS,大家必要改换我们处理CSS的点子 – 那象征将其分为七个文件。
对于第二个文本,我们仅领到渲染上述剧情所需的细小CSS集,然后将其内联在网页中。
对于第3个文件或非关键的CSS,大家异步加载它,避防阻塞网页。

一同首就如有一些意料之外,可是通过将重大的CSS集成到HTML中,大家能够去掉关键路径中的额外的央浼。
那使大家可以在贰次倡议中提供关键的CSS,以尽快向客商体现页面。

上边包车型地铁代码给出了一个基本的事例。

JavaScript

<!doctype html> <head> <style> /* 内联CSS */
</style> “<script> loadCSS(‘non-critical.css’);
</script>“ </head> <body> …body goes here
</body> </html>

1
2
3
4
5
6
7
8
9
&lt;!doctype html&gt;
&lt;head&gt;
  &lt;style&gt; /* 内联CSS */ &lt;/style&gt;
  “&lt;script&gt; loadCSS(‘non-critical.css’); &lt;/script&gt;“
&lt;/head&gt;
&lt;body&gt;
  …body goes here
&lt;/body&gt;
&lt;/html&gt;

如上,大家将器重CSS内联在style 标签中。然后,使用 loadCSS();
异步加载非关键的CSS。 那比较重视,因为我们在显示首屏后加载辛劳的(非关键)
CSS。

胚胎,那不啻是一场惊恐不已的梦。 为何要手动在各种页面内嵌CSS片段?
可是有八个好信息,那个进度能够自动化,在这里个事例中,小编将运行贰个名叫Critical
的工具。 Addy Osmani
创设,它是贰个同意你自动提取和内联关键路线CSS到HTML中的的Node.js包。
作者将把这几个工具和 Grunt 一齐介绍,
Grunt是三个JavaScript 任务实践器, 自动处理CSS。 假诺您前边没听过Grunt,
这么些网址有部分老大 详细文档,
以致安排项指标各类解释。作者后面博客介绍过那一个工具.

CloudFront

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

亚马逊(Amazon) CloudFront
是二个剧情分发互连网服务。它能够无缝融入入其余的亚马逊(亚马逊)网络服务产品,为开荒者和同盟社分发内容到最后客商手中提供了生龙活虎种简单的不二等秘书诀,整个经过都抱有低顺延、高调换速度的特色,也尚无最小使用量的威迫供给。

MaxCDN

CSS-Tricks 当前就在利用 马克斯CDN 托管全数的静态财富。它能够无缝地融合WordPres 和 W3
的有所缓存财富,所以我们无需做什么特别管理,就可以将能源移入
CDN,并能保险链接的准头。

www.301.net 4对此二个博客来讲,考虑到内部的大文件根本是
JavaScript、CSS 和图表,实际不是摄像等项目,那带宽占用的可真多。

大家的 CDN
服务相符是一个网址加快器和实时间调控制中央。创立它,正是为着让网址的客户和平运动维都能从下一代
CDN 中取得最大收益。

开始

我们先从Node.js调节台起头,并导航到你的网址的门径。
通过在你的调节新竹输入以下命令来设置Grunt命令行分界面:

npm install -g grunt-cli 

1
2
npm install -g grunt-cli


这将把grunt一声令下放在你的体系路线中,允许从其余目录运维它。
接下来,使用以下命令安装Grunt职务运转程序:

npm install grunt –save-dev 

1
2
npm install grunt –save-dev


接下来安装 grunt-critical
插件.

npm install grunt-critical –save-dev 

1
2
npm install grunt-critical –save-dev


接下去,您供给创设项目职责布置的Gruntfile。 看起来有一点像上面的代码。

module.exports = function (grunt) { grunt.initConfig({ critical: { dist:
{ options: { base: ‘./’ }, // The source file src: ‘page.html’, // The
destination file dest: ‘result.html’ } } }); // Load the plugins
grunt.loadNpmTasks(‘grunt-critical’); // Default tasks.
grunt.registerTask(‘default’, [‘critical’]); }; 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
module.exports = function (grunt) {
grunt.initConfig({
  critical: {
    dist: {
      options: {
        base: ‘./’
      },
      // The source file
      src: ‘page.html’,
      // The destination file
      dest: ‘result.html’
      }
    }
  });
  // Load the plugins
  grunt.loadNpmTasks(‘grunt-critical’);
  // Default tasks.
  grunt.registerTask(‘default’, [‘critical’]);
};


在地点的代码中,笔者布署了 Critical 插件来查阅本人的page.html文本。
然后它会基于给定的页面管理CSS来计算关键的CSS。
接下来,它将内联关键的CSS并相应地改善HTML页面。

透过在调整高雄输入grunt来运行插件。

www.301.net 5

利用Grunt自动物检疫查测量试验网络质量。(查阅大图)

假若您导航到该公文夹,则应该会静心到二个名字为result.html的公文,当中带有内联的关键CSS,而剩余的CSS异步加载。
您的网页现在就足以行使了!

在暗地里, 插件自动使用 PhantomJS,
多个无头WebKit浏览器,捕获所需的显要CSS。
那象征它能够静默地加载您的网页并测量试验最佳关键CSS。
这么些作用还保障了插件在不相同荧屏尺寸上的眼观六路。
举例,您能够提供差别的显示屏尺寸,插件将相应地捕获并内联您的首要性CSS

critical: { dist: { options: { base: ‘./’, dimensions: [{ width: 1300,
height: 900 }, { width: 500, height: 900 }] }, files: [ {src:
[‘index.html’], dest: ‘dist/index.html’} ] } } 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
critical: {
  dist: {
    options: {
      base: ‘./’,
      dimensions: [{
        width: 1300,
        height: 900
      },
      {
        width: 500,
        height: 900
      }]
    },
    files: [
      {src: [‘index.html’], dest: ‘dist/index.html’}
    ]
  }
}


地点的代码将从多少个维度管理给定的文件,并内联相应的首要CSS。
那象征你能够依据多个显示屏宽度运转您的网址,并确定保证您的客商依旧具备同等的经验。
大家领悟,使用3G和4G的运动连接可能是不平稳的 –
那便是干吗这种才干对于移动顾客来讲那样重大。

CDNperf

上述的 CDNs
并无法托管你轻便的能源,它们往往只是托管最频仍用到的文本。固然对于线上产品的话将能源和服务器托管到村办的
CDN 上实际不是最棒的点子,但这种艺术对于分发财富来讲还是是快速和简单的。

CDNperf 能够帮您寻觅最快和最可相信任的 JavaScript
CDNS,令你的网址越来越快更有朝气。

www.301.net 6

CloudFront

亚马逊(Amazon)网络服务版本的 CDN。

亚马逊(亚马逊) CloudFront
是二个内容分发互联网服务。它能够无缝融入入其余的亚马逊互连网服务产品,为开辟者和商场分发内容到最后客户手中提供了意气风发种简易的形式,整个经过都有着低顺延、高调换速度的性子,也绝非最小使用量的劫持须要。

在生养条件中央银行使Critical

利用Critical那样的工具是机关提取和内联关键CSS的好方法,而没有必要改造开拓网址的办法,但是什么适应真实况景?
要将新更新的文本置于目的文件,您只需服从平日的主意开展配备 –
无需在生产情形中改造。
您只需记住,每一趟创设或改换CSS文件时,都急需周转Grunt。

作者们在本文中运作的代码示例包含了单个文件的使用,但是当你需求管理八个文件重大CSS以致整个文件夹时会产生什么样?
您的Gruntfile能够立异以管理八个公文,相同于上边包车型大巴示范。

critical: { dist: { options: { base: ‘./’, dimensions: [{ width: 1300,
height: 900 }, { width: 500, height: 900 }] }, files: [ {src:
[‘index.html’], dest: ‘dist/index.html’}, {src: [‘blog.html’], dest:
‘dist/blog.html’} {src: [‘about.html’], dest: ‘dist/about.html’} {src:
[‘contact.html’], dest: ‘dist/contact.html’} ] } } 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
critical: {
  dist: {
    options: {
      base: ‘./’,
      dimensions: [{
        width: 1300,
        height: 900
       },
       {
        width: 500,
        height: 900
      }]
    },
    files: [
      {src: [‘index.html’], dest: ‘dist/index.html’},
      {src: [‘blog.html’], dest: ‘dist/blog.html’}
      {src: [‘about.html’], dest: ‘dist/about.html’}
      {src: [‘contact.html’], dest: ‘dist/contact.html’}
    ]
  }
}


您仍是可以运用以下代码对给定文件夹中的每种HTML文件试行职务:

critical: { dist: { options: { base: ‘./’, dimensions: [{ width: 1300,
height: 900 }, { width: 500, height: 900 }], src: ‘*.html’, dest:
‘dist/’ } } } 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
critical: {
  dist: {
    options: {
      base: ‘./’,
      dimensions: [{
        width: 1300,
        height: 900
      },
      {
        width: 500,
        height: 900
      }],
      src: ‘*.html’,
      dest:  ‘dist/’
    }
  }
}


上边的代码示例能够让你深刻了然什么在您的网址上完结。

品质测量检验

上面包车型地铁这一个质量测量试验工具,使用了量化的主意测量检验了网址中诸如首字节加载时间(time
to first
byte)大概渲染时间等展现。有个别工具还有可能会检查特检财富是或不是被缓存,七个CSS 或 JS 文件是还是不是值得合併。

CDNperf

上述的 CDNs
并无法托管你随意的财富,它们往往只是托管最频繁用到的文件。尽管对于线上产品来讲将能源和服务器托管到村办的
CDN 上并非最棒的措施,但这种方法对于分发财富来讲还是是便捷和简易的。

CDNperf 能够帮你寻觅最快和最可信赖任的 JavaScript
CDNS,让您的网址更加快更有朝气。

www.301.net 7cdnperf

下边包车型客车这几个品质测量检验工具,使用了量化的艺术测量检验了网址中诸如首字节加载时间(time
to first
byte)或许渲染时间等表现。有个别工具还也许会检查特检能源是或不是被缓存,多个CSS 或 JS 文件是或不是值得合併。

测试

长期以来,测验任何新的变动是老大主要的。
假诺你想要测量检验更正,有风度翩翩部分很棒的工具得以在线免费使用。进到 Google’s
PageSpeed
Insights
并由此该工具运行您的UOdysseyL。
您应该专心到,您的网页现在不再具有任何阻塞能源,况且您的习性改进提议已经变绿
。而你只怕也知根知底了另三个传奇人物的工具。WebPagetest

www.301.net 8

接受WebPagetest是测验你的网页及时呈现的好措施。
(翻开大图)

它是一个免费的工具,能够令你从全球各种地点张开网址速度测验。
除了对你的网页的内容进行增添的解析性检查核对,若是您采纳“Visual
Comparison”, 该工具将比较八个网页。
那是相比立异您的首要CSS早先和后来的结果并回看差距的好点子。

使用重要CSS的主张是,大家的网页会火速显现,进而尽快向客商体现内容。
衡量那么些的最棒点子是采用 speed
index.
WebPagetest选拔的度量方法是衡量页面内容的视觉填充速度。SpeedIndex衡量可视页面加载的视觉进程,并总计内容绘制速度的完好得分。
比较
SpeedIndex度量通过内联关键CSS在此以前和后来的改造。
您将对您的渲染时间的改动非常吃惊。

WebPagetest

WebPagetest
是性质测验的黄金规范,它提供了多地方的量化指标用于质量测验,比方有二个基本的评分,用于商议当前页面优化的档期的顺序;有二个截图,呈现页面加载后的视觉效果;还也是有八个浏览器加载能源的瀑布流…

听大人讲客户浏览器真实的接连速度,在世上限量内实行网页速度测量检验,并提供详实的优化提议。

www.301.net 9

通过运用 API
wrapper,也得以将
WebPagetest 的有关服务丰盛到 NPM 模块和命令行工具中。

  • webpagetest-mapper:将
    WebPageTest 的测验数据调换为可读的文书档案格式。
  • WPT Bulk
    Tester:使用 谷歌(Google)Docs 测量检验三个 UGL450Ls(假若你抱有 API key,也得以使用 webpagetest.org
    来做那事,或然其余公开可访谈的实例)。

WebPagetest

WebPagetest
是性质测量试验的黄金标准,它提供了多地点的量化目标用于品质测验,举例有二个大旨的评分,用于商量当前页面优化的品位;有四个截图,显示页面加载后的视觉效果;还也许有四个浏览器加载财富的瀑布流…

依附客商浏览器真实的总是速度,在天下限量内张开网页速度测量检验,并提供详实的优化提出。

www.301.net 10webpagetest

透过动用 API wrapper,也得以将 WebPagetest 的相干服务丰裕到 NPM
模块和命令行工具中。

  • webpagetest-mapper:将 WebPageTest 的测验数据调换为可读的文书档案格式。
  • WPT Bulk Tester:使用 谷歌(Google) Docs 测量检验多少个 U大切诺基Ls(假诺你具备 APIkey,也得以应用 webpagetest.org
    来做那事,也许其它公开可访问的实例)。

深远明白

正如超越八分之四优化学工业具,对你的网址总有利弊。破绽之一是
错过浏览器中的CSS缓存 。 如若动态网页改进频仍,大家不希望缓存HTML页面
那意味内联CSS
历次重复下载。
须求证实的是只列出首要的CSS,异步加载剩下的非关键的CSS。
大家得以缓存非关键的CSS。有非常多对立和辩驳关于在“中内联CSS,
驾驭越来越多小编推荐 汉斯 Christian Reinl的博客 “A counter statement: Putting
the CSS in the
head”。

设若您使用(CDN),也值得意气风发提的是,您还应该 从CDN中提供非关键的CSS
这样做允许你平素从边缘提供缓存的财富,提供越来越快的响合时间,并非同步路由到源服务器来博取它们。

对于价值观的网页,内联CSS的技艺运作卓越,但据说你的状态,只怕并不三回九转适用。
借使您有客商端JavaScript生成HTML怎么做?
要是你在单页面应用程序上怎么做?
倘诺您尽恐怕多地出口关键的CSS,它将升格页面渲染效果。
精晓关键CSS的办事原理及是或不是适用于你的网页,这一点很关键。 我心爱得舍不得甩手GuyPodjarny对此的立足点:

“尽管有那么些约束,Inline在前面四个优化领域照旧是三个相当的重大的工具。
因而,你应当选取它,但要小心,不要滥用它。“

—Guy Podjarny


“怎么内联一切不是答案”,他提供了有关如曾几何时候应该_如何时候不该放手CSS的好建议。

Yslow

Yslow 基于 Yahoo
的高质量网页教条,解析网页的习性并付诸响应缓慢的案由。

Yslow

Yslow 基于 Yahoo
的高品质网页教条,解析网页的习性并交付响应缓慢的源委。

那不完美

固然变化和内联关键CSS所需的数不尽工具都在不断改过,但只怕还也许有一点急需纠正的圈子。
假如你发掘其它错误,您的等级次序,open up an
issue
或提议央浼,并在GitHub贡献项目。

为您的网址优化关键渲染路线能够大大校勘页面加载时间。
使用这种技术使大家能够利用响应式布局,而不会影响其显明的独特之处。
那也是确定保证您的页面加载高效而不妨碍你的布置性的好方法。

Google PageSpeed

PageSpeed 依照网页最棒实行剖析和优化测量检验的网页。

www.301.net 11

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

在营造进度中,能够接受 PSI
测验移动端和桌面端的性质,最后得到可读性非凡的测量检验结果。

www.301.net 12

Google PageSpeed

PageSpeed 依据网页最棒实行剖判和优化测验的网页。

www.301.net 13google
pagespeed

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

在创设进度中,可以使用 PSI
测量检验移动端和桌面端的质量,最后收获可读性特出的测量检验结果。

www.301.net 14google
pagespeed

越来越多财富

假诺您喜爱使用任何创设系统(如Gulp),则能够直接运用插件,而没有必要下载Grunt。
还会有一个有效的课程,怎样利用Gulp优化骨干页面.

还应该有任何插件能够提取你的重中之重CSS,比方
Penthouse,和来自Filament
公司的criticalCSS。小编显著推荐
“大家什么使EscortWD网址飞速加载”
驾驭怎么运用这么些工夫来保管他们的网页尽恐怕快地加载。

Smashing Magazine的总编维达ly Friedman写了豆蔻梢头篇关于Smashing
Magazine怎么样改过表现的篇章 improved the
performance
。倘诺您想询问关于渲染路径的更加多音信,那么在Udacity网址上得以无需付费应用
三个实用的课程。 Google
Developers
website
也是有关于
优化CSS传输的情节。
Patrick Hamman 写了后生可畏篇博客关于
怎样分辨关键的CSS创设越来越快的网页。

默许情状下,您是或不是在您的连串中放到关键CSS? 你选取什么工具?
你遇见什么难点? 款待在篇章下方分享你的经验!

(il, rb, ml, og)

1 赞 2 收藏
评论

www.301.net 15

自身的网址都付出到哪个地方去了?

评估网址在世界各市为各样移动端顾客支出的维护开销。

www.301.net 16

本人的网址都付出到哪个地方去了?

评估网址在世界各省为每一种移动端顾客支付的保养资金财产。

www.301.net 17what
does my site cost?

Pingdom 网址速度测量检验

输入 U瑞鹰L 地址,就可以测验页面加载速度,解析并寻找质量瓶颈。

www.301.net 18

Pingdom 网址速度测量检验

输入 U大切诺基L 地址,就能够测量检验页面加载速度,深入分析并搜索品质瓶颈。

www.301.net 19pingdom

SpeedCurve

SpeedCurve
既可以够让您追踪竞争对手的天性表现,也能够追踪自身的属性表现。使用
SpeedCurve
时,你能够查阅有个别因素在分化站点的进程呈现。对于移动客商来说,他们盼望网址在手提式有线电话机上加载起来要快于计算机,若是认为到加载迟缓,往往会快速关上网页,所以,网址的响应速度对他们很关键。

www.301.net 20

SpeedCurve

SpeedCurve
不只能够让您追踪竞争对手的习性表现,也足以追踪自身的特性表现。使用
SpeedCurve
时,你能够查看某些因素在差别站点的快慢展现。对于移动客商来讲,他们希望网站在四弟大上加载起来要快于Computer,假若感觉加载迟缓,往往会急忙关上网页,所以,网址的响应速度对他们很入眼。

www.301.net 21speedcurve

Calibre

Calibre 能够帮您追踪页面包车型客车加载时间,以致页面大小。难点页面(Janky
page)?是的,Calibre 会直接告诉您怎么样页面相当。

www.301.net 22

Calibre

Calibre 可以帮您追踪页面包车型地铁加载时间,以致页面大小。难题页面(Janky
page)?是的,Calibre 会直接告诉您什么样页面有标题。

www.301.net 23image

GT Metrix

GT Metrix 结合了 Google PageSpeed 和
YSlow,援救开采者成立飞速、高效和全面优化的网页浏览体验。

www.301.net 24

GT Metrix

GT Metrix 结合了 谷歌(Google) PageSpeed 和
YSlow,扶持开垦者创制飞快、高效和完美优化的网页浏览体验。

www.301.net 25image

perf.js

在付出进度中,将品质的时序意况显示在页面上。

perf.js

在开拓进程中,将品质的时序情状展现在页面上。

perf bar

生机勃勃种简单的艺术,用于急迅采摘和查看网页品质,提供预置的量化规范,也支撑自定义的量化标准。

perf bar

生龙活虎种简易的点子,用于火速搜聚和查阅网页性能,提供预置的量化规范,也支撑自定义的量化标准。

grunt-perfbudget

用以评估品质的 Grunt task。 grunt-perfbudget 使用 WebPagetest
的公有或个人实例在特定的 U大切诺基L
进行测量检验。它会将测验结果和您预期的品质期望做相比较,就算低于预期,那么这些task
就顺遂完结了,借使高出了你预期的性格期待,那么就会告诉败北,何况会援助您剖析超过预想的来由。

grunt-perfbudget

用来评估品质的 Grunt task。 grunt-perfbudget 使用 WebPagetest
的公有或个体实例在特定的 U逍客L
实行测量试验。它会将测量试验结果和您预期的属性期望做相比,若是低于预期,那么这么些task
就顺遂达成了,假使抢先了您预期的习性期待,那么就能够告知战败,况且会推搡您深入分析超过预期的案由。

Sitespeed

Sitespeed.io
是几个依据最棒施行以致部分加载时序等量化典型的开源工具,有辅助开拓者解析网页的加载速度和渲染品质。它会从开辟者的站点采摘八个页面的数码,依照最好推行等法规来深入分析这么些网页,并将结果以
HTML 的情势出口,恐怕以数值的花样发送到 Graphite。

Sitespeed

Sitespeed.io
是三个基于最好施行以及一些加载时序等量化标准的开源工具,有利于开采者深入分析网页的加载速度和渲染质量。它会从开荒者的站点采撷五个页面包车型地铁数额,依据最好履行等法则来解析那么些网页,并将结果以
HTML 的款型出口,只怕以数值的样式发送到 Graphite。

speedgun

该网址允许你利用 Speedgun.js 收集任性公开站点的特性数据。它会运作肆遍,并出示一个谈得来的示图,扶持开垦者精晓当前页面包车型大巴加载进程。

speedgun

该网址允许你利用 Speedgun.js
搜罗任性公开站点的质量数据。它会运转陆回,并呈现二个团结的示图,扶持开辟者了然当下页面包车型地铁加载进程。

gulp size

来得等级次序大小。

www.301.net 26

gulp size

彰显档期的顺序大小。

www.301.net 27image

浏览器工具盒插件

Chrome 开垦者工具

在 Chrome 的开辟者工具中,对于评估品质有八个可怜管用的竹签:奥迪ts 和
Network。

奥迪(Audi)t
面板用于解析加载的页面。它能够提供优化建议,减弱页面加载时间,加速页面包车型地铁响应速度。

www.301.net 28image

Network
面板以动态的情势实时地显示了财富的诉求和下载。纵然分析和固定那些乞求会比纯粹的加载页面多花一些年华,但这一个消耗对于指引页面包车型地铁属性优化是不行重大的。

www.301.net 29image

Chrome 开荒者工具

在 Chrome
的开采者工具中,对于评估品质有四个极其实用的竹签:Audits 和 Network。

奥迪(Audi)t
面板用于剖析加载的页面。它能够提供优化指出,减弱页面加载时间,加速页面包车型客车响应速度。

www.301.net 30

Network
面板以动态的不二秘技实时地呈现了财富的央浼和下载。即使剖释和一向这么些诉求会比纯粹的加载页面多花一些小时,但那个消耗对于指引页面包车型地铁品质优化是可怜关键的。

www.301.net 31

火狐开采者浏览器

该浏览器是为开辟者而创办的,专心于劳动开荒者的职业流。那是历来第四回,将营造、测量试验和扩充等劳动集中于风度翩翩体。

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

火狐开荒者浏览器

该浏览器是为开垦者而创办的,专一于服务开拓者的职业流。那是常常有第二遍,将创设、测量检验和扩展等劳动集中于大器晚成体。

越来越多音讯请查看 MDN 上的 Network
Monitor。

Page performance

其生机勃勃扩大插件应用于 Chrome
浏览器,能够开速剖析当前页面包车型地铁个性。假诺浏览器张开了多个标签,那么该插件会活动分析当前页面包车型大巴质量表现。

www.301.net 32image

Page performance

其意气风发扩展插件应用于 Chrome
浏览器,能够开速分析当前页面的性质。如若浏览器展开了多少个标签,那么该插件会自行剖判当前页面包车型大巴特性表现。

www.301.net 33

PerfAudit

我们审查批准页面包车型客车加载和渲染质量。对于令人恶感的响应缓慢和难点页面,大家有本分的职责提供急忙、牢固和标准的页面。

审查

Perfmonkey

PerfMonkey 让追踪页面包车型大巴渲染质量变得最佳轻巧。

PerfAudit

咱俩审查批准页面包车型地铁加载和渲染质量。对于令人反感的响应缓慢和难题页面,大家有本分的沉重提供急速、稳定和高精度的页面。

ImageOptim

ImageOptim
是一个无偿的选择,它在回退图片体积、提升加载速度的同一时候,还不会牺牲图片质量。它优化了裁减参数、移除了没用的头音信和非供给的水彩配置消息。

www.301.net 34image

它也足以被并入到 Grunt 和 Gulp 中。

Perfmonkey

PerfMonkey 让追踪页面包车型地铁渲染质量变得非常轻便。

SVGO

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

假定你供给的是互相分界面的操作,并非 CLI,那么能够下载那些 APP。

SVG 和图片

SVGOMG

SVGOMG 是 SVGO’s Missing GUI 的缩写,意在揭发 SVG
文件的最首要难点,而不富有 SVGO 的完整可安插项。

www.301.net 35image

ImageOptim

ImageOptim
是八个免费的应用,它在调整和减少图片体积、提升加载速度的同一时间,还不会牺牲图片品质。它优化了滑坡参数、移除了没用的头新闻和非必要的颜色配置音信。

www.301.net 36

它也足以被并入到 Grunt 和 Gulp 中。

手动优化 SVGs

近似于任何的图形文件,SVG 也相应在上线前被优化。就算有不知凡几相符 Raymond的工具得以帮你做这种优化,但最棒的不二等秘书技如故浓烈驾驭其细节并做一些手动的优化。

SVGO

SVG Optimizer 是二个根据 Nodejs 的 SVG 矢量图形优化学工业具。

如果您要求的是并行分界面包车型客车操作,实际不是CLI,那么可以下载那个 APP。

Triamge

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

www.301.net 37image

SVGOMG

SVGOMG 是 SVGO’s Missing GUI 的缩写,目的在于揭穿 SVG
文件的重大难点,而不具备 SVGO 的总体可配置项。

www.301.net 38

CSS Triggers

该网站用于呈现什么 CSS 属性能够影响浏览器的布局、渲染和任何组成操作。

www.301.net 39image

越多关于 CSS-triggers 的新闻,能够点击这里查看。

手动优化 SVGs

恍如于其余的图形文件,SVG 也应当在上线前被优化。即便有成都百货上千近乎 雷Mond的工具得以帮你做这种优化,但最棒的不二诀窍依然深远精晓其细节并做一些手动的优化。

CSS Stats

该网页应用以可视化的款型显得了开采者项目中有关 CSS 的计算消息。

www.301.net 40image

Triamge

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

www.301.net 41

CSS Shrink

CSS 压缩工具。由于 CSS
是页面渲染的着力文件,所以必须保险轻易,便于火速响应和渲染。

CSS

uncss

UnCSS 是七个用于移除脚本中没用 CSS
的工具。它能够核查八个文本,也足以查处由 JavaScript 注入的 CSS。

它也足以被并入到 Grunt 和 Gulp 中。

CSS Triggers

该网址用于呈现怎么着 CSS 属性能够影响浏览器的布局、渲染和其他组成操作。

www.301.net 42

越来越多关于 CSS-triggers
的音讯,能够点击这里查看。

Critical path

领到和重新组合 HTML 中主要的 CSS。

CSS Stats

该网页应用以可视化的款式突显了开荒者项目中有关 CSS 的总括消息。

www.301.net 43

HTMLMinifier

HTMLMinifier 是二个惊人可配置、经过周全的测量试验、基于 JavaScript 的 HTML
压缩工具,况且放置了代码考察类的工具。

CSS Shrink

CSS 压缩工具。由于 CSS
是页面渲染的着力文件,所以必须保险轻易,便于神速响应和渲染。

gulp-htmlmin

用以压缩 HTML 的 gulp 插件。

uncss

UnCSS 是二个用以移除脚本中没用 CSS
的工具。它能够核查多少个文本,也得以核查由 JavaScript 注入的 CSS。

它也足以被并入到 Grunt 和 Gulp 中。

grunt-contrib-htmlmin

用来压缩 HTML 的 grunt 插件。

Critical path

领取和构成 HTML 中重要的 CSS。

uglifyjs

JavaScript 分析器、混淆、压缩和美化学工业具集。

它也足以被合併到 Grunt 和 Gulp 中。

HTML

您大概并无需有些 jQuery 插件

jQuery
及其附属工具都以不行优良的品种,使用它们往往使开拓专门的工作轻巧而又快捷。

生龙活虎边,尽管您正在开采一个库,那么你必要怀念一下是或不是确实须求依赖于
jQuery。也许你只供给引入几行代码,就足以放任引进三个库完毕某个功效。如若你的库只是针对于高档浏览器,那么恐怕一向调用浏览器的停放函数就能够完结相关职能了。

www.301.net 44image

  • Usertiming API
  • Jank Free
  • Scrolling performance
  • Mobile web performance auditing
  • Gone in 60 frames per second
  • Udacity course on rendering performance

HTMLMinifier

HTMLMinifier 是三个惊人可配备、经过全面包车型客车测验、基于 JavaScript 的 HTML
压缩工具,何况放置了代码审核类的工具。

gulp-htmlmin

用于压缩 HTML 的 gulp 插件。

grunt-contrib-htmlmin

用以压缩 HTML 的 grunt 插件。

JavaScript

uglifyjs

JavaScript 深入分析器、混淆、压缩和美化学工业具集。

它也足以被并入到 Grunt 和 Gulp 中。

你可能并无需有些 jQuery 插件

jQuery
及其直属工具都以老晋中想的类别,使用它们往往使开发专业轻易而又高效。

其他方面,假若您正在开采三个库,那么你必要观念一下是不是真的须求依靠于
jQuery。可能你只需求引进几行代码,就足以抛弃引入三个库完成某个意义。假诺你的库只是针对性于高等浏览器,那么也许一贯调用浏览器的内置函数就能够达成相关职能了。

www.301.net 45

强盛阅读

  • Usertiming
    API
  • Jank Free
  • Scrolling
    performance
  • Mobile web performance
    auditing
  • Gone in 60 frames per
    second
  • Udacity course on rendering
    performance

    1 赞 6 收藏
    评论

www.301.net 15

相关文章

Post Author: admin

发表评论

电子邮件地址不会被公开。 必填项已用*标注