网站性能优化的12条建议

536 阅读12分钟

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

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

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

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

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

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

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

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

二、评估网站性能的方法

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

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

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

三、给网站提速的建议

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

1. 使用内容分发网络(CDN)

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

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

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

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

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

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

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

4. 减少插件的数量

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

5. 最大限度的减小JavaScriptCSS文件的大小和数量

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

6. 使用缓存

假如有很多用户同时访问一个页面,会使得服务器工作变慢,因为需要时间将网页分发给每个用户。如果网页的更新不平凡,每次的请求以及分发对于服务器来说,都会是一种冗余的负担。为此缓存技术应运而生,是一种网站宿主机器上暂存网页的一个版本,直到有新版本更新才重新发起请求的技术。而所采用的网站缓存方法取决于网站开发的平台。例如对WordPress,可以使用以下插件:W3 total cacheW3 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错误,可以使用一些错误检测工具和插件。正如之前提到的,额外的插件会对网站速度产生负面影响,所以建议使用外部工具来进行错误检测。例如:xenulinkwebmasters,如果是404可以考虑404-redirected

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

11. 减少重定向

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

12. 采用预处理技术

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

  • DNS预解析,这种做法需要提前将域解析为IP地址。
  • 链接预处理,如果能确定用户将单击特定链接导航到某个页面,就可以应用此类型的预处理。例如在添加一个或多个项目后移动到购物车页面。
  • 预渲染,这种方法意味着提前呈现整个页面或其中的某些元素。

虽然预处理技术是非常有效,但它需要深入的用户行为分析才能做出精确的假设。

四、总结

目前,一个典型用户期望网页的加载时间是少于3秒。如果你不满足这个期望的,那么意味着你的网站将会损失很多流量,最终都会体现在收入上。最后是一些总结全文后的建议:

  1. 检查和评估网站成功的关键因素,考虑转换、可见性和可用性。
  2. 测试当前的网站访问速度,并确定页面和功能的优先级,考虑是否要进行优化。
  3. 从最快的减速方面开始进行优化,并将重点放在价值最大的页面上。