【美高梅开户网址】快速提高前端性能,缩短堵塞渲染的

火速提高前端性能

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的提出总让自家疑心。当一个网页被访问时,谷歌(Google)希望它仅加载对起来视图有用的情节,并选择空闲时间来加载其他情节。这种方式可以使用户尽可能早地来看页面。

美高梅开户网址 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页面的进程是否业已足足快了?其实可能还有很多方可荣升的地点。谷歌(Google)和雅虎也提议了有的Web应用的前端优化提议,并颁发了一部分工具,你可以逐一检查你的Web应用,以便达到更高的性质。
那个优化不仅仅可以给用户提供更好的经验,从开发者角度来说,举办优化还足以削减页面的乞求数、下落请求所占的带宽、收缩资源的荒废。
上面来探视谷歌和雅虎提供的Web页面优化最佳实践。
一、谷歌(Google)的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, /* HUAWEI6的尺寸,你可以按须求修改 */ 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>

谷歌(谷歌(Google))也付出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%优厚平均水平!不是很坏。现在谷歌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>标签时,会告一段落所有工作来下载并分析执行它,在那些历程中,页面渲染和用户交互完全被封堵了。那时页面加载就会告一段落。
    谷歌(谷歌) 建议删除苦恼页面中第一屏内容加载的JavaScript,第一屏是指用户在屏幕中中期见到的页面,无论是桌面浏览器、手机,仍然平板计算机。

  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 7-Ups优化图片
决不在HTML中行使缩放图片
favicon.ico要小而且可缓存

  1. 针对移动优化

有限支撑组件大小在25KB以下:首倘使因为中兴不能够缓存大于25K的文书(注意那里指的是解压缩后的轻重缓急)。
将零件封装成为一个复合文档:把页面内容打包成复合文本就好似带有多附件的Email,它亦可使你在一个HTTP请求中取得多个零件。
更加多音信:http://developer.yahoo.com/performance/rules.html(中文翻译)

三、一些工具

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

在线分析你的网站
设置浏览器插件( Chrome、 Firefox)
因而 Insights API在拔取中放到PageSpeed功效

  1. 雅虎 YSlow
    YSlow是雅虎推出的一款浏览器插件,可以协理您对网站的页面举行分析,并为你提供部分优化提议,以增强网站的性质。

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

  1. 其他分析优化工具

蜘蛛模拟器:那么些工具得以分析你的页面,并提供部分优化指出。
图像SEO工具:这几个工具得以检查图片的alt标签,并提供一些优化指出。
伸手检查器:找出页面中须求加载哪些资源和劳动。
链接检查器:检查页面中内部、外部和无效链接。
HTTP头检查:显示网页或资源的HTTP响应头。
张罗检查器:检查页面中的社交组件,比如谷歌+、非死不可、推特(TWTR.US)、Linkedin和Pinterest。
If modified检查器:检查页面是或不是接受 If-Modified-Since HTTP头。
Gzip检查器:检查页面是还是不是经过了Gzip压缩。
CSS delivery工具:检查页面中所使用的CSS文件。
面包屑工具:可根据你输入的音讯提供面包屑导航的代码。
CSS压缩工具:用于压缩CSS代码。

因此上述的优化提议和优化工具,可以轻松找到影响你的Web页面性能的瓶颈,轻松完毕Web页面性能的升级。假使您也有Web优化方面的阅历,欢迎分享。

发表评论

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

网站地图xml地图