网页加载缓慢？揭秘提升网页加载速度的秘诀

如何提升网站加载速度

网站响应时长指的是系统对请求作出回应的时间，简单来说，就是我们输入网址到浏览器回车，直至浏览器将网站内容展示给用户这段时间。理想的网站响应时长应尽可能短，因为页面加载越快，用户访问站点或服务器的效率也就越高。通常，我们网站的响应时长维持在100-1000毫秒之间，网页加载越快，用户体验越好。

如何减少网页响应时长？

用户请求网站数据时，实际上发送了一个HTTP请求，宏观上可分为两个阶段：请求在到达目标网站服务器之前、请求在到达目标网站服务器之后。

缩短网站响应时长的本质是提升数据返回速度，即加速请求数据过程中的各个环节，以下是一些可行的策略：

1、客户端

客户端是发起网站请求的起点，通过采取一定策略可以显著缩短部分数据的获取时间。其中最常用的策略是缓存，将常用且变动不大的资源缓存在客户端，不仅能缩短获取资源的时间，还能在很大程度上减轻服务端的压力。

2、DNS

大多数网站的访问方式采用域名，这就涉及到DNS解析速度的问题。如果DNS服务解析速度较慢，整体过程的响应时间也会延长。当客户端发送DNS请求时，首先本地的DNS服务器会接收请求，会在本地先查询缓存中是否有当前域名和IP的映射关系，如果有则直接返回IP信息，如果没有，则会询问其他DNS服务器。

3、网络

客户端获取到网站IP后，通过网卡发送HTTP请求，目标地址为相应的网站服务器。在这个过程中，如果客户端和服务器端任一方带宽较小，就会增加响应时间。此过程的响应时间取决于多种因素，如路由器的路由策略是否最优、整个过程中通过的网关数据量等。

4、网站

当请求到达网站服务器，服务器开始处理请求，最终通过查询数据库返回数据。现在，许多场景采用NoSQL代替关系型数据库以缩短响应时间。在正常情况下，由于关系型数据库在特定场景下的读写速度比NoSQL慢，因此在系统设计初期，可以考虑采用关系型数据库和NoSQL混用的方案。

如何提升网站页面速度

网页加载速度的一半来自于代码的加载，包括各种文件和一些因素。因此，我们可以从以下因素入手：

1、合并Js文件和CSS

将JS代码和CSS样式分别合并到一个共享文件中，这样不仅能简化代码，而且在执行JS文件时，如果JS文件较多，就需要进行多次“Get”请求，延长加载速度。将JS文件合并在一起后，自然就减少了Get请求次数，提高了加载速度。

2、Sprites图片技术

Spriting是一种网页图片应用处理方式，它将一个页面涉及到的所有零星图片都包含到一张大图中去，然后利用CSS技术展现出来。这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示了，可以减少整个网页的图片大小，并且利用CSS Sprites能很好地减少网页的HTTP请求，从而大大提高页面的性能。CSS Sprites在国内被称为css精灵，很早就有了，在很多大型网站都有应用，特别是一些所有页面都存在的图标用得比较多，很好地提升了加载速度。

3、压缩文本和图片

压缩技术如gzip可以有效减少页面加载时间。包括HTML、XML、JSON（JavaScript对象符号）、JavaScript和CSS等，压缩率可以在大小70%左右。文本压缩应用较多，一般直接在空间开启即可，而图片的压缩则较为随意，很多都是直接上传，其实还有很大的压缩空间。

4、延迟显示可见区域外的内容

为了确保用户可以更快地看到可见区域的网页，可以延迟加载或展示可见区域外的内容。为了避免页面变形，可以使用占位符标签指定正确的高度和宽度。例如，WP的jQuery Image LazyLoad插件可以在用户停留在第一屏时，不加载任何第一屏以下的图片信息，只有当用户将鼠标向下滚动时，这些图片才开始加载。这样明显提升了可见区域的加载速度，提高了用户体验。

5、确保功能图片优先加载

网站主要考虑可用性的重要性，一个功能按钮需要提前加载出来。用户进入下载页，一个只需8秒的下载过程，如果前5秒在等待、寻找下载按钮图片，谁能忍受？

6、重新布置Call-to-Action按钮

其实这条和上面一条差不多，都是从用户体验速度的角度出发，跳过了网页的整体加载速度。速度没有变化，只是让一些行为按钮提前。Call-to-Action按钮通常习惯设计在页面底部，但这种习惯对于用户来说并不总是好的。购买用户需要等到最下面才能点击下一步操作。可以调整CTA按钮的位置或使用滑动的图片按钮。许多大型购物网站的加入购物车就是这种类型。

7、图片格式优化

不恰当的图像格式是导致加载速度减慢的常见原因。正确的图片格式可以让图片缩小数倍，如果保存为最佳格式，可以节省大量带宽，减少处理时间，大大加快页面加载速度，这是一种常见的做法。

8、使用Progressive JPEGs

Progressive JPEGs图片是JPEG格式的一个特殊变种，称为“高级JPEG”。在创建高级JPEG文件时，数据是这样安排的：在装入图像时，开始只显示一个模糊的图像，随着数据的装入，图像逐步变得清晰。它相当于交织的GIF格式的图片。高级JPEG主要是考虑到使用调制解调器的慢速网络而设计的，快速网络的使用者通常不会体会到它和正常JPEG格式图片的区别。对于网速较慢的用户，这无疑有很好的体验。

渐进式JPEG图片是JPEG格式的一种特殊版型，称为“升级版JPEG”。在生成升级版JPEG文件时，数据的组织方式如下：在图像加载过程中，起初仅展示一个模糊的画面，随着数据的逐步加载，图像质量逐渐提升。这类似于交错式的GIF图片格式。升级版JPEG主要针对使用调制解调器的低速网络进行设计，对于高速网络用户，通常难以察觉其与普通JPEG格式图片的差异。对于网络速度较慢的用户来说，无疑提供了更佳的体验。

9、精简脚本

这可以说是最直接的方法之一，也是被广泛采用的，对网页脚本进行减肥，移除不必要的冗余代码，例如多余的空格、换行符、注释等，同时包括JS脚本中的无用代码也应予以清除。其中，对于注释代码的清理可能存在误解，甚至有人在其中堆砌关键词。

10、推迟加载和执行非必需脚本

网页中存在许多脚本在页面完全加载之前并不需要执行，可以推迟加载和执行这些非必需脚本。这些脚本可以在onload事件触发后执行，以避免对网页关键内容的展示造成干扰。这些脚本可能属于自身网页的元素，但更多是第三方脚本，如评论、广告、智能推荐、百度云图、分享等，这些都可以在主体内容加载完毕后再执行。

11、应用AJAX

AJAX即“Asynchronous Javascript+XML”，是一种用于创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，AJAX使得网页能够实现异步更新。这意味着可以在不重新加载整个网页的情况下，更新网页的特定部分。传统的网页（不使用AJAX）若需更新内容，必须重新加载整个网页界面。

12、自动化的页面性能优化

自动化的页面性能优化即是借助工具来实现，网站加速工具众多，这里Radware推荐自家的RadwareFastView，也算是为自家产品做了一次宣传，这里就不再赘述。