高速升高前端性能,的自动化解决方案

敏捷升高前端性能

2015/09/26 · HTML5,
JavaScript · 1
评论 ·
高速升高前端性能,的自动化解决方案。性能

本文由 伯乐在线 –
cucr
翻译,唐尤华
校稿。未经许可,禁止转发!
英文出处:Jonathan
Suh。欢迎参与翻译组。

二零一八年,我写了一篇小说Need for
Speed,分享了在付出自己的网站中应用的干活流程和技能(包蕴工具)。从那时起,我的网站又经过了四次重构,已毕了不少做事流程和劳务器端革新,同时我对前者性能也给予了附加关心。以下就是本人做的劳作,为啥自己要如此做,以及自己在网站上用来优化前端性能的工具。

后天看的是事先封存的一篇前端优化的相干文章。不过人家写了禁止转发,我那边求学的话就不抄太多东西了。

Web前端优化最佳实践及工具集锦
见报于2013-09-23 19:47| 34107次阅读| 来源Googe & Yahoo| 124 条评论|
小编王果 编译
Web优化
Google
雅虎
PageSpeed
YSlow
摘要:前端的习性对于Web应用的用户体验来说极度首要。不要认为你的Web应用的属性已经够用好了,其实还会有许多方可荣升的地点。本文将介绍谷歌和雅虎关于前端优化的特等实践以及工具,你可以逐一检视你的Web应用。
前者的属性对于一个Web应用来说极度主要,尽管一个Web应用的页面加载速度至极快、对于用户的操作可以即时响应,那么产品的用户体验将会极大地升级。下图体现了页面加载速度对于用户体验的震慑。

重中之重 CSS 和 Webpack : 减弱堵塞渲染的 CSS 的自动化解决方案

2017/10/12 · CSS ·
webpack

原稿出处: Anthony
Gore   译文出处:iKcamp   

亚洲必赢官网 1“消除鸿沟渲染的CSS和JavaScript”。
这一条谷歌(Google) Page Speed
Insights的指出总让自身猜疑。当一个网页被访问时,谷歌希望它仅加载对起来视图有用的情节,并运用空闲时间来加载其余情节。那种格局能够使用户尽可能早地观望页面。

亚洲必赢官网 2

俺们可以做过多事情来减少堵塞渲染的JavaScript,例如code splitting、tree
shaking,缓存等。

不过怎么压缩堵塞渲染的CSS?为此,可以拆分并预先加载首次渲染所急需的CSS(关键CSS),然后再加载其余CSS。

能够经过编程的方法筛选出重点CSS,在本文中,我将向你出示怎么着通过Webpack的自动化流程来贯彻该方案。

最小化请求

所有在你的网站加载时用来渲染页面(外部CSS或JS文件、web字体、图片等等)的资源,都是分裂的HTTP请求。一般的网站平均有 93个请求!

我的靶子是减掉HTTP请求。一种方法是分别编译或延续(组合、合并)CSS和javascript到一个文书中。让这么些历程自动化(例如使用构建工具 Grunt 或 Gulp)是优异的作用,但起码也应当在生育环境出手动完成。

其三方脚本是增多额外请求最广大的元凶祸首,很多取得额外的文书如脚本、图像或CSS的呼吁都不停1个。浏览器内置的开发者工具得以扶持您发觉那么些元凶。

亚洲必赢官网 3
谷歌(Google) Chrome开发者工具的网络选项卡

比如,脸书的本子发起3次呼吁。测试环境中使用部分来源于出名社交网站的应酬分享脚本,可以见到她们快速增添:

站点 文件 大小
Google+ 1 15.1KB
Facebook 3 73.3KB
LinkedIn 2 47.7KB
Pinterest 3 12.9KB
Tumblr 1 1.5KB
Twitter 4 52.7KB
Total 14 203.2KB

来源:更有效的社会分享链接

那有格外的14个HTTP请求,共203.2KB。相反,我看看 “share-intent” 本条url,它基本上是通过传递和构建数据来生成一个共享,可以只使用HTML来创立社交共享链接。它让自身放弃用于共享的第三方脚本,这个本子需求7次呼吁。我在Responsible
Social Share
Links那篇小说有越来越多的阐发。

评估每一个第三方脚本并确定其重点。也许存在一种不依靠第三方的主意来形成它。你或许会失去一些效果(例如like、tweet、分享数量),不过请问一下谈得来:“像数量总结就那么主要吗?”

小说是那篇
火速升高前端性能。

你的Web页面的速度是否曾经丰硕快了?其实可能还有不少足以升官的地点。谷歌和雅虎也提议了一些Web应用的前端优化提议,并公布了部分工具,你可以逐一查看你的Web应用,以便达到更高的特性。
那么些优化不仅仅可以给用户提供更好的体会,从开发者角度来说,举行优化仍可以减掉页面的伸手数、下落请求所占的带宽、减弱资源的浪费。
上边来探望谷歌(Google)和雅虎提供的Web页面优化最佳实践。
亚洲必赢官网 ,一、谷歌的Web优化最佳实践

怎么样是阻塞渲染

万一资源是“阻塞渲染”的,则意味着浏览器在资源下载或拍卖到位以前不会显得该页面。

通常,我们在html的head标签中添加CSS样式表,这种艺术会卡住渲染,如下所示:

JavaScript

<head> <link rel=”stylesheet” href=”/style.css”>
…</head><body>
<p>在style.css下载完之前,你看不到自己!!!</p></body>

1
2
3
4
<head>
  <link rel="stylesheet" href="/style.css">
  …</head><body>
  <p>在style.css下载完之前,你看不到我!!!</p></body>

当这些html页面被网络浏览器加载时,它将从上到下被逐行解析。当浏览器解析到link标签时,它将及时初始下载CSS样式表,在形成往日不会渲染页面。

对此一个重型网站,更加是像使用了Bootstrap那种庞大框架的网站,样式表有几百KB,用户必须耐心等待其完全下载完才能来看页面。

那么,大家是或不是应该把link标签放到body中,以防备阻塞渲染?你可以如此做,可是阻塞渲染也不是全无可取,大家实际可以动用它。若是页面渲染时未尝加载任何CSS,我们会遭逢丑陋的”内容闪现”。

亚洲必赢官网 4

咱俩想要的通盘解决方案就应该是:首屏相关的首要CSS使用阻塞渲染的主意加载,所有的非关键CSS在首屏渲染落成后加载。

压缩、优化

前天我找到了压缩请求的艺术,我开头摸索各类方法来减重。文件越小,加载速度越快。常常平均的页面大小为1950KB。根据内容分类:

图片:1249KB HTML:58KB CSS:60KB JS:303KB 字体:87KB Flash:67KB
其它:126KB

自己利用那一个多少作为参照和比较的源点,同时找到自己得以用来为网站减负的不二法门。 我的网站开支的流量有稍许?是一个由Tim
Kadlec编制的很棒的工具,可以用来支持你测试和可视化,来自世界各地的访问在您的网站上消耗的流量。

小说主要介绍了如下一些亟待关爱的点:

  1. 幸免坏请求
    奇迹页面中的HTML或CSS会向服务器请求一个不存在的资源,比如图片或HTML文件,那会造成浏览器与服务器之间过多的来回来去请求,类似于:

关键CSS

此间是自个儿用Webpack和Bootstrap编写的一个不难易行的网页,
下边的截图是第一次渲染后的样式。

亚洲必赢官网 5

点击Sign Up today按钮会弹出一个模态框, 模态框弹出时的样式如下:

亚洲必赢官网 6

首次渲染需求的体裁包罗导航条的体裁、超大显示屏样式、按钮样式、别的布局和字体的公用样式。不过大家并不须求模态框的体裁,因为它不会立马在页面中显得。考虑到那么些,上面是大家拆分关键CSS和非关键CSS的或是的办法:

critical.css

.nav { … } .jumbtron { … } .btn { … }

1
2
3
4
5
6
7
8
9
10
11
.nav {
  …
}
 
.jumbtron {
  …
}
 
.btn {
  …
}

non_critical.css

.modal { … }

1
2
3
.modal {
  …
}

要是您曾经有其一概念,那么你可能会提出五个问号:

  1. 大家怎么用程序分别关键CSS和非关键CSS?
  2. 怎么着让页面在首次渲染以前加载关键CSS,之后加载非关键CSS?

CSS和JavaScript

压缩样式表和JavaScript文件可以一目领悟滑坡文件大小,我仅在裁减上就从一个文书上节省了56%的空中。

压缩前 压缩后 节省比例
CSS 135KB 104KB 23.0%
JS 16KB 7KB 56.3%

我使用 BEM (代码、元素、修饰符)
方法论编辑CSS,这将造成冗长的类名。重构我的部分代码变得更简便易行(“navigation”为
“nav”, “introduction” 为
“intro”),那让自身节约了一部分空间,但和本身盼望的中期压缩比较并不是那么明确。

冗长的类 精简后 节省比例
104KB 97KB 6.7%

本身也重新评估了采纳jQuery的需要性。对于滑坡的135KB的JavaScript,几乎96KB是jQuery库——71%之多!那里并从未过多内需借助于jQuery,所以自己花时间重构了代码。我经过剥离jQuery和在Vanilla重写它,去除了122KB,最后缩短后的文件大小裁减到13KB。

jQuery Vanilla JS 节省比例
135KB 13KB 122KB (90%)

从那时起,我灵机一动去掉越多空间(压缩后7KB),最终脚本在缩减和gzipped后惟有0.365KB。

1、最小化请求

本条是说一般的页面中发的伸手过多,会导致页面打开速度变慢。
焚薮而田的一种办法是个别编译或一连(组合、合并)CSS和javascript到一个文本中。让这几个进程自动化(Grunt
或者 Gulp)是脍炙人口的职能,但最少也理应在生养条件出手动落成。

其三方脚本是增多额外请求最普遍的主犯祸首,很多得到额外的公文如脚本、图像或CSS的伸手都持续1个。

浏览器:“我急需那么些图像。”
服务器:“我未曾这些图像。”
浏览器:“你确定吗?那么些文档说你有。”
服务器:“真的没有。”

演示项目

自我将不难介绍一下这么些项目的主干配备,那样大家在碰到解决方案时,方便高效消化。
率先, 在输入文件中引入Bootsrap SASS。

main.js

require(“bootstrap-sass/assets/stylesheets/_bootstrap.scss”);

1
require("bootstrap-sass/assets/stylesheets/_bootstrap.scss");

我使用sass-loader来处理sass,与Extract Text
Plugin
同步行使,将编译出来的css放到单独的文件中。

使用HTML Webpack
Plugin
来创建一个HTML文件,它引入编译后的CSS。那在我们的化解方案中是必备的,你当时就相会到。

webpack.config.js

module.exports = { module: { rules: [ { test: /\.scss$/, use:
ExtractTextPlugin.extract({ fallback: ‘style-loader’, use:
[‘css-loader’, ‘sass-loader’] }) }, … ] }, … plugins: [ new
ExtractTextPlugin({ filename: ‘style.css’ }), new HtmlWebpackPlugin({
filename: ‘index.html’, template: ‘index.html’, inject: true }) ] };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: ‘style-loader’,
          use: [‘css-loader’, ‘sass-loader’]
        })
      },
      …
    ]
  },
  …
  plugins: [
    new ExtractTextPlugin({ filename: ‘style.css’ }),
    new HtmlWebpackPlugin({
      filename: ‘index.html’,
      template: ‘index.html’,
      inject: true
    })
  ]
};

运作构建之后,那里是HTML文件的旗帜。请留意,CSS文件在head标签里引入,由此将会阻塞渲染。

index.html

JavaScript

<!DOCTYPE html> <html lang=”en”> <head> <meta
charset=”utf-8″> <meta name=”viewport”
content=”width=device-width,initial-scale=1″>
<title>vuestrap-code-split</title> <link
href=”/style.css” rel=”stylesheet”> </head> <body>
<!–App content goes here, omitted for brevity.–> <script
type=”text/javascript” src=”/build_main.js”></script>
</body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>vuestrap-code-split</title>
    <link href="/style.css" rel="stylesheet">
</head>
<body>
  <!–App content goes here, omitted for brevity.–>
  <script type="text/javascript" src="/build_main.js"></script>
</body>
</html>

图片

图表平时占到一个网站的大头。常见网站平均有1249
KB的图样。

本身摒弃了图标字体,取而代之的是内联SVG。其它,任何能够矢量化的图样都采纳内联SVG替换。我的网站从前版本的一个页面仅仅图标web字体就加载了145KB,同时对于几百个web字体,我只使用了一小部分。比较之下,当前网站的一个页面只加载10KB内联SVG,那但是93%的出入。

SVG
sprites看起来很有趣,它或许是自我在方方面面网站使用一般内联SVG图标的一个可行的替代解决方案。

在可能的情状下利用CSS代替图片,现在的CSS能做的早已重重了。不过,浏览器包容性可能是当代CSS使用的一个题目;因而,充足利用 caniuse.com 和渐渐改正。

你也足以通过优化图片来压缩字节。有两种办法来优化图片:

  1. 有损压缩:下降图像的成色
  2. 无损压缩:不影响质地

要同时使用三种方法取得最好的职能,顺序是很关键的。首先接纳有损图像压缩方法,比如在不当先要求大小的气象下调整图像大小下一场在略低质地且不减少太多的情况下导出如本人平时在82
– 92%下导出JPG图片

亚洲必赢官网 7

ImageOptim是OS X下的一个图像优化工具

接下去,使用无损图像优化工具比如 ImageOptim进展拍卖,从而通过删除不要求的新闻,如元数据或颜料配置文件来更是回落图像文件大小。

2、压缩、优化

现行找到了减弱请求的法门,然后就足以开始物色各样方法来减重。文件越小,加载速度越快。

如此一来,会减低页面的加载速度。由此,检查页面中的坏链接极度有必要,你可以通过
谷歌的PageSpeed工具
来检测,找到问题后,补充相应的资源文件或者修改资源的链接地址即可。

编程识别关键CSS

手动区分关键CSS维护起来会相当悲伤。以编程格局来促成的话,大家得以动用Addy
Osmani的Critical。那是一个Node.js模块,它将读入HTML文档,并识别关键CSS。Critical能做的还不止那些,你飞速就能体味到。

Critical识别关键CSS的不二法门如下:指定显示屏尺寸并采纳PhantomJS加载页面,提取在渲染页面中用到的有着CSS规则。

以下为对品种的设置:

const critical = require(“critical”); critical.generate({ /*
Webpack打包输出的路径 */ base: path.join(path.resolve(__dirname),
‘dist/’), src: ‘index.html’, dest: ‘index.html’, inline: true, extract:
true, /* 中兴6的尺码,你可以按要求修改 */ width: 375, height: 565,
/* 确保调用包装后的JS文件 */ penthouse: { blockJSRequests: false, }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const critical = require("critical");
 
critical.generate({
  
  /* Webpack打包输出的路径 */
  base: path.join(path.resolve(__dirname), ‘dist/’),
  src: ‘index.html’,
  dest: ‘index.html’,
  inline: true,
  extract: true,
 
  /* iPhone6的尺寸,你可以按需要修改 */
  width: 375,
  height: 565,
  
  /* 确保调用打包后的JS文件 */
  penthouse: {
    blockJSRequests: false,
  }
});

实践时,会将Webpack打包输出文件中HTML更新为:

JavaScript

<!DOCTYPE html> <html lang=”en”> <head> <meta
charset=”utf-8″> <meta name=”viewport”
content=”width=device-width,initial-scale=1″> <title>Bootstrap
Critical</title> <style type=”text/css”> /*
关键CSS通过中间样式表格局引入 */ body { font-family: Helvetica
Neue,Helvetica,Arial,sans-serif; font-size: 14px; line-height: 1.42857;
color: #333; background-color: #fff; } … </style> <link
href=”/style.96106fab.css” rel=”preload” as=”style”
onload=”this.rel=’stylesheet'”> <noscript> <link
href=”/style.96106fab.css” rel=”stylesheet”> </noscript>
<script> /*用来加载非关键CSS的剧本*/ </script>
</head> <body> <!– 这里是App的内容 –> <script
type=”text/javascript” src=”/build_main.js”></script>
</body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Bootstrap Critical</title>
  <style type="text/css">
    /* 关键CSS通过内部样式表方式引入 */
    body {
      font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
      font-size: 14px;
      line-height: 1.42857;
      color: #333;
      background-color: #fff;
    }
    …
  </style>
  <link href="/style.96106fab.css" rel="preload" as="style" onload="this.rel=’stylesheet’">
  <noscript>
      <link href="/style.96106fab.css" rel="stylesheet">
  </noscript>
  <script>
    /*用来加载非关键CSS的脚本*/
  </script>
</head>
<body>
  <!– 这里是App的内容 –>
  <script type="text/javascript" src="/build_main.js"></script>
</body>
</html>

它还将出口一个新的CSS文件,例如style.96106fab.css(文件自动Hash命名)。那几个CSS文件与原来样式表相同,只是不含有关键CSS。

页面渲染

在那点上,经过工作和汗水得出那一个细节,我坚信自己的 Google PageSpeed
Insights 的分数将是90s。

亚洲必赢官网 8

在运动平台PSI分数为73/100,而桌面平台上好一些在88/100。它提出我“消除render-blocking的JavaScript和CSS”。

render-blocking文件扩充了浏览器突显内容的时光,因为这么些文件须要先下载并拍卖。五个render-blocking文件必要浏览器选取七个线程去得到和处理它们,等待时间更是充实。

亚洲必赢官网 9

优化JavaScript、CSS和web字体的传输,可以加强页面的“第一时间渲染。将这一个时间降到最低,精通“关键的渲染路径”很重大,它描述了在当页面的率先个字节被接收,与页面第四回渲染成像素之间时有暴发了怎么。

WebPagetest 是用来协助您布署网站和页面性能最好的可视化工具。

亚洲必赢官网 10

About页面在渲染优化前的WebPagetest结果

当最小化首回渲染时间时,我们越多的青眼以尽可能快的快慢渲染内容,然后允许额外的“东西”在处理进度中逐年渲染。

CSS和JavaScript

压缩样式表和JavaScript文件可以显然回落文件大小,我仅在收缩上就从一个文本上节省了56%的上空。

编写CSS,可以将有些冗长的类精简,比如“navigation” 变为 “nav”,
“introduction” 变为 “intro”,都可以节约了部分空间。

奇迹须求评估类库的要求性。小编总共写了135kb的代码,其中96kb是jquery,然后经过剥离jQuery和在Vanilla重写它,去除了122KB,最后收缩后的文件大小减弱到13KB。(Vanilla是个梗具体可以看这一个
Vanilla
JS——世界上最轻量的JavaScript框架(没有之一))

事后小编设法去掉更加多空间(压缩后7KB),末了脚本在裁减和gzipped后只有0.365KB。

  1. 避免CSS @import
    运用
    @import方法引用CSS文件可以能会带动一些影响页面加载速度的题材,比如导致文件按顺序加载(一个加载完后才会加载另一个),而望洋兴叹并行加载。
    你可以运用 CSS delivery工具
    来检测页面代码中是不是留存@import方法。比如,要是检测结果中留存

内联嵌入关键CSS样式

你会专注到,关键CSS已经停放到文档的底部。那是一流的,因为页面不必从服务器加载它。

CSS

默许情状下,浏览器将CSS作为渲染阻塞;因而,当它加载时,浏览器暂停渲染,等待CSS已经被下载和拍卖。外部体制表意味着更加多的网络线程,它增添了等待时间,同时大型样式表也会增多等待时间。

大家可以经过在<head>标签内联“关键CSS”来革新页面渲染时间,那样浏览器可以毫不再等待下载整个样式表,就足以高速地渲染页面内容,然后通过non-rendering-blocking方式加载完整的样式表。

XHTML

<head> <style> /* inline critical CSS */ </style>
</head>

1
2
3
4
5
<head>
  <style>
    /* inline critical CSS */
  </style>
</head>

规定什么CSS是主要要求(1)查看移动或桌面下页面视口(viewport
)大小,(2)识别视口中可知的元素(3)接纳那一个要素关联的CSS。

那或许有点困难,尤其是手工落成,可是有一些神奇的工具得以协助加速甚至自动化那一个过程。我利用 Filament
Group编写的 grunt-criticalcss来辅助我为页面生成关键CSS,然后再手动优化一些CSS(合天公地道复的传媒询问和删除我觉着不须要的CSS)。

亚洲必赢官网 11

About页面只加载关键CSS(左边)和加载整个CSS(右边)的对照

现今主要CSS已经内联到<head>标签内,我利用loadCSS工具来异步加载样式表的其他部分。

XHTML

<head> <style> /* inline critical CSS */ </style>
<script> // inline the loadCSS script function loadCSS( href,
before, media, callback ){ … } // then load your stylesheet
loadCSS(“/path/to/stylesheet.css”); </script> <noscript>
<link href=”/path/to/stylesheet.css” rel=”stylesheet”>
</noscript> </head>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
  <style>
    /* inline critical CSS */
  </style>
  <script>
   // inline the loadCSS script
   function loadCSS( href, before, media, callback ){ … }
   // then load your stylesheet
   loadCSS("/path/to/stylesheet.css");
  </script>
  <noscript>
    <link href="/path/to/stylesheet.css" rel="stylesheet">
  </noscript>
</head>

谷歌(谷歌)也付出non-render-blocking加载CSS的 另一个示范 。

图片

图形平时占到一个网站的大洋。

可以抛弃了图标字体,使用内联SVG。SVG
sprites可能是小编在全路网站使用中不乏先例内联SVG图标的一个立见成效的替代解决方案。

在可能的气象下利用CSS代替图片,现在的CSS能做的已经重重了。

你也足以经过优化图片来压缩字节。有两种办法来优化图片:
有损压缩:下降图像的身分
无损压缩:不影响质料

[css] view plaincopy

预加载非关键CSS

你还会小心到,非关键CSS使用了一个看起来更扑朔迷离的link标签来加载。rel="preload"通告浏览器开始得到非关键CSS以供之后用。其关键在于,preload不封堵渲染,无论资源是或不是加载成功,浏览器都会跟着绘制页面。

link标签中的onload属性允许大家在非关键CSS加载落成时运行脚本。Critical模块可以活动将此脚本嵌入到文档中,那种方式提供了将非关键CSS加载到页面中的跨浏览器包容方法。

<link href=”/style.96106fab.css” rel=”preload” as=”style”
onload=”this.rel=’stylesheet'”/>

1
  <link href="/style.96106fab.css" rel="preload" as="style" onload="this.rel=’stylesheet’"/>

JavaScript

JavaScript也会造成render-blocking为此它的加载也应有优化可以利用以下的法子:

  1. 小的内联脚本。
  2. 在文档底部加载外部脚本。
  3. 采纳defer属性推迟执行脚本。
  4. 应用async属性异步加载的脚本。

XHTML

<head> <script> // small inline JS </script>
</head> <body> … <script
src=”/path/to/independent-script.js” async> <script
src=”/path/to/parent-script.js” defer> <script
src=”/path/to/dependent-script.js” defer> </body>

1
2
3
4
5
6
7
8
9
10
11
<head>
  <script>
    // small inline JS
  </script>
</head>
<body>
  …
  <script src="/path/to/independent-script.js" async>
  <script src="/path/to/parent-script.js" defer>
  <script src="/path/to/dependent-script.js" defer>
</body>

在解析HTML时 defer推迟下载脚本,一旦页面渲染完成执行脚本。defer支持很不错,但据报道存在不一致和不可靠性,所以最好同时使用defer并把脚本放置在文档底部。

在HTML解析和执行时异步下载脚本文件。这允许多个脚本文件并发下载和执行;然而,他们不能保证在一个特定的顺序加载。如果相互依赖可能需要在这些场景下修改任意脚本。

async支持大不如defer,那就是为什么自己选拔使用loadJS,用来异步加载JS文件的本子。它扶助老式浏览器,同时有一个实用的特色,即基于条件加载脚本。

XHTML

<head> <script> // small inline JS </script>
</head> <body> … <script> // inline loadJS function
loadJS( src, cb ){ .. } // then load your JS
loadJS(“/path/to/script.js”); </script> <script
src=”/path/to/parent-script.js” defer> <script
src=”/path/to/dependent-script.js” defer> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<head>
  <script>
    // small inline JS
  </script>
</head>
<body>
  …
  <script>
    // inline loadJS
    function loadJS( src, cb ){ .. }
    // then load your JS
    loadJS("/path/to/script.js");
  </script>
  <script src="/path/to/parent-script.js" defer>
  <script src="/path/to/dependent-script.js" defer>
</body>

2、页面渲染

消除render-blocking的JavaScript和CSS。

render-blocking文件增添了浏览器突显内容的岁月,因为那些文件需要先下载并拍卖。多少个render-blocking文件须求浏览器接纳三个线程去得到和处理它们,等待时间越来越充实。

@import url(“style.css”)

把Critical组件添加到webpack打包流程中

自身成立了一个名为HTML Critical Webpack
Plugin的插件,该插件仅仅是Critical模块的包装。它将在HTML
Webpack Plugin
输出文件后运行。

你可以在Webpack的品类中如此引入:

const HtmlCriticalPlugin = require(“html-critical-webpack-plugin”);
module.export = { … plugins: [ new HtmlWebpackPlugin({ … }), new
ExtractTextPlugin({ … }), new HtmlCriticalPlugin({ base:
path.join(path.resolve(__dirname), ‘dist/’), src: ‘index.html’, dest:
‘index.html’, inline: true, minify: true, extract: true, width: 375,
height: 565, penthouse: { blockJSRequests: false, } }) ] };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const HtmlCriticalPlugin = require("html-critical-webpack-plugin");
 
module.export = {
  …
  plugins: [
    new HtmlWebpackPlugin({ … }),
    new ExtractTextPlugin({ … }),
    new HtmlCriticalPlugin({
      base: path.join(path.resolve(__dirname), ‘dist/’),
      src: ‘index.html’,
      dest: ‘index.html’,
      inline: true,
      minify: true,
      extract: true,
      width: 375,
      height: 565,
      penthouse: {
        blockJSRequests: false,
      }
    })
  ]
};

留意:你应有只在生育版本中利用,因为它将使你的支出条件的构建很慢

Web字体

Web字体使内容更为分明和可以,但是也对页面渲染发生了负面影响。在加载页面时,尤其是移动端的连接,你或许曾经注意到文本在一段时间看不见。那被称呼 FOIT(不可知文本闪动)。

亚洲必赢官网 12

本人的网站出现FOIT的旗帜

当浏览器尝试下载一个web字体,它将隐藏文本一段时间,直到它做到字体下载,才显得文本。在最糟糕的事态下,文本无限期地不可知,使内容完全不可以读书。

我处理FOIT 的艺术是逐步加载字体,首先依赖默许和系统字体(例如Helvetica和Georgia)允许连忙显示的情节。Web字体然后利用loadCSS异步加载,同时通过 Font
Face
Observer库来检测字体哪一天下载成功。一旦字体下载且可用,一个类被添加到文档中,用于安装页面正确的字体。

JavaScript

<head> <style> body { font-family: Helvetica, Arial,
sans-serif; } .fonts-loaded body { font-family: Roboto, Helvetica,
Arial, sans-serif; } </style> <script> // inline loadCSS
function loadCSS( href, before, media, callback ){ … } // load
webfonts
loadCSS(“//fonts.googleapis.com/css?family=Roboto:400,500,700”); //
inline FontFaceObserver (function(){ … } // detect loading of fonts
var roboto400 = new FontFaceObserver(“Roboto”, { weight: 400 }); var
roboto700 = new FontFaceObserver(“Roboto”, { weight: 700 });
Promise.all([ roboto400.check(), roboto700.check() ]).then(function()
{ document.documentElement.className += ” fonts-loaded”; });
</script> </head>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<head>
  <style>
    body { font-family: Helvetica, Arial, sans-serif; }
    .fonts-loaded body { font-family: Roboto, Helvetica, Arial, sans-serif; }
  </style>
  <script>
    // inline loadCSS
    function loadCSS( href, before, media, callback ){ … }
    // load webfonts
    loadCSS("//fonts.googleapis.com/css?family=Roboto:400,500,700");
    // inline FontFaceObserver
    (function(){ … }
    // detect loading of fonts
    var roboto400 = new FontFaceObserver("Roboto", {
      weight: 400
    });
    var roboto700 = new FontFaceObserver("Roboto", {
      weight: 700
    });
 
    Promise.all([
      roboto400.check(),
      roboto700.check()
    ]).then(function() {
      document.documentElement.className += " fonts-loaded";
    });
  </script>
</head>

日益加载字体将招致FOUT(没有样式的文书闪动)和FOFT(仿文本闪动),那有赖于它是哪些做的。

亚洲必赢官网 13

字体逐步加载,不暴发FOIT

但是,好处是内容平素可知,而不会产出看不见的事态。关于如何战胜FOIT,我写了一篇的深深作品
运用字体事件加载字体。

CSS

默许境况下,浏览器将CSS作为渲染阻塞;由此,当它加载时,浏览器暂停渲染,等待CSS已经被下载和处理。外部体制表意味着越多的网络线程,它增加了等待时间,同时大型样式表也会增多等待时间。
俺们可以透过在<head>标签内联“关键CSS”来革新页面渲染时间,那样浏览器可以~~~~不用再伺机下载整个样式表,就可以高速地渲染页面内容,然后经过non-rendering-blocking格局加载完整的样式表。

规定哪些CSS是至关主要要求
(1)查看移动或桌面下页面视口(viewport )大小
(2)识别视口中可知的因素
(3)拔取那几个元素关联的CSS

则提出你利用上面的代码来顶替。

突显结果

当今曾经抽离了主要CSS,并且把非关键CSS的加载放到空闲时间,那在性质方面会有哪些的提拔呢?

自己利用Chrome的Lighthouse增添插件进行测试。请记住,大家品尝优化的目的是“首次有效绘制”,也就是用户须要多长期才能收看真的可浏览的页面。

不行使分别关键CSS技术的显现

亚洲必赢官网 14

利用分别关键CSS技术的显示

亚洲必赢官网 15

正如你所看到的,我的应用程序First Meaningful
paint时间缩小了邻近1秒,到达可交互状态的岁月节省了0.5秒。实际中,你的应用程序可能无法赢得那样惊人的立异,因为自己的CSS很笨重(我包括了总体Bootstrap库),而且在这么一个概括的应用程序中,我一直可是多要害CSS规则。

1 赞 1 收藏
评论

亚洲必赢官网 16

其它

其余措施,如启用gzip和缓存、配置SSL和从内容分发网络(CDN)获取资源,可以增进前端性能,但需要一些劳务器端扶助。基于篇幅所限,我不会深切他们。不过我想强调的是,我推荐使用那几个主意,他们将会对您的网站性能有一个到家和主动的震慑。

本身将涉嫌,因为我的网站的访问量百分比卓越部分起点美利哥以外,而自己的服务器是身处伦敦(London),我于是决定把自身的一对资源揭橥到CDN上。他们配备到一个 Amazon
S3  bucket上,绑定到一个CloudFront版本。

JavaScript

JavaScript也会导致render-blocking,因而它的加载也理应优化。可以动用以下的法子:
小的内联脚本。
在文档底部加载外部脚本。
运用defer属性推迟执行脚本。
行使async属性异步加载的脚本。

[html] view plaincopy

综述

在过去的几个月尾我直接在做性能创新,固然这有触目皆是做事,我确实注意到了差距。我偶然得到关于自己的网站速度的评说,那是性质调整的结果。

我还未曾在目标跟踪上做得很好(更加是最初),但让大家看看基于已有数据的一部分相比较。

平均大小 我的站点 差别
Requests 93 19 -87.6%
Page size 1950KB 524KB -73.1%
HTML 58KB 2.8KB -95.1%
Images 1249KB 66.3 -94.7%
CSS 60KB 14.6KB -75.7%
JS 303KB 6.1KB -98.0%
Fonts 87KB 10.2KB -88.3%

一体化上87.5%优厚平均水平!不是很坏。现在谷歌(Google)PageSpeed也给自家的网站一个不错的分数。

亚洲必赢官网 17

优化后谷歌(谷歌)PageSpeed的结果

关于WebPagetest的结果**,**自己注意到,即使About页面字节扩大了,但开端渲染和加载的光阴大大收缩。

亚洲必赢官网 18

About页面在渲染优化后的WebPagetest结果

属性立异将永生永世是举行时,在 HTTP/2到来的旅途其间有些将改成,此前好用的技巧或者不再好用,同时有些可能完全弃用。

我认为在过去的几个月,我获取了很大的展开,也学到了不少。我的网站在Github上是开源的,所以大家可以天天看一看。我还没有弄了解那所有,但愿意自己所享用的所做所学,会给您有的看法。假如你有其余问题或想聊一聊,随时打扰我的推文(Tweet) @jonsuh仍然给自身发 邮件。

Web字体

Web字体使内容进一步清晰和精美,然而也对页面渲染爆发了负面影响。在加载页面时,尤其是运动端的连接,你恐怕早就注意到文本在一段时间看不见。那被称作
FOIT(不可知文本闪动)。(FOIT:当浏览器尝试下载一个web字体,它将隐藏文本一段时间,直到它做到字体下载,才展现文本。在最不好的情事下,文本无限期地不可知,使内容完全不可以读书。)

<link rel=”style.css” href=”style.css” type=”text/css”>

资源

此处是增加的有用资源,让您深深掌握网站性能。

  • 深远谷歌(谷歌)PageSpeed
  • SpeedCurve
  • WebPagetest
  • 自家的网站花费的流量有些许?
  • 网页设计师和前端开发人士必要关爱的前端性能
  • 哪些让RWD网站的快慢飙起来
  • 进步Smashing
    Magazine的特性:案例学习
  • 网站更庞大并不意味着更加多的等候时间
  • 优化性能
  • RWD 膨胀 第一局地 和
    第二片段
  • 谷歌PageSpeed模块
  • 负总责的应酬分享链接
  • 首次访问的内联关键CSS
  • async 和
    defer属性的可比
  • 使用字体事件加载字体
  • 应用字体事件再一次加载字体
  • 有关字体加载后续——仿文本闪动
  • 播客——通往高性能网站

    1 赞 9 收藏 1
    评论

其它

其余方法,如启用gzip和缓存、配置SSL和从内容分发网络(CDN)获取资源,可以进步前端性能,但须要一些劳动器端协理。

那就是具备内容了,其余还有一部分细节以及引进,可以协调去看一下。希望不算侵权。

  1. 防止接纳document.write
    在JavaScript中,可以采取document.write在网页上呈现内容或调用外部资源,而经过此办法,浏览器必须选拔部分剩余的步子——下载资源、读取资源、运行JavaScript来精晓须要做怎样,调用其余资源时要求再行再履行三遍这一个进度。由于浏览器此前不知情要来得怎么,所以会稳中有降页面加载的进程。
    要知道,任何可以被document.write调用的资源,都足以经过HTML来调用,那样速度会更快。检查你的页面代码,即使存在类似于上面的代码:

关于小编:cucr

亚洲必赢官网 19

今日头条博客园:@hop_ping
个人主页 ·
我的篇章 ·
17

亚洲必赢官网 20

[js] view plaincopy

document.write(‘<script src=”another.js”></script>’);

提议修改为:

[html] view plaincopy

<script src=”another.js”></script>

  1. 联合多个外表CSS文件
    在网站中每使用一个CSS文件,都会让你的页面加载速度慢一点点。如若您有一个以上的CSS文件,你应当将它们统一为一个文书。
    你可以透过 CSS delivery工具
    来检测页面代码中的CSS文件,然后经过复制粘贴的形式将它们统一为一个。合并后纪念修改页面中的引用代码,并删除旧的引用代码。

  2. 统一八个外表JavaScript文件
    大多数情景下,网站反复会蕴藏若干个
    JavaScript文件,但并不必要将这几个文件都单身出来,其中多少是可以统一为一个文书的。
    您能够通过 resource check工具
    来检测页面中所引用的JavaScript文件数,然后可以透过复制粘贴的方法将多少个文本合并为一个。

  3. 由此CSS sprites来组合图像
    若是页面中有6个小图像,那么浏览器在展现时会分别下载。你可以通过CSS
    sprites将这个图像合并成1个,能够裁减页面加载所需的时光。
    CSS
    sprites要求有八个步骤:整合图像、定位图像。比如你可以经过上面的代码来分别定位上面图像中的上下两局地。

[css] view plaincopy

.megaphone {width:50px; height:50px; background:url(images/sprite.png) 0
0px;}
.smile {width:50px; height:50px; background:url(images/sprite.png) 0
-50px;}

  1. 延迟JavaScript的加载
    浏览器在举行JavaScript代码时会结束处理页面,当页面中有成百上千JavaScript文件或代码要加载时,将导致严重的延迟。固然可以应用defer、异步或将JavaScript代码放到页面尾部来延迟JavaScript的加载,但那几个都不是一个好的缓解方案。
    下面是Google的建议。

[js] view plaincopy

<script type=”text/javascript”>
function downloadJSAtOnload() {
var element = document.createElement(“script”);
element.src = “defer.js”;
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener(“load”, downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent(“onload”, downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

那段代码的意趣是等待页面加载成功后,然后再加载外部的“defer.js”文件。上边是测试结果。

  1. 启用压缩/ GZIP
    行使gzip对HTML和CSS文件举办压缩,平时可以省去大致50%到70%的大大小小,那样加载页面只须要更少的带宽和更少的时刻。
    您可以因而那么些 Gzip压缩工具 来检测页面是不是已经经过Gzip压缩。
  2. 启用Keep-Alive
    HTTP协议利用“请求-应答”形式,当使用普通格局(非KeepAlive方式)时,每个请求/应答客户和服务器都要新建一个连连,达成之后马上断开连接(HTTP协议为无连接的协议);当使用
    Keep-Alive方式(又称持久连接、连接重用)时,Keep-Alive作用使客户端到劳动器端的接连持续有效,当出现对服务器的后继请求时,Keep-Alive功用幸免了建立或者再度确立连接。
    在HTTP 1.0中Keep-Alive默许是关闭的,须要在HTTP头中进入“Connection:
    Keep-Alive”,才能启用Keep-Alive;在
    HTTP1.1中Keep-Alive默认启用,参加“Connection:
    close”可关闭。方今多数浏览器都是用HTTP
    1.1说道,也就是说默许都会发起Keep-Alive的总是请求了,所以是还是不是能一气浑成一个完整的Keep-
    Alive连接就看Web服务器的装置景况。
  3. 将小的CSS和JavaScript代码内嵌到HTML中
    借使你的CSS代码比较小,可以将这一部分代码放到HTML文件中,而不是一个外表CSS文件,这样可以减去页面加载所需的文书数,从而加速页面的加载。同样,也可以将小的
    JavaScript脚本代码内嵌到HTML文件中。

[html] view plaincopy

<style type=”text/css”>

</style>

<script type=”text/javascript”>

</script>

  1. 动用浏览器缓存
    在呈现页面时,浏览器需求加载logo、CSS文件和任何部分资源。浏览器缓存所做的行事就是“记住”已经加载的资源,让页面的加载速度更快。
  2. 压缩CSS代码
    无论您在页面中怎么着使用CSS,CSS文件都是越小越好,那会赞助你升官网页的加载速度。你可以经过
    Minify CSS工具 来减弱你的CSS代码。
    压缩前:

[css] view plaincopy

body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}

压缩后:

[css] view plaincopy

body {background-color:#d0e4fe;}
h1 {color:orange;text-align:center;}

  1. 尽量裁减DNS查询次数
    当浏览器与Web服务器建立连接时,它必要开展DNS解析,将域名解析为IP地址。然则,一旦客户端要求履行DNS
    lookup时,等待时间将会在乎域名服务器的灵光响应的快慢。
    即便拥有的ISP的DNS服务器都能缓存域名和IP地址映射表,但要是缓存的DNS记录过期了而必要立异,则可能须要经过遍历多个DNS节点,有时候必要通过全世界限量内来找到可信任的域名服务器。一旦域名服务器工作繁忙,请求解析时就必要排队,则尤其延迟等待时间。
    之所以,减弱DNS的查询次数至极主要,页面加载时就尽量防止额外耗时。为了减小DNS查询次数,最好的缓解形式就是在页面中核减差距的域名请求的空子。
    您可以由此 request checker工具
    来检测页面中设有多少请求,然后举行优化。
  2. 尽量收缩重定向
    偶尔为了特定需要,需求在网页中利用重定向。重定向的趣味是,用户的本来面目请求(例如请求A)被重定向到任何的伸手(例如请求B)。
    可是那会导致网站性能和速度下滑,因为浏览器访问网址是不可计数的进度,纵然访问到一半而跳到新地方,就会另行发起一而再串的经过,那将浪费广大的时辰。所以大家要尽量幸免重定向,谷歌(Google)指出:

不要链接到一个饱含重定向的页面
决不请求包括重定向的资源

  1. 优化样式表和本子的相继
    Style标签和体裁表调用代码应该放置在JavaScript代码的眼前,那样可以使页面的加载速度加速。

[html] view plaincopy

<head>
<meta name=description content=”description”/>
<title>title</title>
<style>
page specific css code goes here
</style>
<script type=”text/javascript”>
javascript code goes here
</script>
</head>

  1. 防止JavaScripts阻塞渲染
    浏览器在蒙受一个引入外部JS文件的<script>标签时,会终止所有工作来下载并分析执行它,在那个进度中,页面渲染和用户交互完全被堵塞了。那时页面加载就会截止。
    谷歌(Google) 提议删除苦恼页面中首先屏内容加载的JavaScript,第一屏是指用户在显示屏中中期见到的页面,无论是桌面浏览器、手机,依旧三星GALAXY Tab。

  2. 压缩原始图像
    假使无需在页面中突显较大的图像,那么就提出将图像的骨子里尺寸减弱为突显的大大小小,那样可以减掉下载图像所需的时日。

  3. 点名图像尺寸
    当浏览器加载页面的HTML代码时,有时候要求在图片下载已毕前就对页面布局举办稳定。若是HTML里的图样并未点名尺寸(宽和高),或者代码描述的尺码与事实上图片的尺寸不合时,浏览器则要在图片下载已毕后再“回溯”该图形并再度展现,那将消耗额外的光阴)。
    之所以,最好为页面中的每一张图片都指定尺寸,不管是在HTML里的<img>标签中,依然在CSS中。
    越多新闻:
    https://developers.google.com/speed/docs/insights/rules
    二、雅虎的Web优化最佳实践

  4. 内容优化

尽量减弱HTTP请求:常见方法包罗合并八个CSS文件和JavaScript文件,利用CSS
7-Ups整合图像,Image
map(图像中区其他区域安装分裂的链接),内联图象(使用 data: URL scheme
在实质上的页面嵌入图像数据)等。
减少DNS查找
防止重定向
使Ajax可缓存
推迟加载组件:考虑怎么着内容是页面突显时所须要首先加载的、哪些内容和结构可以稍后再加载,根据这么些优先级举行设定。
预加载组件:预加载是在浏览器空闲时请求未来也许会用到的页面内容(如图像、样式表和本子)。当用户要访问下一个页面时,页面中的内容一大半早已加载到缓存中了,由此可以大大改革访问速度。
减去DOM元素数量:页面中设有多量DOM
元素,会招致JavaScript遍历DOM的功用变慢。
依据域名划分页面内容:把页面内容划分成多少有些可以使您最大限度地促成平行下载。但要确保您利用的域名数量在2个到4个里头(否则与第2条争持)。
最小化iframe的数码:iframes
提供了一个简便的措施把一个网站的始末嵌入到另一个网站中。但其创建速度比其余包含JavaScript和CSS的DOM元素的创始慢了1-2个数据级。
防止404:HTTP请求时间消耗是很大的,由此选择HTTP请求来收获一个没有用处的响应(例如404未曾找到页面)是全然没有须求的,它只会回落用户体验而不会有一点好处。

  1. 服务器优化

使用内容分发网络(CDN):把您的网站内容分散到四个、处于分裂地区地方的服务器上得以加快下载速度。
添加Expires或Cache-Control音讯头:对于静态内容,可安装文件头过期时间Expires的值为“Never
expire(永然而期)”;对于动态内容,可应用合适的Cache-Control文件头来赞助浏览器举办有规范的呼吁。
Gzip压缩
安装ETag:ETags(Entity
tags,实体标签)是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是或不是合营的一种机制。
提早刷新缓冲区:当用户请求一个页面时,服务器会成本200到500微秒用于后台协会HTML文件。在那里面,浏览器会一贯空闲等待数据重返。在PHP中,可以运用flush()方法,它同意你把曾经编译的好的一对HTML响应文件先发送给浏览器,那时浏览器就会得以下载文件中的内容(脚本等)而后台同时处理剩余的HTML页面。
对Ajax请求使用GET方法:当使用XMLHttpRequest时,浏览器中的POST方法会首先发送文书头,然后才发送数据。由此利用GET最为适宜。
幸免空的图像src

  1. Cookie优化

减小cookie大小:去除不需要的coockie,并使coockie体积尽量小以缩减对用户响应的震慑
本着Web组件使用域名无关的库克ie:对静态组件的Cookie读取是一种浪费,使用另一个无Cookie的域名来存放静态组件是一个好点子,或者也可以在库克ie中只存放带www的域名。

  1. CSS优化

将CSS代码放在HTML页面的顶部
防止使用CSS表明式:CSS表明式在实施时候的运算量非常大,会对页面性能发生大的震慑
使用<link>来代替@import
避免拔取Filters:IE独有属性AlphaImageLoader用于校对IE
7以下版本中PNG图片的半透明效果,但它的题目在于浏览器加载图片时它会告一段落内容的变现并且冻结浏览器。

  1. JavaScript优化

将JavaScript脚本放在页面的平底
将JavaScript和CSS作为外部文件来引用:在其实使用中采取外部文件可以升高页面速度,因为JavaScript和CSS文件都能在浏览器中暴发缓存。
缩小JavaScript和CSS
剔除重复的本子
最小化DOM的造访:使用JavaScript访问DOM元素相比慢
开发智能的事件处理程序

  1. 图像优化

优化图片大小
由此CSS Coca Colas优化图片
决不在HTML中使用缩放图片
favicon.ico要小而且可缓存

  1. 本着移动优化

有限援助组件大小在25KB以下:首假若因为三星不可能缓存大于25K的文件(注意那里指的是解压缩后的分寸)。
将零件封装成为一个复合文档:把页面内容打包成复合文本就不啻带有多附件的Email,它可以使你在一个HTTP请求中获取多少个零部件。
越来越多音讯:http://developer.yahoo.com/performance/rules.html(中文翻译)

三、一些工具

  1. Google PageSpeed
    谷歌(Google)提供了
    PageSpeed工具,那是一个浏览器插件,可以很好地使用上文中谷歌(Google)所涉及的Web优化实践——辅助您轻轻松松对网站的习性瓶颈举行剖析,并为你提供优化指出。

在线分析你的网站
设置浏览器插件( Chrome、 Firefox)
经过 Insights API在应用中置放PageSpeed功效

  1. 雅虎 YSlow
    YSlow是雅虎推出的一款浏览器插件,可以扶助您对网站的页面进行剖析,并为你提供一些优化指出,以增加网站的性质。

Firefox插件
Chrome插件
YSlow for Mobile/Bookmarklet
源码

  1. 其他分析优化工具

蜘蛛模拟器:那一个工具得以分析你的页面,并提供部分优化提议。
图像SEO工具:这么些工具得以检查图片的alt标签,并提供一些优化提出。
请求检查器:找出页面中要求加载哪些资源和服务。
链接检查器:检查页面中内部、外部和无效链接。
HTTP头检查:突显网页或资源的HTTP响应头。
交际检查器:检查页面中的社交组件,比如谷歌(Google)+、脸书、推文(Tweet)、Linkedin和Pinterest。
If modified检查器:检查页面是或不是接受 If-Modified-Since HTTP头。
Gzip检查器:检查页面是或不是通过了Gzip压缩。
CSS delivery工具:检查页面中所使用的CSS文件。
面包屑工具:可按照你输入的音信提供面包屑导航的代码。
CSS压缩工具:用于压缩CSS代码。

经过上述的优化提出和优化工具,可以轻松找到影响您的Web页面性能的瓶颈,轻松已毕Web页面性能的升级换代。假诺你也有Web优化方面的阅历,欢迎分享。

网站地图xml地图