--- title: 网站加载时间太长？5招教您给网页减负 date: 2015-08-26T16:00:00Z modified: 2024-06-18T09:53:18Z permalink: "https://www.tmogroup.com.cn/insights/other-26129/" type: post status: publish excerpt: "" wpid: 100707 categories: - 其他资讯 - 电商开发 featured_image: "https://www.tmogroup.com.cn/wp-content/uploads/2024/06/website-speed.jpg" timestamp: 2024-06-18T09:53:18Z tags: - 其他资讯 - 电商开发 --- 当谈到[网页设计](https://www.tmogroup.com.cn/deve/21271/)的时候，网页的大小是一个值得商榷的事情。通常来说，网页内容越少，加载的速度越快。根据我们之前的文章提到的[网站用户体验最差的15种类型](https://www.tmogroup.com.cn/deve/11387/)中提出，如果网站没有在三秒内加载完毕，大部分的人会选择跳出。此外，随后每增加一秒的加载时间，跳出率将会增加5.8%。 在众多搜索引擎优化指南中，减少网站的加载时间是一项必修课。包括很多的站长工具都会给出网站的加载时间计算和优化建议。这也间接地指出其跟搜索引擎结果排名是有一定的联系。本文将会给出五点关于网页减负的建议，以缩短网站的加载时间。首先我们需要明确一下以下两点： ### 1. 什么是页面的大小？ 通常来说，页面的大小指的是整个网页的大小。它包含HTML文件，一些图片或表格，脚本和一些其他的媒体文件。 ### 2. 多大的页面算是大的？ 为了有一个页面大小的基准，我们引用了一个名叫Yottaa的软件公司的调查结果。Yottaa综合了25个不同网站的测试结果，包括3G或者4G的手机测试。记过表明他们的平均大小为2.43MB。而另一个调查机构Soasta给出的网页大小的均值在2MB以上，这表明其结果基本上符合目前的网页趋势。 需要注意的是，网页的大小也取决于其网站所处的行业或公司。如果是要[开发电子商务网站](https://www.tmogroup.com.cn/wp-content/uploads/wp-mfa-exports/page/home.md)，通常会放置大量的图片，这也会导致页面变得重。但通常情况下我们的目标都是使其加载时间在平均标准以下。 ### 5个给页面减负的方式 #### 1. 压缩图片 当提到网页大小的时候，其实图片基本上是最占据空间的。所以如果想要给页面减负，压缩图片应该首当其冲。 但是如果你想要提供高清的资源呢？我们的建议是放低质量的缩略图，然后给出高质量资源的下载链接，这也许是个两全齐美的方案。网上有许多免费的图片压缩工具可使用。其次也要注意图片的尺寸。缩小尺寸也会一定程度上减少图片文件的大小。 #### 2. 利用 CSS Sprites css sprites 也叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。为了更详细的说明，我们可以举一个例子。 如下图所示，页面A是在利用css sprites之前。图片需要有10个http请求，大小总共70.7kb。而页面B是经过处理之后，只需要一个http请求，并且所有图片大小之和比原来的一半还少。 ![css sprits 压缩](https://www.tmogroup.com.cn/wp-content/uploads/2015/08/css-sprits-压缩.png) #### 3. 去掉不必要的自定义字体 有时候我们运用一些不同的字体来区分网站上不同的业务等。然而这些自定义字体也是会变成页面的负担。因为一旦这些特殊的自定义字体没有在浏览者的操作系统内，那么浏览者就需要下载这个字体库的所有文件。例如Twitter包含了Gotham字体，其包括light, book 和medium三种格式。那么这个字体的总大小会达到154 kb，这也是影响加载速度的一部分。 #### 4. 压缩资源 你的网页资源还可以被压缩吗？其实，我们依然可以压缩一些例如评论，表格或者去除一些冗余的代码等。根据谷歌的提示，我们可以利用工具压缩HTML文件，CSS和Javascript。 #### 5. 利用内容分发网络（CDN） 所谓[内容分发网络](https://www.tmogroup.com.cn/hosting/)，其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。 需要注意的是，其本质上并不会减少页面文件的大小，但无论如何我们的目的是一样的，就是提高网站的访问速度。