影响网站性能的十大杀手

网站设计不仅需要考虑优秀的外型设计，良好的用户体验，还应当顾及网站的性能。本文在这里整理了对网站性能有重要影响的十个因素。

1. 服务器端未压缩的静态文件

通过文件进行Gzip压缩的方式可以减少从服务器端到浏览器端文件传输所需要的时间。

当某个用户点击到你的网站时，就产生一个从服务器端调用文件的请求。文件的尺寸越大，那么从服务器端加载文件到浏览器端所需的时间就会越久。对网页页面和样式文件进行Gzip压缩（最多可以减少70%的文件大小）可以有效减少传输所需时间。

考虑到成本和收益方面，Gzip压缩应该是让你的页面达到接近顶级速度优化的最佳方案了。

2. 未压缩的CSS和JavaScript文件

CSS和JavaScript文件的瘦身可以通过minification来完成。

Minification是一个用于在保持代码功能的前提下消除所有不必要代码字符的程序。它对CSS和JavaScript文件的处理包括：

• 移除空格；
• 移除注释；
• 移除无用的代码；
• 优化条件表达式；
• 缩短变量和函数名；
• 混淆产品代码。

Minification还能够降低网络延迟（数据包从一个地方传输到另一个地方的时间），这能够让浏览器加载得更快。

除了Minification，你还可以有更多的选择：

• 要压缩样式列表，可以选择CSSNano或者csso。CSSNano可以通过postcss作为插件集成到你的工作流中去。
• 要压缩JavaScript，可以选择UglifyJS2。你可以通过Grunt插件或者Gulp插件gulp-uglify、gulp-sourcemaps将UglifyJS运用到工作流中。

3. 未经优化的图片

优化页面上图片可以减少页面文件大小，而不会影响其质量。

通常在大型的网站之中包含了许多图片，在加载一个页面的数据时需要加载时间最多的就是页面的图片。因此，优化图片是改善网页性能的一个最简单方式。

优化图片的方式包括：

• 无损压缩；
• 将图片转化成网页适配类型；
• 不牺牲质量的前提下移除一些不重要的图片数据；
• 减少图片周围的空白；
• 把图片控制在合适的尺寸。

了解更多关于图像优化的知识>>

4. 没有利用浏览器的缓存

缓存可以减少用户对某个页面进行重复访问所需的加载时间；页面的存储文件在这个时间段内无需再次进行获取和加载。

当用户对某个网站进行首次访问时，会通过网络来获取页面资源，数据请求可能会在客户端和服务器端之间进行多次传递。缓存会存取平时常用的文件，从而确保后续的网站访问能够更加快速。要激活浏览器的缓存，需要在http响应头上添加Cache-Control和ETag。Cache-Control定义了浏览器和其它高速缓存在哪个时间段，如何对响应进行缓存。ETag提供了一个用于与服务器服务器进行通信，检查是否需要更新资源的验证令牌。

了解更多关于浏览器缓存的知识>>

5. 太多的重定向

重定向需要额外的HTTP请求-响应周期，而这会拖延页面的加载。

请移除不必要的重定向，特别是主页或者着陆页上的重定向。

6. 无效的HTML和CSS代码

请编写符合W3C标准的HTML和CSS代码，这样你的代码才能够被现代浏览器一致解析。

无效的HTML代码会因为某些不必要的操作而减缓页面的加载速度。

无效的CSS代码会减缓页面的渲染时间。

在运行代码之前，可以通过W3C HTML Validator验证HTML代码，通过W3C CSS validator验证CSS代码。或者你可以通过Grunt HTML文件包和样式文件验证将工作流和HTML验证结合起来。 

7. 陈旧的技术

尽量避免使用那些过时的技术，如在浏览器中嵌入Flash, Java和Silverlight。

大多数移动设备不支持如Flash，并且使用这些插件容易产生页面崩溃和安全事故。很多插件都是过去的陈旧技术，你在创建页面内容的时候一定要确保采用能够被所有的设备和浏览器接受的web技术。

8. 没有利用HTML的新特性

这里有一些简单的HTML 5特性能够帮助你改进网站性能：

在脚本中添加异步标签

对比以前，页面渲染之前你需要等待脚本完成页面文件的下载，而现在异步脚本已经在后台完成了下载。这意味着浏览器可以跟着异步脚本标签对HTML文件进行持续渲染。

为了让文档中head的脚本变成异步，你只需要在脚本标签中添加“async”：

<script src="async-example.js" <strong>async</strong>></script>

这可以防止脚本阻止后续的脚本和页面，从而提高了加载速度。

撤销meta标签的字符集设置

对meta标签的字符集进行指定能禁用IE8的先行下载器（lookahead downloader），而禁用此下载器可以提高页面的加载速度。

对HTML文件中HTTP内容类型响应头（HTTP Content-Type response header )的字符集进行设置，允许浏览器能够立即对HTML文件和脚本进行加载。该方法也可以对每一个页面的字符集进行设置。

以下是在常见服务器上如何对默认字符集进行配置：

在Apache中，在根目录的.htaccess文件中添加以下代码，然后重启Apache服务器：

AddDefaultCharset UTF-8

在nginx中，从server板块里添加字符集，然后重新加载nginx配置：

server {   # ... other server config...   charset utf-8;}

在IIS中，点击Open IIS > MIME types，然后将.html MIME type设置为text/html; charset=UTF-8，最后重启网站:

9. 同步的JavaScript阻止了页面的加载

将script标签添加在接近/body标签的位置，以确保它们不会阻止并行下载。

10. 缓慢的服务器响应

这是最复杂的网站性能杀手，很遗憾，要解决这个问题很难！

而你所能做的就是识别和修正服务器端代码，以确保服务器更快的响应时间和网站、应用程序更快的加载速度。

本文翻译自dzone.com，译者：控件网-回忆和感动

标签：

来源：慧都