打开网页，用户最满意的时间是2-5秒，如果用户等待超过10秒，99%的用户会关闭这个网页。那么，是什么原因会导致网站打开慢？又有什么办法解决呢？一般来说，http请求过多、网页过大、服务器性能过差等等都可能导致网站打开慢。从技术层面来分享一些参考解决方法：

原因分析

• 带宽不足，首先想到的就是自己网速的问题，但是一般网速在1M以上的，打开网页一般不会是很慢的。网站服务器的带宽不够的话，当大量用户访问的时候，网页的加载也是很慢的，这就是网络的出口端和入口端两个方面

• 硬件配置低，本机的配置也会是一方面的，但是只要不是老赛扬单核+512M的配置，一般不会是电脑配置的问题。服务器端的配置也是同样的道理。

• CPU或者是内存被占满的时候，打开网页很是会很慢的，因为整个电脑都很慢

• DNS解析慢，域名的解析是需要专门的域名解析服务器来完成的，DNS解析包括往复解析的次数及每次解析所花费的时间，它们两者的积即是DNS解析所耗费的总时间，在http请求的过程中，域名解析和建立连接占的时间很多。

• JS阻塞请求，写的js代码出现问题，解析就会花费很长时间，这两个js请求之间会出现一个很大的空隙，就会导致这段时间的资源加载都被阻塞住，

• 接受数据时间过长，http请求的大部分时间应该花在后面几个阶段，比如等待响应和接收数据。但是，如果接收数据的时间太长了，长到数百毫秒甚至以秒计算的时候，那也是有问题的。这种情况一般是因为下载的内容太重了，例如大图片、大脚本等。这类问题可以使用GZIP压缩、图片压缩或者JS/CSS的minify等手段来解决。

• 加载某个资源太慢，如果某个请求比其他的请求多出很多的时间，那么一般情况就是某个资源的加载太慢，导致了整个网页变慢，原因有可能是：1)资源在第三方站点上，他们很慢；2)这个资源太大了；3)这个资源使用的域名有问题

• 后端代码问题，主要有代码冗余、数据库发生锁死、动态请求时间过长等，这就需要研发RD(Research and Development)优化一切可以优化的东西了

• 前端页面请求的资源过多，onload之前如果有几百行，速度自然会慢的，如果请求的资源不存在，那么速度将会更慢

• 网页本身中包含了追踪或者是分析用户的工具，从而导致网页的加载时间变的慢，比如之前海盗湾中会给用户的电脑插入挖矿的js脚本

• 网页内容的大小(重要)。网页文件的大小是网站是否能快速打开最重要一个因素，如果说服务器等硬件方面决定不了，强烈建议从这里下手，不管是表格还是DIV+CSS，适当的优化代码，都能减少网页大小。尽量优化代码，用最少的代码。同时大量错误、冗余代码也是拖慢网站速度之一。

• 大量数据库操作。小网站在执行大量数据库操作时，也会影响网站打开速度，这里使asp+access结构的网站尤为明显，尤其是同时有大量用户提交评论时，就操作数据库锁死，导致网站打不开。

解决方案

一、优化图片

几乎没有哪个网页上是没有图片的。如果你经历过56K猫的年代，你一定不会很喜欢有大量图片的网站。因为加载那样一个网页会花费大量的时间。

即使在现在，网络带宽有了很多的提高，56K猫逐渐淡出，优化图片以加快网页速度还是很有必要的。

优化图片包括减少图片数、降低图像质量、使用恰当的格式。

1、减少图片数：去除不必要的图片。

2、降低图像质量：如果不是很必要，尝试降低图像的质量，尤其是jpg格式，降低5%的质量看起来变化不是很大，但文件大小的变化是比较大的。

3、使用恰当的格式：请参阅下一点。

因此，在上传图片之前，你需要对图片进行编辑，如果你觉得photoshop太麻烦，可以试试一些在线图片编辑工具。懒得编辑而又想图片有特殊的效果？可以试试用过调用javascript来实现图片特效。

二、图像格式的选择

一般在网页上使用的图片格式有三种，jpg、png、gif。三种格式的具体技术指标不是这篇文章探讨的内容，我们只需要知道在什么时候应该使用什么格式，以减少网页的加载时间。

1、JPG：一般用于展示风景、人物、艺术照的摄影作品。有时也用在电脑截屏上。

2、GIF：提供的颜色较少，可用在一些对颜色要求不高的地方，比如网站logo、按钮、表情等等。当然，gif的一个重要的应用是动画图片。就像用Lunapic制作的倒映图片。

3、PNG：PNG格式能提供透明背景，是一种专为网页展示而发明的图片格式。一般用于需要背景透明显示或对图像质量要求较高的网页上。

三、优化CSS

CSS叠层样式表让网页加载起来更高效，浏览体验也得到提高。有了CSS，表格布局的方式可以退休了。

但有时我们在写CSS的时候会使用了一些比较罗嗦的语句，比如这句：

你可以将它简化为：

margin: 10px 20px 10px 20px;

又或者这句：

可以用div来包含：

简化CSS能去除冗余的属性，提高运行效率。如果你写好CSS后懒得去做简化，你可以使用一些在线的简化CSS工具，比如CleanCSS。

四、网址后加斜杠

有些网址，比如"www.kenengba.com/220"，当服务器收到这样一个地址请求的时候，它需要花费时间去确定这个地址的文件类型。如果220是一个目录，不妨在网址后多加一个斜杠，让其变成www.kenengba.com/220/，这样服务器就能一目了然地知道要访问该目录下的index或default文件，从而节省了加载时间。

五、标明高度和宽度

这点很重要，但很多人由于懒惰或其它原因，总是将其忽视。当你在网页上添加图片或表格时，你应该指定它们的高度和宽度，也就是height和width参数。如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。

下面是一个比较友好的图片代码：

当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。

六、减少HTTP请求数

打开一个网页的时候，后台程序的响应并不所需太多时间，等待的时间主要花费在下载网页元素上了，即HTML、CSS、JavaScript、Flash、图片等。据统计，每增加一个元素，网页载入的时间就会增加25-40毫秒(具体取决于用户的带宽情况)。

所以，想要提高网页打开速度，可以降低HTTP请求数，这里提供以下3种方法：

(1)例如用CSS代码代替一些图片(比如圆角图片)，尽可能的减少图片使用。

(2)合并文件，对于文本文件，可以直接合并内容。如将多个JavaScript文件合并成一个，将多个CSS文件合并成一个。

(3)优化缓存，对于没有变化的网页元素(如页头、页尾等)，用户再次访问的时候没有必要重新下载，可以直接从浏览器缓存里读取。

七、样式表放在网页Head部分，把JS文件放到网页底部

经过实际测试，把样式表(CSS文件)移到网页的Head部分，可以提高有效页面的加载速度，让页面元素顺序显示。

网页打开时，所有元素是顺序显示的。但是由于JS具有特殊性，相对其他元素而言，会加载的较慢，在JS文件下载完成之前，其他后面元素的顺序显示将被阻塞，因此把JS文件尽量放在底部，意味着内容能被快速显示。

八、使用CDN(ContentDeliveryNetwork，内容分发网络)

CDN由一系列分散到各个不同地理位置上的Web服务器组成，它根据和用户在网络上的靠近程度来指定某台服务器响应用户的请求。当你的网站图片很多事，就一样要使用CDN了，比如现在的电商网站，几乎都在使用CDN。很多CSS样式框架以及js框架都提供了CDN服务，比如bootstrap等等。

九、压缩网页元素

显然，网页中的元素越小，下载所需的时间就越少。现在比较成熟和流程的压缩网页的方式是通过Gzip压缩，一般可以将网页文本内容减少60%以上。

十、把样式表和JS脚本放到外部文件中

虽然我们可以将样式表和JS脚本直接写入网页HTML中，能够减少外部文件调用数量，但是这样做会增加页面的文件大小。将样式表和JS脚本放到外部文件中，用户首次访问时也许会有点慢，但是后续在访问网站时，用户直接通过浏览器缓存就可以用，从而达到减少HTTP请求数的目的，为最优的做法。

此外，在选择服务器空间的时候，要注意服务器空间的性能，有时候，慢，并不是网站程序的问题，有可能是服务器空间太差劲了，不足以承担高并发。

其它小技巧

1、去除不必要加载项。

2、如果在网页上嵌入了其它网站的widget，如果有选择余地，一定要选择速度快的。

3、尽量用图片代替flash，这对SEO也有好处。

4、有些内容可以静态化就将其静态化，以减少服务器的负担。

5、统计代码放在页尾。

6、尽量不要用一个很小的图片当背景，这样做会加大客户端CPU处理时间