值得珍藏,什么是重中之重

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

2015/06/22 · HTML5 ·
性能

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

嘿,各位,又到了周末总括时间!得益于大批量的 Grunt 和 Gulp
插件,大家得以轻松完毕网站数量的可视化,即便深远通晓那么些工具还比较不方便,但分门别类的将它们列出来,也是很有救助的。

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

什么样是任重先生而道远 CSS

2017/10/05 · CSS ·
CSS

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

互联网速度很慢,可是有一部分简短的方针可以使网站变快。其中之一就是将关键的css内联插入到网页的“标签,
不过,假设你的网站包括数百页,甚至更不佳的是带有数百种不一致的沙盘,那么你该如何做吧?
你无法手动做那件事。 Dean
休谟解释了一个概括的章程来落成它。假诺你是经验丰盛的网页开发人员,您可能会意识那篇文章由此可见,并且明确,但对此你的客户和初级开发人士来说,那是一个很好的采用。—
Ed.

提供高速,流畅的网络体验是当今创设网站的要紧片段。
半数以上情形下,我们付出网站,而不去明白浏览器实际在做什么。
浏览器是何许从大家创立的HTML,CSS和JavaScript渲染我们的网页?
咱们什么利用这几个文化来加紧大家网页的渲染

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

内容分发网络(CDN)

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

嘿,各位,又到了周末计算时间!得益于大批量的 Grunt 和 Gulp
插件,大家可以轻松完毕网站数据的可视化,就算长远通晓那么些工具还比较费劲,但分门别类的将它们列出来,也是很有救助的。

在 SmashingMag阅读越来越多:

  • 改正粉碎杂志的显示:案例研商
  • PostCSS介绍
  • 预加载,有如何便宜?
  • 前端品质检查表

假如本身想急忙增加网站的习性, 谷歌的 PageSpeed
Insights
工具是我的首选。 当尝试检测网页并找到要求立异的区域时,那越发实用。
您只需输入要测试的页面的URL,该工具就会提供一多元质量指出。

假使你已经通过PageSpeed
Insights工具运行自己的网站,您可能会遇上以下提出。

皇家赌场手机版 1

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

自己必须认可,我先是次探望这些时有点思疑。 该指出的情节如下:

“若是以下资源未下载达成,您的页面上的其余内容都不会被渲染。
尝试延迟或异步加载阻塞资源值得珍藏,什么是重中之重。,或直接在HTML中内联嵌入那些资源的重大多数。“

幸运的是,解决那么些难题比看起来更不难!
答案在于CSS和JavaScript在您的网页中的加载格局。

网络速度很慢,可是有局部简约的方针可以使网站变快。其中之一就是将关键的css内联插入到网页的“标签,
然而,如若你的网站包罗数百页,甚至更不佳的是带有数百种分裂的沙盘,那么你该如何是好吧?
你不能手动做那件事。 Dean
休姆解释了一个简便的主意来已毕它。如果你是经验丰盛的网页开发人士,您可能会发现那篇文章同理可得,并且明确,但对于你的客户和初级开发人士来说,这是一个很好的拔取。—
Ed.

CloudFlare

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

CloudFlare 的 CDN
在过去十五年的统筹和升高中,并没有始终的封建和守旧。咱们的专利技术中充裕利用了时尚的技术发展,包括并不幸免硬件、web
服务器和互连网路由。换言之,大家立异的建设了下一代的 CDN。新的 CDN
配置简单、价格低廉,其品质也必定比你使用过的其他传统 CDN 都要雅观。

内容分发网络(CDN)

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

怎么着是重大CSS?

对CSS文件的伸手可以一目了解增多网页显示所需的时刻。
原因是默认情状下,浏览器将延期页面显示,直到它形成加载、解析和进行所有在“页面”中援引的CSS文件。
这样做是因为它须要总括页面的布局。

噩运的是,那意味一旦咱们有一个卓殊大的CSS文件,并且需求一段时间才能不辱任务下载,大家的用户将在浏览器早先显现页面以前等待整个文件被下载下来。
幸运的是,有一个全优的技艺,使大家可以优化我们的CSS的传导并减轻阻塞。那种技能被称作优化重在渲染路径。值得珍藏,什么是重中之重。
关键渲染路径表示浏览器突显页面的具有必须步骤。
大家想要找到细微的不通CSS集合 ,或者关键 CSS,以使页面显示给用户。
重大资源是唯恐过不去页面首屏突显的保有资源。
那背后的想法是,网站应当在前多少个TCP数据包响应中为用户获得第三个显示屏的情节(或“首屏”内容)。
想要简要精通什么在网页上工作,请查看上面的图纸。

皇家赌场手机版 2

第一 CSS是向用户突显第一屏的情节所需CSS的足足集合。
(查看大图)

在地点的演示中,网页的重中之重部分只是用户在首次加载页面时可以看看的内容
那象征大家只必要加载最少量的CSS来渲染页面顶部的始末。
对于CSS的其余部分,我们不须求担心,因为大家可以异步加载它。

大家什么样确定重点CSS?
确定页面的最主要CSS是很是复杂的,必要您浏览网页的DOM。
接下来,大家必要规定当前选用于视图中每个元素的样式列表。
手动执行此操作将是一个累赘的进程,可是一些很棒的工具得以自动执行这些进度。

在本文中,我将向你出示怎么着运用主要的CSS升高你的网页展现速度,并介绍一个方可扶持您自动施行此进程的工具。

提供高速,流畅的网络体验是当今营造网站的主要片段。
大部分动静下,我们付出网站,而不去精通浏览器实际在做什么。
浏览器是什么样从大家创设的HTML,CSS和JavaScript渲染我们的网页?
我们怎么利用那么些文化来加紧大家网页的渲染

MaxCDN

CSS-Tricks 当前就在动用 马克斯CDN 托管所有的静态资源。它可以无缝地融为一体
WordPres 和 W3
的享有缓存资源,所以大家无需做什么尤其处理,即可将资源移入
CDN,并能保险链接的准确性。

皇家赌场手机版 3

对于一个博客来说,考虑到个中的大文件体贴是 JavaScript、CSS
和图片,而不是摄像等序列,那贷款占用的可真多。

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

CloudFlare

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

CloudFlare 的 CDN
在过去十五年的设计和提升中,并没有平昔的保守和守旧。大家的专利技术中丰盛利用了新型的技艺发展,包涵并不限于硬件、web
服务器和互联网路由。换言之,我们立异的建设了下一代的 CDN。新的 CDN
配置不难、价格低廉,其质量也一定比你选取过的其余传统 CDN 都要可以。

关键CSS实践

利用紧要CSS,大家要求变更大家处理CSS的主意 – 那象征将其分成多少个公文。
对于首个文件,我们仅领到渲染上述内容所需的蝇头CSS集,然后将其内联在网页中。
对于第三个公文或非关键的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,
那些网站有一对百般 详见文档,
以及布置项目标种种解释。我此前博客介绍过这些工具.

在 SmashingMag阅读更加多:

  • 改正粉碎杂志的突显:案例研究
  • PostCSS介绍
  • 预加载,有哪些便宜?
  • 前端品质检查表

一经自身想急忙增进网站的特性, 谷歌的 PageSpeed
Insights
工具是本人的首选。 当尝试检测网页并找到必要改正的区域时,那格外实用。
您只需输入要测试的页面的URL,该工具就会提供一两种性能提出。

比方你已经通过PageSpeed
Insights工具运行自己的网站,您可能会赶上以下提出。

皇家赌场手机版 4

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

自家必须认可,我先是次探望这些时有点思疑。 该提出的情节如下:

“假如以下资源未下载落成,您的页面上的其他内容都不会被渲染。
尝试延迟或异步加载阻塞资源,或直接在HTML中内联嵌入那么些资源的重中之重部分。“

碰巧的是,解决这些难题比看起来更简单!
答案在于CSS和JavaScript在你的网页中的加载格局。

CloudFront

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

亚马逊(Amazon) CloudFront
是一个内容分发网络服务。它可以无缝融合入其余的亚马逊互连网服务产品,为开发者和供销社分发内容到最后用户手中提供了一种不难的艺术,整个经过都享有低顺延、高转换速度的特点,也远非最小使用量的胁迫须求。

MaxCDN

CSS-Tricks 当前就在利用 马克斯CDN 托管所有的静态资源。它可以无缝地融为一体
WordPres 和 W3
的持有缓存资源,所以我们无需做怎么着尤其处理,即可将资源移入
CDN,并能有限辅助链接的准确性。

皇家赌场手机版 5

对此一个博客来说,考虑到里头的大文件器重是 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来运行插件。

皇家赌场手机版 6

行使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的移动连接可能是不安静的 –
那就是干什么那种技术对于移动用户来说那样主要。

哪些是根本CSS?

对CSS文件的请求可以鲜明增多网页突显所需的时日。
原因是默许意况下,浏览器将推迟页面显示,直到它完成加载、解析和推行所有在“页面”中引用的CSS文件。
那样做是因为它须要计算页面的布局。

不幸的是,那表示一旦我们有一个要命大的CSS文件,并且必要一段时间才能不辱职分下载,我们的用户将在浏览器初叶突显页面以前等待整个文件被下载下来。
幸运的是,有一个高超的技巧,使大家可以优化我们的CSS的传导并减轻阻塞。那种技术被称作优化重点渲染路径。
关键渲染路径表示浏览器展现页面的持有必须步骤。
大家想要找到细微的阻隔CSS集合 ,或者关键 CSS,以使页面展现给用户。
主要资源是唯恐过不去页面首屏显示的具备资源。
那背后的想法是,网站应当在前多少个TCP数据包响应中为用户得到首个屏幕的情节(或“首屏”内容)。
想要简要了然哪些在网页上干活,请查看上边的图形。

皇家赌场手机版 7

首要 CSS是向用户展现第一屏的始末所需CSS的至少集合。
(查阅大图)

在上头的言传身教中,网页的重中之重部分只是用户在首次加载页面时得以看来的情节
那代表大家只需要加载最少量的CSS来渲染页面顶部的内容。
对于CSS的其他部分,大家不需求操心,因为我们可以异步加载它。

大家怎么确定第一CSS?
确定页面的严重性CSS是一对一复杂的,须要您浏览网页的DOM。
接下来,大家需求规定当前使用于视图中各类元素的样式列表。
手动执行此操作将是一个麻烦的经过,不过有的很棒的工具得以活动执行那个进度。

在本文中,我将向你突显什么行使主要的CSS升高你的网页展现速度,并介绍一个足以协助您自动施行此进程的工具。

CDNperf

上述的 CDNs
并不能托管你轻易的资源,它们往往只是托管最频仍用到的文书。固然对于线上产品以来将资源和服务器托管到个体的
CDN 上并不是最好的章程,但那种格局对于分发资源来说仍旧是全速和简单的。

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

皇家赌场手机版 8

CloudFront

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

亚马逊 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的办法 – 这表示将其分成三个文件。
对于第四个文本,我们仅领到渲染上述内容所需的小小CSS集,然后将其内联在网页中。
对于第一个文本或非关键的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,
那一个网站有一对百般 详尽文档,
以及配置项目标各样解释。我前边博客介绍过那么些工具.

品质测试

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

CDNperf

上述的 CDNs
并不可以托管你轻易的资源,它们往往只是托管最频仍用到的文书。就算对于线上产品的话将资源和服务器托管到个人的
CDN 上并不是最好的格局,但那种格局对于分发资源来说仍然是快捷和简易的。

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

皇家赌场手机版 9

cdnperf

测试

一如往昔,测试任何新的变动是十分重大的。
如果你想要测试更改,有局部很棒的工具得以在线免费使用。进到 Google’s
PageSpeed
Insights
并通过该工具运行您的URL。
您应该小心到,您的网页现在不再持有其余阻塞资源,并且您的属性革新指出已经变绿
。而你也许也熟稔了另一个伟大的工具。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来运作插件。

皇家赌场手机版 11

接纳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的位移连接可能是不安宁的 –
那就是怎么那种技能对于移动用户来说那样紧要。

WebPagetest

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

根据用户浏览器真实的连接速度,在大地范围内进行网页速度测试,并提供详细的优化提议。

皇家赌场手机版 12

通过行使 API
wrapper,也可以将
WebPagetest 的相干服务丰裕到 NPM 模块和命令行工具中。

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

属性测试

下边的那几个品质测试工具,使用了量化的方法测试了网站中诸如首字节加载时间(time
to first
byte)或者渲染时间等表现。有些工具还会检讨尤其检查资源是或不是被缓存,多少个CSS 或 JS 文件是或不是值得合并。

深深驾驭

正如一大半优化工具,对你的网站总有利弊。弊端之一是
丢掉浏览器中的CSS缓存 。 假使动态网页更改频仍,大家不期望缓存HTML页面
那象征内联CSS
历次重复下载。
须求表明的是只列出首要的CSS,异步加载剩下的非关键的CSS。
大家可以缓存非关键的CSS。有不少争执不休和反对关于在“中内联CSS,
了解越多我引进 Hans Christian Reinl的博客 “A counter statement: Putting
the CSS in the
head”。

假定您使用(CDN),也值得一提的是,您还应有 从CDN中提供非关键的CSS
那样做允许你平素从边缘提供缓存的资源,提供更快的响应时间,而不是一头路由到源服务器来获得它们。

对此价值观的网页,内联CSS的技术运作出色,但根据你的处境,可能并不三番五次适用。
假诺你有客户端JavaScript生成HTML如何是好?
要是您在单页面应用程序上如何是好?
假若你尽可能多地出口关键的CSS,它将进步页面渲染效果。
理解关键CSS的工作规律及是否适用于你的网页,那点很重大。 我喜爱GuyPodjarny对此的立场:

“即便有这几个限制,Inline在前者优化领域如故是一个很关键的工具。
由此,你应有选拔它,但要小心,不要滥用它。“

—Guy Podjarny


“为啥内联一切不是答案”,他提供了关于如几时候理应_怎么着时候不应该松开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
的高质量网页教条,分析网页的性质并交由响应缓慢的原因。

WebPagetest

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

据悉用户浏览器真实的一而再速度,在全世界限量内展开网页速度测试,并提供详实的优化提议。

皇家赌场手机版 13

webpagetest

由此选拔 API
wrapper,也得以将
WebPagetest 的相干服务丰硕到 NPM 模块和命令行工具中。

  • webpagetest-mapper:将
    WebPageTest 的测试数据转换为可读的文档格式。
  • WPT Bulk
    Tester:使用
    谷歌(Google) Docs 测试多少个 URLs(若是您所有 API key,也得以利用
    webpagetest.org 来做那件事,或者其余公开可访问的实例)。

那不完美

即使变化和内联关键CSS所需的诸多工具都在不断立异,但可能还有一部分须要改正的天地。
倘诺您发现其余错误,您的档次,open up an
issue
或提议呼吁,并在GitHub贡献项目。

为您的网站优化关键渲染路径可以大大改善页面加载时间。
使用那种技能使我们可以运用响应式布局,而不会潜移默化其显明的优点。
那也是确保您的页面加载高效而不妨碍你的宏图的好点子。

测试

一如往昔,测试任何新的生成是尤其重大的。
假如您想要测试更改,有一对很棒的工具得以在线免费使用。进到 Google’s
PageSpeed
Insights
并经过该工具运行您的URL。
您应该小心到,您的网页现在不再抱有任何阻塞资源,并且您的特性立异指出已经变绿
。而你可能也如数家珍了另一个宏伟的工具。WebPagetest

皇家赌场手机版 14

行使WebPagetest是测试你的网页及时突显的好法子。
(查阅大图)

它是一个免费的工具,可以让你从满世界各种地点开展网站速度测试。
除了对你的网页的始末举办添加的分析性审查,尽管您接纳“Visual
Comparison”, 该工具将比较七个网页。
那是相比较立异您的第一CSS从前和后来的结果并回看差别的好措施。

利用主要CSS的想法是,大家的网页会赶紧显现,从而尽快向用户展示内容。
测量那些的最好措施是选取 speed
index.
WebPagetest选择的测量方法是衡量页面内容的视觉填充速度。SpeedIndex测量可视页面加载的视觉进程,并统计内容绘制速度的完全得分。
比较
SpeedIndex测量通过内联关键CSS以前和今后的改变。
您将对您的渲染时间的变更大吃一惊。

Google PageSpeed

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

皇家赌场手机版 15

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

在创设进度中,可以利用 PSI
测试移动端和桌面端的特性,最后赢得可读性非凡的测试结果。

皇家赌场手机版 16

Yslow

Yslow 基于 Yahoo
的高品质网页教条,分析网页的特性并交付响应缓慢的缘故。

越来越多资源

倘诺你喜欢使用其余创设系统(如Gulp),则足以一贯利用插件,而无需下载Grunt。
还有一个立竿见影的教程,怎么运用Gulp优化骨干页面.

还有任何插件可以领到你的要紧CSS,比如
Penthouse,和来自Filament
公司的criticalCSS。我明确推荐
“大家怎么着使RWD网站快捷加载”
了然如何运用那几个技能来担保他们的网页尽可能快地加载。

Smashing Magazine的总编维达ly Friedman写了一篇有关Smashing
Magazine怎么样创新表现的稿子 improved the
performance
。倘若您想精通有关渲染路径的越来越多音讯,那么在Udacity网站上能够防费应用
一个可行的教程。 Google
Developers
website
也有关于
优化CSS传输的内容。
Patrick Hamman 写了一篇博客关于
怎么着辨别关键的CSS创制更快的网页。

默许情状下,您是还是不是在您的档次中置放关键CSS? 你接纳什么工具?
你遇见什么样难点? 欢迎在小说下方分享你的阅历!

(il, rb, ml, og)

1 赞 2 收藏
评论

皇家赌场手机版 17

深远摸底

正如大多数优化工具,对您的网站总有利弊。弊端之一是
不见浏览器中的CSS缓存 。 如若动态网页更改频仍,大家不指望缓存HTML页面
那象征内联CSS
历次重复下载。
须求验证的是只列出主要的CSS,异步加载剩下的非关键的CSS。
咱们可以缓存非关键的CSS。有很多争辩不休和反对关于在“中内联CSS,
精通更加多我推荐 Hans Christian Reinl的博客 “A counter statement: Putting
the CSS in the
head”。

假设您使用(CDN),也值得一提的是,您还应该 从CDN中提供非关键的CSS
那样做允许你一向从边缘提供缓存的资源,提供更快的响应时间,而不是联名路由到源服务器来获取它们。

对于价值观的网页,内联CSS的技术运作突出,但按照你的情事,可能并不一连适用。
即使你有客户端JavaScript生成HTML咋办?
借使您在单页面应用程序上怎么做?
假如你尽可能多地出口关键的CSS,它将升任页面渲染效果。
领会关键CSS的劳作规律及是不是适用于您的网页,那一点很要紧。 我喜欢GuyPodjarny对此的立场:

“即使有这么些限制,Inline在前者优化领域如故是一个很重大的工具。
因而,你应当选用它,但要小心,不要滥用它。“

—Guy Podjarny


“何以内联一切不是答案”,他提供了关于如何时候应该_哪些时候不应有放权CSS的好指出。

本人的网站都付出到什么地方去了?

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

皇家赌场手机版 18

Google PageSpeed

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

皇家赌场手机版 19

google pagespeed

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

在创设进度中,可以运用 PSI
测试移动端和桌面端的质量,最后取得可读性出色的测试结果。

皇家赌场手机版 20

google pagespeed

那不完美

虽说变化和内联关键CSS所需的诸多工具都在不断革新,但恐怕还有局地须要革新的领域。
若是你发现其他不当,您的体系,open up an
issue
或提出请求,并在GitHub进献项目。

为你的网站优化关键渲染路径可以大大改良页面加载时间。
使用那种技术使大家可以运用响应式布局,而不会潜移默化其明显的亮点。
那也是确保您的页面加载高效而不妨碍你的统筹的好法子。

Pingdom 网站速度测试

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

皇家赌场手机版 21

本身的网站都付出到哪儿去了?

评估网站在世界各省为每个移动端用户支付的爱戴资产。

皇家赌场手机版 22

what does my site cost?

更加多资源

假诺您喜爱使用其他创设系统(如Gulp),则可以直接使用插件,而无需下载Grunt。
还有一个使得的学科,何以利用Gulp优化中央页面.

还有其他插件可以领取你的最主要CSS,比如
Penthouse,和来自Filament
公司的criticalCSS。我明明推荐
“大家怎样使RWD网站飞快加载”
驾驭怎样选用这几个技能来担保他们的网页尽可能快地加载。

Smashing Magazine的总编辑Vitaly Friedman写了一篇有关Smashing
Magazine怎样改良表现的稿子 improved the
performance
。假设你想精通关于渲染路径的更加多新闻,那么在Udacity网站上得防止费使用
一个使得的科目。 Google
Developers
website
也有关于
优化CSS传输的始末。
Patrick Hamman 写了一篇博客关于
哪些鉴别关键的CSS开创更快的网页。

默许情形下,您是不是在你的连串中放到关键CSS? 你选择什么工具?
你赶上哪些难点? 欢迎在小说下方分享您的经验!

(il, rb, ml, og)

1 赞 2 收藏
评论

SpeedCurve

SpeedCurve
既可以让你追踪竞争对手的性能表现,也得以追踪自己的性质表现。使用
SpeedCurve
时,你可以查阅某个因素在分化站点的速度呈现。对于移动用户来说,他们期待网站在手机上加载起来要快于电脑,假使感觉加载迟缓,往往会急速关上网页,所以,网站的响应速度对他们很要紧。

皇家赌场手机版 23

Pingdom 网站速度测试

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

皇家赌场手机版 24

pingdom

Calibre

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

皇家赌场手机版 25

SpeedCurve

SpeedCurve
既可以让您追踪竞争对手的特性表现,也足以追踪自己的属性表现。使用
SpeedCurve
时,你可以查看某个因素在不一致站点的进程展现。对于移动用户来说,他们盼望网站在堂弟大上加载起来要快于电脑,如果感到加载迟缓,往往会飞速关上网页,所以,网站的响应速度对她们很重点。

皇家赌场手机版 26

speedcurve

GT Metrix

GT Metrix 结合了 谷歌(Google) PageSpeed 和
YSlow,协理开发者成立急速、高效和宏观优化的网页浏览体验。

皇家赌场手机版 27

Calibre

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

皇家赌场手机版 28

image

perf.js

在支付进度中,将质量的时序情状突显在页面上。

GT Metrix

GT Metrix 结合了 谷歌(Google) PageSpeed 和
YSlow,协理开发者创立火速、高效和健全优化的网页浏览体验。

皇家赌场手机版 29

image

perf bar

一种简易的章程,用于快速收集和查阅网页质量,提供预置的量化标准,也支撑自定义的量化标准。

perf.js

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

grunt-perfbudget

用来评估质量的 Grunt task。 grunt-perfbudget 使用 WebPagetest
的国有或个体实例在特定的 URL
进行测试。它会将测试结果和你预期的习性期望做相比,即便低于预期,那么那么些task
就顺遂完结了,若是跨越了您预期的习性期望,那么就会告诉失利,并且会辅助你分析超出预期的原委。

perf bar

一种简单的格局,用于飞快收集和查阅网页质量,提供预置的量化标准,也协理自定义的量化标准。

Sitespeed

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

grunt-perfbudget

用以评估质量的 Grunt task。 grunt-perfbudget 使用 WebPagetest
的公有或个体实例在一定的 URL
进行测试。它会将测试结果和你预期的属性期望做相比,假设低于预期,那么这一个task
就顺遂已毕了,纵然超过了您预期的性质期望,那么就会报告战败,并且会赞助您解析超出预期的缘故。

speedgun

该网站允许你利用 Speedgun.js 收集任意公开站点的品质数据。它会运行三遍,并出示一个谈得来的示图,匡助开发者了然当下页面的加载进度。

Sitespeed

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

gulp size

来得档次大小。

皇家赌场手机版 30

speedgun

该网站允许你使用
Speedgun.js
收集任意公开站点的品质数据。它会运作五遍,并体现一个自己的示图,匡助开发者精晓当前页面的加载进程。

浏览器工具盒插件

gulp size

显示档次大小。

皇家赌场手机版 31

image

Chrome 开发者工具

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

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

皇家赌场手机版 32

Network
面板以动态的点子实时地浮现了资源的伸手和下载。固然辨析和定点那个请求会比纯粹的加载页面多花一些时刻,但那个消耗对于指导页面的习性优化是那一个首要的。

皇家赌场手机版 33

浏览器工具盒插件

火狐开发者浏览器

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

更加多新闻请查看 MDN 上的 Network
Monitor。

Chrome 开发者工具

在 Chrome
的开发者工具中,对于评估品质有四个卓殊管用的标签:Audits

Network。

奥迪t
面板用于分析加载的页面。它可以提供优化指出,收缩页面加载时间,加速页面的响应速度。

皇家赌场手机版 34

image

Network
面板以动态的不二法门实时地出示了资源的哀告和下载。尽管辨析和一定那些请求会比纯粹的加载页面多花一些时刻,但那几个消耗对于率领页面的品质优化是丰裕首要的。

皇家赌场手机版 35

image

Page performance

这些扩大插件应用于 Chrome
浏览器,可以开速分析当前页面的性质。尽管浏览器打开了多少个标签,那么该插件会自动分析当前页面的特性表现。

皇家赌场手机版 36

火狐开发者浏览器

该浏览器是为开发者而创建的,专注于服务开发者的工作流。那是从来第四遍,将营造、测试和扩大等劳务集中于一体。

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

审查

Page performance

这些扩充插件应用于 Chrome
浏览器,可以开速分析当前页面的习性。若是浏览器打开了多少个标签,那么该插件会活动分析当前页面的属性表现。

皇家赌场手机版 37

image

PerfAudit

咱俩审批页面的加载和渲染质量。对于令人反感的响应缓慢和难题页面,大家有本分的沉重提供飞快、稳定和可信的页面。

审查

Perfmonkey

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

PerfAudit

大家核对页面的加载和渲染质量。对于令人反感的响应缓慢和难点页面,大家有本分的沉重提供高效、稳定和精确的页面。

SVG 和图片

Perfmonkey

PerfMonkey 让追踪页面的渲染质量变得无比不难。

ImageOptim

ImageOptim
是一个免费的选拔,它在缩减图片体积、升高加载速度的同时,还不会就义图片质量。它优化了压缩参数、移除了没用的头音讯和非要求的颜色配置音讯。

皇家赌场手机版 38

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

SVG 和图片

SVGO

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

假若你须求的是互为界面的操作,而不是
CLI,那么可以下载这么些 APP。

ImageOptim

ImageOptim
是一个免费的施用,它在回落图片体积、进步加载速度的还要,还不会就义图片质量。它优化了削减参数、移除了不算的头音信和非要求的颜料配置新闻。

皇家赌场手机版 39

image

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

SVGOMG

SVGOMG 是 SVGO’s Missing GUI 的缩写,意在揭发 SVG
文件的紧要难点,而不拥有 SVGO 的全体可配置项。

皇家赌场手机版 40

SVGO

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

如若你须要的是互相界面的操作,而不是 CLI,那么可以下载这么些
APP。

手动优化 SVGs

就像于此外的图形文件,SVG 也相应在上线前被优化。尽管有无数接近 Raymond的工具得以帮您做那种优化,但最好的法门如故深远驾驭其细节并做一些手动的优化。

SVGOMG

SVGOMG 是 SVGO’s Missing GUI 的缩写,旨在揭穿 SVG
文件的要害难题,而不持有 SVGO 的全体可配备项。

皇家赌场手机版 41

image

Triamge

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

皇家赌场手机版 42

手动优化 SVGs

恍如于任何的图形文件,SVG 也应该在上线前被优化。就算有为数不少类似 Raymond的工具得以帮您做那种优化,但最好的法门仍然尖锐驾驭其细节并做一些手动的优化。

CSS

Triamge

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

皇家赌场手机版 43

image

CSS Triggers

该网站用于体现什么 CSS 属品质够影响浏览器的布局、渲染和别的组成操作。

皇家赌场手机版 44

越多关于 CSS-triggers
的信息,可以点击那里查看。

CSS

CSS Stats

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

皇家赌场手机版 45

CSS Triggers

该网站用于体现如何 CSS 属性可以影响浏览器的布局、渲染和其余组成操作。

皇家赌场手机版 46

image

更加多关于 CSS-triggers
的音信,可以点击那里查看。

CSS Shrink

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

CSS Stats

该网页应用以可视化的款型显得了开发者项目中关于 CSS 的总括音信。

皇家赌场手机版 47

image

uncss

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

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

CSS Shrink

CSS 压缩工具。由于 CSS
是页面渲染的主导文件,所以必须有限支撑轻巧,便于快捷响应和渲染。

Critical path

领到和重组 HTML 中任重先生而道远的 CSS。

uncss

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

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

HTML

Critical path

领到和烧结 HTML 中紧要性的 CSS。

HTMLMinifier

HTMLMinifier 是一个可观可安顿、经过周详的测试、基于 JavaScript 的 HTML
压缩工具,并且放置了代码审查类的工具。

HTML

gulp-htmlmin

用以压缩 HTML 的 gulp 插件。

HTMLMinifier

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

grunt-contrib-htmlmin

用于压缩 HTML 的 grunt 插件。

gulp-htmlmin

用以压缩 HTML 的 gulp 插件。

JavaScript

grunt-contrib-htmlmin

用来压缩 HTML 的 grunt 插件。

uglifyjs

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

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

JavaScript

你也许并不要求某些 jQuery 插件

jQuery
及其附属工具都是这多少个非凡的档次,使用它们往往使支付工作轻松而又很快。

一头,如果你正在开发一个库,那么您需求思考一下是或不是真正须求看重于
jQuery。也许你只需求引入几行代码,就足以屏弃引入一个库落成某些功效。要是您的库只是指向于高级浏览器,那么可能直接调用浏览器的放手函数就足以兑现相关职能了。

皇家赌场手机版 48

uglifyjs

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

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

伸张阅读

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

    1 赞 6 收藏
    评论

皇家赌场手机版 49

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

jQuery
及其直属工具都是格外完美的档次,使用它们往往使开发工作轻松而又便捷。

一边,即便您正在开发一个库,那么您须要思考一下是或不是确实须要依靠于
jQuery。也许你只须求引入几行代码,就可以屏弃引入一个库已毕某些作用。即便您的库只是对准于高级浏览器,那么可能直接调用浏览器的停放函数就足以兑现相关作用了。

皇家赌场手机版 50

image

扩展阅读

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

Leave a Comment.