课程咨询 :186-8884-0703
课程咨询qq:3390509615

深圳Web培训 > 达内新闻 > 【深圳WEB培训】如何快速提升网站前端性能
  • 【深圳WEB培训】如何快速提升网站前端性能

    发布:深圳达内      来源:深圳达内      时间:2015-11-23

  • 深圳WEB培训】如何快速提升网站前端性能

    最小化请求

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

    我的目标是减少HTTP请求。一种方法是分别编译或连接(组合、合并)CSS和javascript到一个文件中。让这个过程自动化(例如使用构建工具 Grunt 或 Gulp)是理想的效果,但至少也应该在生产环境下手动完成。

    第三方脚本是增加额外请求最常见的罪魁祸首,很多获取额外的文件如脚本、图像或CSS的请求都不止1个。浏览器内置的开发者工具可以帮助你发现这些元凶。

    这有额外的14个HTTP请求,共203.2KB。相反,我看看 “share-intent” 这个url,它基本上是通过传递和构建数据来生成一个共享,可以只使用HTML来创建社交共享链接。它让我丢掉用于共享的第三方脚本,这些脚本需要7次请求。我在Responsible Social Share Links这篇文章有更多的阐述。

    评估每一个第三方脚本并确定其重要性。也许存在一种不依赖第三方的方法来完成它。你可能会失去一些功能(例如like、tweet、分享数量),但是请问一下自己:“像数量统计就那么重要吗?”

    压缩、优化

    现在我找到了减少请求的方法,我开始寻找各种方法来减重。文件越小,加载速度越快。通常平均的页面大小为1950KB。按照内容分类:

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

    我使用这些数据作为参考和比较的起点,同时找到我可以用来为网站减负的方法。 我的网站耗费的流量有多少?是一个由Tim Kadlec编写的很棒的工具,可以用来帮助你测试和可视化,来自世界各地的访问在你的网站上消耗的流量。

    CSS和JavaScript

    压缩样式表和JavaScript文件可以明显减少文件大小,我仅在压缩上就从一个文件上节省了56%的空间。我使用 BEM (代码、元素、修饰符) 方法论编写CSS,这将导致冗长的类名。重构我的一些代码变得更简短(“navigation”为 “nav”, “introduction” 为 “intro”),这让我节省了一些空间,但和我期望的后期压缩相比并不是那么明显。我也重新评估了使用jQuery的必要性。对于压缩的135KB的JavaScript,大约96KB是jQuery库——71%之多!这里并没有很多需要依赖于jQuery,所以我花时间重构了代码。我通过剥离jQuery和在Vanilla重写它,去除了122KB,最终压缩后的文件大小减少到13KB。

    从那时起,我设法去掉更多空间(压缩后7KB),最后脚本在压缩和gzipped后只有0.365KB。

    图片

    图片通常占到一个网站的大头。通常网站平均有1249 KB的图片。

    我抛弃了图标字体,取而代之的是内联SVG。此外,任何可以矢量化的图片都使用内联SVG替换。我的网站先前版本的一个页面仅仅图标web字体就加载了145KB,同时对于几百个web字体,我只使用了一小部分。相比之下,当前网站的一个页面只加载10KB内联SVG,这可是93%的差异。

    SVG sprites看起来很有趣,它可能是我在整个网站使用普通内联SVG图标的一个可行的替代解决方案。

    在可能的情况下使用CSS代替图片,现在的CSS能做的已经很多了。然而,浏览器兼容性可能是现代CSS使用的一个问题;因此,充分利用 caniuse.com 和逐步改进。

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

    有损压缩:降低图像的质量

    无损压缩:不影响质量

    【深圳WEB培训】如何快速提升网站前端性能

    要同时使用两种方法取得最好的效果,顺序是很重要的。首先,使用有损图像压缩方法,比如在不超过必要大小的情况下调整图像大小。然后在略低质量且不压缩太多的情况下导出(如我通常在82 – 92%下导出JPG图片)接下来,使用无损图像优化工具比如 ImageOptim进行处理,从而通过删除不必要的信息,如元数据或颜色配置文件来进一步减少图像文件大小。

    页面渲染

    在这一点上,经过工作和汗水得出这些细节,我确信我的 Google PageSpeed Insights 的分数将是90s。

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

    render-blocking文件增加了浏览器显示内容的时间,因为这些文件需要先下载并处理。多个render-blocking文件需要浏览器使用多个线程去获取和处理它们,等待时间进一步增加。

    优化JavaScript、CSS和web字体的传输,可以提高页面的“第一时间渲染”。将这个时间降到最低,理解“关键的渲染路径”很重要,它描述了在当页面的第一个字节被收到,与页面第一次渲染成像素之间发生了什么。

    WebPagetest 是用来帮助你配置网站和页面性能最好的可视化工具。

    当最小化第一次渲染时间时,我们更多的关注以尽可能快的速度渲染内容,然后允许额外的“东西”在处理过程中逐步渲染。

    CSS

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

    我们可以通过在标签内联“关键CSS”来改善页面渲染时间,这样浏览器可以不用再等待下载整个样式表,就可以快速地渲染页面内容,然后通过non-rendering-blocking方式加载完整的样式表。

    确定哪些CSS是关键需要(1)查看移动或桌面下页面视口(viewport )大小,(2)识别视口中可见的元素(3)选择这些元素关联的CSS。

    这可能有点棘手,特别是手工完成,但是有一些神奇的工具可以帮助加快甚至自动化这个过程。我使用 Filament Group编写的 grunt-criticalcss来帮助我为页面生成关键CSS,然后再手动优化一些CSS(合并重复的媒体查询和删除我认为不必要的CSS)。

    谷歌也给出non-render-blocking加载CSS的 另一个示例 。

    JavaScript

    JavaScript也会导致render-blocking,因此它的加载也应该优化。可以使用以下的方法:

    小的内联脚本。

    在文档底部加载外部脚本。

    使用defer属性推迟执行脚本。

    使用async属性异步加载的脚本。

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

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

    async支持大不如defer,这就是为什么我选择使用loadJS,用来异步加载JS文件的脚本。它支持老式浏览器,同时有一个有用的特性,即根据条件加载脚本。

    Web字体

    Web字体使内容更加清晰和漂亮,但是也对页面渲染产生了负面影响。在加载页面时,特别是移动端的连接,你可能已经注意到文本在一段时间看不见。这被称为 FOIT(不可见文本闪动)。

    当浏览器尝试下载一个web字体,它将隐藏文本一段时间,直到它完成字体下载,才显示文本。在最糟糕的情况下,文本无限期地不可见,使内容完全不能阅读。

    我处理FOIT 的方式是逐步加载字体,首先依赖默认和系统字体(例如Helvetica和Georgia)允许快速呈现的内容。Web字体然后使用loadCSS异步加载,同时通过 Font Face Observer库来检测字体何时下载成功。一旦字体下载且可用,一个类被添加到文档中,用于设置页面正确的字体。逐步加载字体将导致FOUT(没有样式的文本闪动)和FOFT(仿文本闪动),这取决于它是如何做的。

    然而,好处是内容一直可见,而不会出现看不见的情况。关于如何击败FOIT,我写了一篇的深入文章 使用字体事件加载字体。

    其它

    其他方法,如启用gzip和缓存、配置SSL和从内容分发网络(CDN)获取资源,可以提高前端性能,但需要一些服务器端支持。基于篇幅所限,我不会深入他们。然而我想强调的是,我推荐使用这些方法,他们将会对你的网站性能有一个全面和积极的影响。

    我将提到,因为我的网站的访问量百分比相当一部分来自美国以外,而我的服务器是位于纽约,我于是决定把我的一些资源发布到CDN上。他们部署到一个 Amazon S3 bucket上,绑定到一个CloudFront版本。

    综述

    在过去的几个月中我一直在做性能改进,尽管这有很多工作,我确实注意到了差别。我偶尔得到关于我的网站速度的评论,这是性能调整的结果。

    更多内容请点击:深圳WEB前端培训

上一篇:【深圳WEB培训】WEB是一切的中心 而不是PC

下一篇:【深圳WEB培训】一些提高WEB性能的建议(1)

最新开班日期  |  更多

WEB前端工程师--全日制班

WEB前端工程师--全日制班

开班日期:4月28日

WEB培训前端工程师--周末班

WEB培训前端工程师--周末班

开班日期:4月28日

WEB培训免费训练营一期

WEB培训免费训练营一期

开班日期:4月28日

WEB培训免费训练营二期

WEB培训免费训练营二期

开班日期:4月28日

  • 地址:深圳市福田区八卦四路华晟达(原南方苑)大厦4楼东—深圳WEB开发培训中心
  • 课程培训电话:186-8884-0703
    课程咨询qq:3390509615     全国服务监督电话:400-111-8989
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56