值得珍藏!Web开发的各样品质工具

值得珍藏!Web开发的各样品质工具

值得珍藏!Web开发的各样品质工具

2015/06/22 · HTML5 ·
性能

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

嗨,各位,又到了周末总计时间!得益于多量的 Grunt 和 居尔p
插件,大家能够轻松达成网址数据的可视化,就算深切理解那几个工具还相比较困难,但分门别类的将它们列出来,也是很有协理的。

翻译自:

怎么样是重大 CSS

2017/10/05 · CSS ·
CSS

原来的文章出处: Dean
Hume   译文出处:众成翻译   

网络速度一点也不快,可是有一些简单的政策能够使网址变快。在那之中之一正是将关键的css内联插入到网页的“标签,
然则,倘若您的网址包括数百页,甚至更不佳的是含有数百种分歧的模版,那么您该怎么做啊?
你无法手动做那件事。 Dean休谟解释了2个简易的格局来成功它。即使您是经验丰裕的网页开发人士,您或者会意识那篇文章总而言之,并且远近驰名,但对此你的客户和低级开发人士来说,那是3个很好的选拔。—
艾德.

提供便捷,流畅的互连网体验是前日创设网址的机要部分。
超过四陆%情况下,大家开发网址,而不去驾驭浏览器实际在做哪些。
浏览器是怎样从大家创造的HTML,CSS和JavaScript渲染我们的网页?
我们怎样行使那些知识来增长速度大家网页的渲染

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

剧情分发网络(CDN)

CDN
能够帮您把网站的资源分发到世界各州,有助于升高网址的响应速度,当然,那对于那一个特殊地区的用户是收效甚微的。

喂,各位,又到了周末计算时间!得益于大批量的 Grunt 和 居尔p
插件,我们得以轻松完结网址数量的可视化,固然深刻掌握那些工具还相比较不方便,但分门别类的将它们列出来,也是很有扶助的。

在 SmashingMag阅读更加多:

  • 革新粉碎杂志的呈现:案例研商
  • PostCSS介绍
  • 预加载,有怎么样好处?
  • 前者质量检查表

万1笔者想急迅提高网址的质量, 谷歌的 PageSpeed
Insights
工具是本身的首要选用。 当尝试检查实验网页并找到须求创新的区域时,那万分实惠。
您只需输入要测试的页面的U君越L,该工具就会提供一名目繁多品质建议。

假定你已经通过PageSpeed
Insights工具运维本身的网址,您也许会遇见以下建议。

图片 1

CSS and JavaScript 会阻塞页面包车型客车渲染。
(翻开大图)

本身必须承认,小编首先次见到那一个时有点思疑。 该提出的故事情节如下:

“假诺以下能源未下载完结,您的页面上的别的内容都不会被渲染。
尝试延期或异步加载阻塞能源,或直接在HTML中内联嵌入这么些能源的关键部分。“

碰巧的是,化解那几个题材比看起来更简明!
答案在于CSS和JavaScript在您的网页中的加载格局。

网络速度非常的慢,不过有部分粗略的策略能够使网址变快。个中之一正是将关键的css内联插入到网页的“标签,
不过,如若你的网址包蕴数百页,甚至更不好的是富含数百种分化的沙盘,那么你该怎么办吗?
你不能够手动做那件事。 Dean休谟解释了3个大概的主意来成功它。假若你是经验丰盛的网页开发人士,您恐怕会意识那篇小说由此可见,并且显然,但对于你的客户和低级开发人士来说,那是四个很好的选项。—
艾德.

CloudFlare

CloudFlare 的精锐之处在于它能够变成您的 DNS 服务器(CDN
只是它有着服务的2个组成都部队分),那样对您的网址发起的有着请求都会透过它。

CloudFlare 的 CDN
在过去十5年的统一筹划和进化中,并不曾一贯的寒酸和封建。大家的专利技术中丰裕利用了最新的技巧进步,包罗并不防止硬件、web
服务器和互连网路由。换言之,大家立异的建设了新一代的 CDN。新的 CDN
配置简单、价格低廉,其性格也肯定比你使用过的其余守旧 CDN 都要完美。

CDN
能够帮您把网址的财富分发到世界各市,有助于增高网址的响应速度,当然,那对于那个特殊地区的用户是收效甚微的。

何以是重点CSS?

对CSS文件的乞求能够明显扩充网页展现所需的时刻。
原因是暗中认可情形下,浏览器将顺延页面彰显,直到它完结加载、解析和实践全体在“页面”中援引的CSS文件。
那样做是因为它须求计算页面包车型地铁布局。

糟糕的是,那代表假设我们有八个格外大的CSS文件,并且须求一段时间才能成就下载,大家的用户将在浏览器起先展现页面从前等待整个文件被下载下来。
幸运的是,有1个全优的技能,使大家能够优化大家的CSS的传导并减轻阻塞。那种技术被誉为优化重在渲染路径。
关键渲染路径表示浏览器展现页面包车型大巴保有必须步骤。
我们想要找到微小的围堵CSS集合 ,或者关键 CSS,以使页面显示给用户。
重点能源是大概阻塞页面首屏呈现的拥有财富。
那背后的想法是,网址应当在前几个TCP数据包响应中为用户获得第二个显示屏的内容(或“首屏”内容)。
想要简要询问怎么在网页上行事,请查看上面包车型客车图样。

图片 2

要害 CSS是向用户突显第二屏的内容所需CSS的起码集合。
(查阅大图)

在地点的言传身教中,网页的首要部分只是用户在第二遍加载页面时方可知见的始末
那代表大家只需求加载最少量的CSS来渲染页面顶部的剧情。
对于CSS的其他部分,我们不供给操心,因为我们得以异步加载它。

我们什么样分明重点CSS?
显明页面的首要CSS是格外复杂的,须求你浏览网页的DOM。
接下来,大家必要分明当前选拔于视图中各种成分的样式列表。
手动执行此操作将是1个麻烦的进程,不过有的很棒的工具得以活动执行那么些历程。

在本文中,作者将向您出示什么运用首要的CSS进步你的网页展现速度,并介绍3个得以扶助你自动实施此进程的工具。

提供快捷,流畅的网络体验是当今营造网址的显要部分。
超过半数意况下,大家付出网址,而不去驾驭浏览器实际在做什么样。
浏览器是何许从我们创造的HTML,CSS和JavaScript渲染大家的网页?
大家什么样利用这个知识来加快大家网页的渲染

MaxCDN

CSS-Tricks 当前就在应用 马克斯CDN 托管全数的静态财富。它可以无缝地融合
WordPres 和 W3的具有缓存能源,所以咱们无需做如何尤其处理,即可将能源移入
CDN,并能保障链接的准头。

图片 3

对此3个博客来说,思考到里面包车型大巴大文件根本是 JavaScript、CSS
和图纸,而不是录制等类型,这贷款占用的可真多。

咱俩的 CDN
服务1样是一个网址加速器和实时间控制制主旨。制造它,正是为了让网址的用户和平运动维都能从下一代
CDN 中获取最大受益。

CloudFlare

CloudFlare 的雄强之处在于它能够改为你的 DNS 服务器(CDN
只是它拥有服务的一个组成都部队分),那样对您的网址发起的全数请求都会透过它。

CloudFlare 的 CDN
在过去10五年的宏图和前进中,并未有始终的半封建和古板。大家的专利技术中丰富利用了新星的技艺发展,包涵并不限于硬件、web
服务器和网络路由。换言之,我们立异的建设了下一代的 CDN。新的 CDN
配置简单、价格低廉,其属性也决然比你采用过的别样古板 CDN 都要出彩。

关键CSS实践

行使首要CSS,大家必要变更我们处理CSS的不贰秘籍 – 那意味着将其分为八个公文。
对于第一个文件,大家仅领到渲染上述剧情所需的细小CSS集,然后将其内联在网页中。
对于首个公文或非关键的CSS,我们异步加载它,以防阻塞网页。

1初叶如同有点奇怪,但是经过将第一的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,
那几个网址有1部分尤其 详见文书档案,
以及配置项目标各个解释。笔者后面博客介绍过这几个工具.

在 SmashingMag阅读更多:

  • 立异粉碎杂志的显示:案例商量
  • PostCSS介绍
  • 预加载,有何样好处?
  • 前端质量检查表

如果本身想快捷增进网址的性格, Google的 PageSpeed
Insights
工具是本人的首要选拔。 当尝试质量评定网页并找到须要勘误的区域时,那10分管用。
您只需输入要测试的页面的UXC60L,该工具就会提供一雨后玉兰片品质提出。

假设您已经通过PageSpeed
Insights工具运维自个儿的网站,您恐怕会遇到以下提议。

图片 1

CSS and JavaScript 会阻塞页面包车型客车渲染。
(查看大图)

自己不可能不承认,笔者首先次探望这一个时有点嫌疑。 该提出的始末如下:

“假设以下能源未下载完结,您的页面上的此外内容都不会被渲染。
尝试延期或异步加载阻塞能源,或间接在HTML中内联嵌入这个能源的重点部分。“

碰巧的是,消除这一个难题比看起来更简便!
答案在于CSS和JavaScript在您的网页中的加载情势。

CloudFront

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

亚马逊(亚马逊) CloudFront
是二个内容分发互联网服务。它能够无缝融合入其余的亚马逊(亚马逊(Amazon))网络服务产品,为开发者和商店分发内容到最终用户手中提供了1种简易的艺术,整个经过都存有低顺延、高转换速度的特色,也未曾最小使用量的威逼供给。

MaxCDN

CSS-Tricks 当前就在应用 马克斯CDN 托管全数的静态能源。它能够无缝地融为1体
WordPres 和 W3的拥有缓存能源,所以咱们无需做哪些尤其处理,即可将财富移入
CDN,并能保障链接的准头。

图片 5对此二个博客来说,思考到中间的大文件根本是
JavaScript、CSS 和图表,而不是摄像等类型,那带宽占用的可真多。

我们的 CDN
服务一样是2个网址加快器和实时间控制制宗旨。创立它,正是为着让网址的用户和平运动维都能从下一代
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来运营插件。

图片 6

动用Grunt自动检测互联网品质。(翻开大图)

借使你导航到该公文夹,则应当会专注到贰个名字为result.html的文本,当中涵盖内联的要紧CSS,而剩余的CSS异步加载。
您的网页以后就足以利用了!

在蹑脚蹑手, 插件自动使用 PhantomJS,
三个无头Web基特浏览器,捕获所需的严重性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。
那意味你能够根据八个显示器宽度运转您的网址,并确认保障您的用户如故保有相同的经验。
我们知道,使用三G和四G的活动连接大概是不平稳的 –
那正是怎么那种技能对于移动用户来说那样首要。

如何是第二CSS?

对CSS文件的请求能够显著增添网页突显所需的年华。
原因是私下认可情状下,浏览器将延迟页面显示,直到它成功加载、解析和推行全体在“页面”中援引的CSS文件。
那样做是因为它必要总括页面包车型地铁布局。

不幸的是,那表示1旦大家有三个尤其大的CSS文件,并且要求一段时间才能一气浑成下载,大家的用户将在浏览器开首显现页面以前等待整个文件被下载下来。
幸运的是,有1个高超的技艺,使大家能够优化我们的CSS的传导并减轻阻塞。那种技能被喻为优化重中之重渲染路径。
关键渲染路径表示浏览器呈现页面包车型地铁拥有必须步骤。
大家想要找到小小的封堵CSS集合 ,或者关键 CSS,以使页面显示给用户。
关键能源是大概阻塞页面首屏展现的兼具财富。
那背后的想法是,网站应当在前多少个TCP数据包响应中为用户获得第五个荧屏的剧情(或“首屏”内容)。
想要简要掌握怎么样在网页上中国人民解放军海军事工业程大学业作,请查看上面包车型地铁图纸。

图片 2

根本 CSS是向用户呈现第二屏的始末所需CSS的足足集合。
(翻看大图)

在上头的以身作则中,网页的第三部分只是用户在第贰次加载页面时得以看出的剧情
那象征大家只必要加载最少量的CSS来渲染页面顶部的内容。
对于CSS的别的部分,大家不须求担心,因为大家得以异步加载它。

咱俩怎么样规定第1CSS?
鲜明页面包车型客车重要CSS是一对一复杂的,须要您浏览网页的DOM。
接下来,大家供给明确当前选用于视图中种种成分的样式列表。
手动执行此操作将是一个繁琐的进度,然则某些很棒的工具得以活动执行那么些进度。

在本文中,小编将向您出示怎么着利用首要的CSS提升你的网页显示速度,并介绍八个得以帮忙您自动推行此进程的工具。

CDNperf

上述的 CDNs
并不能够托管你轻易的能源,它们往往只是托管最频繁用到的文本。就算对于线上产品的话将财富和服务器托管到村办的
CDN 上并不是最棒的章程,但那种方法对于分发财富来说依然是全速和简易的。

CDNperf 可以帮你找出最快和最可依赖的 JavaScript
CDNS,让您的网址越来越快更有朝气。

图片 8

CloudFront

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

亚马逊(Amazon) CloudFront
是贰个内容分发网络服务。它能够无缝融合入别的的亚马逊(Amazon)互联网服务产品,为开发者和商店分发内容到最后用户手中提供了壹种简易的法子,整个经过都独具低顺延、高转换速度的特点,也从未最小使用量的威逼须要。

在生产环境中使用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/’
    }
  }
}


地点的代码示例能够让你深切摸底怎么在你的网址上落到实处。

关键CSS实践

应用主要CSS,咱们需求变更大家处理CSS的措施 – 那表示将其分为八个公文。
对于第2个文件,大家仅领到渲染上述剧情所需的纤维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片段?
不过有1个好消息,那些进程能够自动化,在那一个例子中,小编将运转二个名称为Critical
的工具。 Addy Osmani
创立,它是3个同意你自动提取和内联关键路径CSS到HTML中的的Node.js包。
笔者将把这么些工具和 Grunt 壹起介绍,
Grunt是一个JavaScript 职分执行器, 自动处理CSS。 要是你在此以前没听过Grunt,
这几个网站有部分老大 详尽文书档案,
以及计划项指标各类解释。小编事先博客介绍过这些工具.

品质测试

上边包车型地铁那几个品质测试工具,使用了量化的方法测试了网址中诸如首字节加载时间(time
to first
byte)大概渲染时间等表现。有个别工具还会检讨特检财富是不是被缓存,多少个CSS 或 JS 文件是不是值得合并。

CDNperf

上述的 CDNs
并不可能托管你轻易的能源,它们往往只是托管最频仍用到的文书。尽管对于线上产品的话将能源和服务器托管到村办的
CDN 上并不是最棒的办法,但那种艺术对于分发能源来说如故是火速和精炼的。

CDNperf 能够帮您找出最快和最可依赖的 JavaScript
CDNS,让您的网址更加快更有朝气。

图片 9cdnperf

上面包车型地铁那几个质量测试工具,使用了量化的点子测试了网址中诸如首字节加载时间(time
to first
byte)恐怕渲染时间等表现。某个工具还会检讨特检财富是不是被缓存,多少个CSS 或 JS 文件是还是不是值得合并。

测试

1如以后,测试任何新的浮动是足够重要的。
假使你想要测试更改,有一部分很棒的工具得以在线免费使用。进到 Google’s
PageSpeed
Insights
并透过该工具运转您的U奥迪Q5L。
您应该专注到,您的网页今后不再具备任何阻塞财富,并且您的属性立异提出已经变绿
。而你大概也知根知底了另三个壮烈的工具。WebPagetest

图片 10

接纳WebPagetest是测试你的网页及时展现的好措施。
(翻看大图)

它是二个免费的工具,能够让您从全世界各类地点举行网址速度测试。
除了对你的网页的情节开始展览添加的分析性审查,若是您采用“Visual
Comparison”, 该工具将相比多少个网页。
那是比较立异您的首要CSS此前和后来的结果并重播差别的好方法。

选用重要CSS的想法是,大家的网页会快速显现,从而尽快向用户显示内容。
衡量那几个的最棒方法是选择 speed
index.
WebPagetest选择的度量方法是衡量页面内容的视觉填充速度。SpeedIndex衡量可视页面加载的视觉进程,并盘算内容绘制速度的完全得分。
比较
SpeedIndex衡量通过内联关键CSS以前和现在的变动。
您将对您的渲染时间的改动大吃一惊。

开始

咱俩先从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来运作插件。

图片 6

采纳Grunt自动物检疫查测试网络质量。(查看大图)

一经您导航到该公文夹,则应该会注意到3个名称叫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的移动连接只怕是不平静的 –
那便是干什么那种技术对于移动用户来说那样重大。

WebPagetest

WebPagetest
是性质测试的黄金标准,它提供了多地点的量化目标用于质量测试,比如有二个核心的评分,用于评论当前页面优化的程度;有3个截图,呈现页面加载后的视觉效果;还有1个浏览器加载财富的瀑布流…

依照用户浏览器真实的连日速度,在中外限量内展开网页速度测试,并提供详实的优化提出。

图片 12

经过利用 API
wrapper,也足以将
WebPagetest 的相关服务丰硕到 NPM 模块和命令行工具中。

  • webpagetest-mapper:将
    WebPageTest 的测试数据转换为可读的文档格式。
  • WPT Bulk
    Tester:使用 谷歌Docs 测试四个 U路虎极光Ls(如若你持有 API key,也足以行使 webpagetest.org
    来做那件事,或然别的公开可访问的实例)。

WebPagetest

WebPagetest
是性质测试的金子标准,它提供了多地点的量化指标用于性能测试,比如有二个着力的评分,用于评论当前页面优化的档次;有多少个截图,突显页面加载后的视觉效果;还有一个浏览器加载财富的瀑布流…

依照用户浏览器真实的连接速度,在中外限量内开始展览网页速度测试,并提供详实的优化建议。

图片 13webpagetest

因此选用 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的办事原理及是还是不是适用于您的网页,那点很重大。 笔者欣赏盖伊Podjarny对此的立足点:

“尽管有这几个限制,Inline在前者优化领域依然是3个很首要的工具。
由此,你应该利用它,但要小心,不要滥用它。“

—Guy Podjarny


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

在生养条件中运用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/’
    }
  }
}


地点的代码示例能够让您深入摸底怎样在你的网址上落实。

Yslow

Yslow 基于 Yahoo
的高品质网页教条,分析网页的性质并交给响应缓慢的原因。

Yslow

Yslow 基于 Yahoo
的高质量网页教条,分析网页的质量并提交响应缓慢的原由。

这不完美

固然如此变化和内联关键CSS所需的许多工具都在不断革新,但只怕还有局地索要考订的园地。
倘若你发现任何不当,您的连串,open up an
issue
或提议呼吁,并在GitHub进献项目。

为您的网址优化关键渲染路径能够大大改进页面加载时间。
使用这种技术使我们能够利用响应式布局,而不会影响其肯定的帮助和益处。
那也是确定保障您的页面加载高效而无妨碍你的统一筹划的好点子。

测试

1如既往,测试任何新的扭转是不行首要的。
借使你想要测试更改,有一些很棒的工具得以在线免费使用。进到 Google’s
PageSpeed
Insights
并由此该工具运营您的U索罗德L。
您应该小心到,您的网页今后不再具备别的阻塞财富,并且您的属性立异建议已经变绿
。而你或然也熟知了另二个伟大的工具。WebPagetest

图片 10

使用WebPagetest是测试你的网页及时展现的好点子。
(翻看大图)

它是二个免费的工具,能够让您从天下种种地点开始展览网址速度测试。
除了对您的网页的始末展开添加的分析性审查,假诺你选取“Visual
Comparison”, 该工具将相比较四个网页。
那是比较立异您的主要CSS以前和以往的结果并回看差距的好法子。

运用首要CSS的想法是,大家的网页会赶紧显现,从而尽快向用户体现内容。
衡量这几个的最佳法子是使用 speed
index.
WebPagetest接纳的衡量方法是度量页面内容的视觉填充速度。SpeedIndex衡量可视页面加载的视觉进程,并盘算内容绘制速度的全部得分。
比较
SpeedIndex度量通过内联关键CSS从前和之后的转移。
您将对你的渲染时间的改观大吃壹惊。

Google PageSpeed

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

图片 15

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

在创设进度中,能够利用 PSI
测试移动端和桌面端的性质,最后取得可读性特出的测试结果。

图片 16

Google PageSpeed

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

图片 17google
pagespeed

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

在营造进度中,能够动用 PSI
测试移动端和桌面端的习性,最后得到可读性优秀的测试结果。

图片 18google
pagespeed

越来越多财富

设若您喜爱使用别的营造系统(如居尔p),则能够间接利用插件,而无需下载Grunt。
还有三个实惠的学科,如何选取居尔p优化骨干页面.

还有其它插件能够领到你的最首要CSS,比如
Penthouse,和来自Filament
公司的criticalCSS。作者肯定推荐
“笔者们怎么使奥迪Q7WD网址连忙加载”
了然如何使用那些技术来确定保障他们的网页尽恐怕快地加载。

Smashing Magazine的总编维达ly 弗里德man写了一篇关于Smashing
Magazine怎么样改进表现的篇章 improved the
performance
。如若您想询问有关渲染路径的更加多消息,那么在Udacity网址上可防止费应用
二个可行的教程。 Google
Developers
website
也有关于
优化CSS传输的内容。
Patrick Hamman 写了一篇博客关于
怎么分辨关键的CSS创制越来越快的网页。

私下认可情形下,您是还是不是在你的类别中放置关键CSS? 你利用什么工具?
你碰着哪些难题? 欢迎在文章下方分享您的经历!

(il, rb, ml, og)

1 赞 2 收藏
评论

图片 19

深切精晓

正如大多数优化学工业具,对你的网站总有利弊。弊端之1是
不见浏览器中的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的好提出。

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

评估网址在世界各州为每一个移动端用户支出的保护资金财产。

图片 20

自家的网址都付出到何地去了?

评估网址在世界外地为每一种移动端用户支出的保护资金财产。

图片 21what
does my site cost?

那不完美

虽说变化和内联关键CSS所需的大队人马工具都在不断革新,但可能还有1部分索要改革的园地。
假诺你发现别的错误,您的类型,open up an
issue
或提议请求,并在GitHub进献项目。

为你的网址优化关键渲染路径能够大大改正页面加载时间。
使用那种技术使大家能够采用响应式布局,而不会潜移默化其明确的优点。
那也是确认保障您的页面加载高效而不妨碍你的布置性的好措施。

Pingdom 网址速度测试

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

图片 22

Pingdom 网址速度测试

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

图片 23pingdom

越多财富

借使你喜欢使用其余创设系统(如居尔p),则足以间接行使插件,而无需下载Grunt。
还有多个卓有功效的学科,什么样利用居尔p优化骨干页面.

还有其余插件能够领取你的基本点CSS,比如
Penthouse,和来自Filament
公司的criticalCSS。小编理解推荐
“咱俩什么样使奥迪Q伍WD网址火速加载”
了然什么运用这么些技术来确认保障他们的网页尽大概快地加载。

Smashing Magazine的总编Vitaly Friedman写了一篇有关Smashing
Magazine怎样改正表现的篇章 improved the
performance
。假若您想掌握关于渲染路径的越来越多音信,那么在Udacity网址上得以防费应用
1个有效的学科。 Google
Developers
website
也有关于
优化CSS传输的剧情。
帕特里克 Hamman 写了1篇博客关于
哪些识别关键的CSS制造越来越快的网页。

暗中同意意况下,您是不是在你的体系中放到关键CSS? 你选择什么工具?
你赶上什么问题? 欢迎在小说下方分享你的经验!

(il, rb, ml, og)

1 赞 2 收藏
评论

发表评论

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

网站地图xml地图