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

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

一、网站速度优化的重要性
页面加载时间是网站性能的衡量指标之一&＃xff0c;它表示网站的一个页面从用户点击访问开始&＃xff0c;到呈现在用户屏幕上所花费的时间。

所以容易体会到&＃xff0c;网站更快的页面加载速度&＃xff0c;会带来三个方面影响&＃xff1a;

转化率。网站的转化率是衡量网站商业成功的一个重要指标&＃xff0c;通俗的讲就是说&＃xff0c;访问你网站的人&＃xff0c;有多少做了你想让他们更进一步做的事情&＃xff0c;而非只是单纯地打开、看几眼、然后关闭。例如&＃xff1a;对于购物网站就是&＃xff0c;有多少访问者购买了你想要兜售的商品&＃xff1b;对于内容专栏类网站就是&＃xff0c;有多少访问者在浏览后&＃xff0c;注册了会员&＃xff0c;订阅了专栏&＃xff0c;以及打赏、点赞、投硬币等等。所以说&＃xff0c;更快的页面加载&＃xff0c;将带来更高的转化率。根据Hubspot的研究&＃xff0c;页面加载时间每慢1s将会是转化率下降7个百分点。研究还给出了一份数据&＃xff0c;如果亚马逊网站的页面加载时间慢1s&＃xff0c;他们一年将损失16亿美金。

曝光度。页面的加载时间&＃xff0c;同时也会直接影响到用户能否更容易搜索到你的网站。这是因为搜索引擎会把网站的加载速度&＃xff0c;纳入网站排名的参考指标中&＃xff0c;低性能的网站意味着较差的用户体验&＃xff0c;搜索引擎出于保护用户时间的考虑&＃xff0c;就不会给予其更多的曝光度。

可用性。网站可用性包括&＃xff1a;页面浏览速度&＃xff0c;加载时间以及对于用户请求的响应&＃xff0c;这些都将直接影响到用户的忠诚度。网站的体验越好&＃xff0c;你的用户就越忠诚。这可以当作构建更大用户群和强大品牌的一个努力方向。

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

如下有一些性能检测工具可以尝试一下&＃xff1a;

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

三、给网站提速的建议
一旦你完成了网站性能的测评&＃xff0c;就可以开始着手优化它了。优化网站性能有许多不同的方案&＃xff0c;如下列出了一些最有效的以供参考&＃xff1a;

1. 使用内容分发网络&＃xff08;CDN&＃xff09;

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

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

当考虑这个问题时&＃xff0c;有三种可选类型的主机&＃xff1a;

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

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

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

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

4. 减少插件的数量

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

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

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

6. 使用缓存

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

7. 实施`Gzip`压缩

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

8. CMS中进行数据库优化

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

9. 减少使用网络字体

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

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

10. 检测`404`错误

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

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

11. 减少重定向

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

12. 采用预处理技术

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