网站性能优化的12条建议-CSDN博客

有一点你可能未曾重视：一个网站给用户留下的第一印象，不是网站的业务内容如何，而是网站打开速度的快慢。即使网站有着精彩而丰富的内容，迟缓的浏览体验，也会磨灭用户的关注，如果这是你的网站，那它被竞品替代也只是时间早晚的事。

作为一个每天都需要在网上获取各种信息和服务的人来说，我对于提供信息相差不多的网站来说，更愿意在高性能体验的站点上，保留更多的耐心，因为这是对自己时间和注意力的珍惜。显而易见换个角度，高性能网站会获得更多的价值转化率，订单，更高的搜索引擎排名等等的可见的与不可见的收益。相比缓慢如拖拉机的网站，就可能是在烧钱的同时，还败坏了自己的名声。这篇文章我们将提供给你一些方法，来改善网站性能与页面加载速度。

一、网站速度优化的重要性

页面加载时间是网站性能的衡量指标之一，它表示网站的一个页面从用户点击访问开始，到呈现在用户屏幕上所花费的时间。

所以容易体会到，网站更快的页面加载速度，会带来三个方面影响：

转化率。网站的转化率是衡量网站商业成功的一个重要指标，通俗的讲就是说，访问你网站的人，有多少做了你想让他们更进一步做的事情，而非只是单纯地打开、看几眼、然后关闭。例如：对于购物网站就是，有多少访问者购买了你想要兜售的商品；对于内容专栏类网站就是，有多少访问者在浏览后，注册了会员，订阅了专栏，以及打赏、点赞、投硬币等等。所以说，更快的页面加载，将带来更高的转化率。根据Hubspot的研究，页面加载时间每慢1s将会是转化率下降7个百分点。研究还给出了一份数据，如果亚马逊网站的页面加载时间慢1s，他们一年将损失16亿美金。
曝光度。页面的加载时间，同时也会直接影响到用户能否更容易搜索到你的网站。这是因为搜索引擎会把网站的加载速度，纳入网站排名的参考指标中，低性能的网站意味着较差的用户体验，搜索引擎出于保护用户时间的考虑，就不会给予其更多的曝光度。
可用性。网站可用性包括：页面浏览速度，加载时间以及对于用户请求的响应，这些都将直接影响到用户的忠诚度。网站的体验越好，你的用户就越忠诚。这可以当作构建更大用户群和强大品牌的一个努力方向。

二、评估网站性能的方法

在优化网站性能之前，你首先应当搞清楚当前网站的加载时间是多少，什么原因拉低了速度等问题，然后设定网站性能合理的目标，因为凡行动必有代价，工程问题还是得追求一个性价比。

如下有一些性能检测工具可以尝试一下：

pingdom：这是一款包含了许多特性的网站速度检测工具，它可以追踪网站性能表现的历史数据，采用数据驱动的方式为你推荐优化方案，而且还可以生成简单易懂的报告。它除了站点还有Android和iOS版的App，可以免费使用，同时也提供了专业付费的监控计划。
YSlow：同样提供了优化页面性能的方案，统计图表以及相关可用的组件。
Performance Budget Calculator：这是一个免费的工具，可用来找出优化什么类型的内容，能让网站保持最佳的运行状态。
Google Pagespeed Insights：也是一个免费的工具，国内玩家可能需要些科学上网的办法来使用，或者去搜索一下应该不难获得。

三、给网站提速的建议

一旦你完成了网站性能的测评，就可以开始着手优化它了。优化网站性能有许多不同的方案，如下列出了一些最有效的以供参考：

1. 使用内容分发网络（CDN）

内容分发网络是分布在各个地理位置的web服务器组，目的是向终端用户提供更靠近其位置的web内容。当你把网站仅部署在一个单独的服务器上时，所有用户对网站的请求，就都需要到达该服务器。由于服务器同时能处理的最大请求数一定，所以当请求数很大时，平均到每个请求上的处理时间就会延长。而采用CDN，则会将用户的请求重定向到用户就近的服务器上，这就使得内容分发更快捷，网站访问体验更流畅。当然这种方法会增加相应的成本，凡行动必有代价。

2. 将你的网站移动到更好的主机上

当考虑这个问题时，有三种可选类型的主机：

共享主机：全世界最流行的方式当属这种方式，这是在短时间内以较低的费用让你的网站在线的最便捷的方式。这种方式会和其他部署在同一服务器主机上的站点，共用CPU、存储空间及RAM，这就是它没有另外两种主机部署方案快的原因了。
虚拟专用服务器（VPS）：使用多个服务器进行内容分发，虽然会和其他用户共享物理服务器，但你对虚拟出来的服务器配置，不会影响到同一物理服务器上的其他用户。所以如果你的网站访问流量有忙闲时，那么VPS对你会是最好的解决方案。
专用服务器：这种方式的成本最贵，因为会独占物理服务器，同时你可能还需要聘用系统管理员来对其进行维护。

当然你也可以通过云计算服务商（阿里云、腾讯云等等）去租用专用服务器，其实现在的费用也不是特别贵了。

3. 优化网站上的图片大小

是个人都喜欢吸引眼球的图片，特别是对于成功的电商网站来说，图片更是不可或缺的一部分，因为这些照片、图形可以提高用户的参与度，增加他们对网站所兜售产品的想象力，但是图片使用的弊端也显而易见，越清晰图片文件就越大，越容易拉低网站速度。于是在不影响体验的情况下，通过工具（ImageOptim、kraken、jpegmini）来缩小图片尺寸就成了可想到最佳的方案，虽然可能需要麻烦了点，但是值得。另一种减小图片大小的方式，是使用HTML的响应式图片标签<secret>和<size>，根据显示设备的属性来采取合适的图片尺寸大小。

4. 减少插件的数量

网站通过插件的形式，提供了一些第三方的功能。虽然插件使用的越多，会使网站的功能看起来越丰富，但运行他们也需要越多的资源，可想而知这会拉低网站的性能，以及带来可能的安全问题。而随着时间的推移，插件的数量不断增加，而其中一些可能不再使用。所以建议定期检查所有已安装的插件并删除不必要的插件。首先，在你的页面上运行性能测试，找出哪些插件会减慢你的网站速度。网站速度不仅取决于安装插件的数量，还取决于插件的质量。尽量避免加载大量脚本和样式，以及包含大量数据库查询的插件。最好的解决方案是只保留必要的，并确保它们是最新的。

5. 最大限度的减小`JavaScript`和`CSS`文件的大小和数量

如果网站包含大量的javascript和css文件，当网站访问者想要访问特定的文件时，则会导致大量的HTTP请求。这些请求将由访问者的浏览器单独处理，并减慢网站的工作速度。所以减少javascript和css文件的数量，无疑会提高网站体验。分别将所有的javascript和css文件打包成一个，有许多的压缩打包工具可供选择：除了工程化的工具webpack，gulp外，如果站点不是很大，在线工具也可以把玩一下：minifier，willpeavy

6. 使用缓存

假如有很多用户同时访问一个页面，会使得服务器工作变慢，因为需要时间将网页分发给每个用户。如果网页的更新不平凡，每次的请求以及分发对于服务器来说，都会是一种冗余的负担。为此缓存技术应运而生，是一种网站宿主机器上暂存网页的一个版本，直到有新版本更新才重新发起请求的技术。而所采用的网站缓存方法取决于网站开发的平台。例如对WordPress，可以使用以下插件：W3 total cache或W3 super cache。如果使用VPS或专用服务器，可以在常规设置下设置缓存。对于共享服务器，网站缓存通常不可用。

7. 实施`Gzip`压缩

Gzip压缩是一种高效减少文件尺寸的方法，它最小化了HTTP请求并缩短了服务器响应时间。gzip在文件被发送到浏览器之前对其进行压缩，并在用户的浏览器端，将文件解压缩后显示出来。此方法几乎适用于网站上的所有文件，可以通过添加一些代码行或通过名为gzip的应用程序在来启用启用gzip。

8. CMS中进行数据库优化

数据库优化是一种提高性能的有效方法，如果您使用的内容管理系统（CMS）中包含复杂的插件，那么数据库的大小会增加，同时会影响网站的速度。举个例子，WordPress需要存储评论、博客帖子和其他一些占用大量存储空间的信息。因此每个CMS都有自己的优化措施，以及许多特定的插件，WordPress可以考虑了解一下wp-optimize。

9. 减少使用网络字体

web字体在网站设计中已经非常流行，但不幸的是，Web字体的使用对页面渲染速度会产生负面影响。Web字体会增加向外部资源额外的HTTP请求，以下措施能够帮助减少Web字体的流量大小：

在浏览器中使用现代字体格式woff2；
仅包括网站上使用的字符集；
仅选择所需要的字体样式；

10. 检测`404`错误

404错误意味着“页面找不到”，为了检测和纠正404错误，可以使用一些错误检测工具和插件。正如之前提到的，额外的插件会对网站速度产生负面影响，所以建议使用外部工具来进行错误检测。例如：xenulink，webmasters，如果是404可以考虑404-redirected

如果这些死掉的链接不再带来任何访问，因而也不会消耗任何服务器资源，那么您可以将它们保持原样。如果这些页面仍有一些流量，请考虑为外部链接设置重定向，并为内部链接修复链接地址。

11. 减少重定向

网站重定向会创建额外的HTTP请求，这会对性能产生负面影响，所以建议将其保持在最低限度或完全消除。首先，可以通过运行站点扫描工具（Screaming Frog）来识别页面上的所有重定向。然后你必须检查它们是否有必要的用途，只留下关键的用途。

12. 采用预处理技术

预处理指的是用户在正式请求之前，就读取或执行相关指令的技术。这项技术其实相当普遍。如果您可以预测用户操作，例如提前加载一些内容或链接，那么这么做的效果就会非常好。通常现代浏览器默认允许预取，因为它们会假定用户的行为模式，但用户体验专家和工程师更容易理解用户行为，并为浏览器的预处理提供“提示”。常见的预处理类型有如下三种：