当你访问一个网站时,你首先注意到的是页面加载速度,但只有当网站太慢时你才会注意到它。页面速度是用户体验的重要组成部分,所以毫无疑问,它已经正式成为移动搜索的一个排名因素,并且一直是桌面搜索的一个因素。
大量关于页面加载速度和跳出率之间关系的研究得出了一些相当惊人的结论:每一毫秒都很重要。通过我们的新网站性能研究,我们想在令人生畏的统计数据中添加一线希望,并证明您的网站性能有很大的改进空间。
我们的研究将帮助您在处理网站性能优化时构建您的工作流程。特别是,我们将向您展示最突出的错误是什么,以及哪些错误需要额外注意,以便您可以优先考虑修复它们的过程。
方法
在这项研究中,我们随机分析了15万个网站(包括桌面版和移动版)来评估它们的性能。为了收集数据,我们使用了SEMrush网站审计的新性能报告,它提供了影响网站性能的九个最常见问题的方便统计数据。
令人惊讶的结果
令我们惊讶的是,这是我们第一次看到82%的被分析网站存在严重影响其性能的问题。这使得与性能相关的问题成为网站上最常见的问题。
此外,44%的被分析网站至少有一个关键问题(根据我们的网站审计问题严重程度分类)。
积极的一面是,我们发现大多数遇到性能问题的网站可以使用直接的页面优化技术和简单的服务器配置来改善它们。
现在,我们将仔细研究我们发现的问题,并提出一些久经考验的方法来消除它们。
我们希望这些数据能够帮助您确定工作的优先级,并估计您网站上可能出现的问题的数量和严重程度。
现在让我们看看解决这些问题的过程。
为了简单起见,我们将把我们的建议分为三组:
清理重定向
缩小页面大小
提高服务器性能
清理重定向
让我们从一个简单的开始。重定向链和循环是导致网站性能问题的典型问题。如果你不想测试用户对重定向链和循环的耐心,尽量避免在你的网站上使用它们。
此外,重定向链会混淆机器人;他们的爬行预算是有限的,并且每次重定向您的页面都会失去其原始排名的一点点。如果你想了解更多,下面是Matt Cutts关于重定向的一个很好的视频。
如果一个页面包含3个或更多的url或一个循环,它被我们的网站审计标记为有问题。幸运的是,根据我们的研究,只有7%的分析网站有这个问题。
然而,从一个页面重定向到另一个页面通常是必要的,当重新命名或重命名一个网站,将它迁移到HTTPS,减少重复的页面(例如,“www”和“非www”版本),以及在许多其他情况下。
你的网站越大、越老,就越难保持网站结构的整洁。重定向往往会堆积起来,形成链条;链接越多,到达目标页面所需的时间就越长。这就是为什么在执行“必要的”重定向时需要格外小心的原因。
缩小页面大小
页面越重,包含的资源越多,加载时间就越长。确保页面大小以及JS和CSS文件的总大小(传输大小)不超过2MB是很重要的。
在我们的站点审计中,任何超过2MB的内容都被认为很重,并且会导致错误出现。尽管2MB足以让一个页面“充分发挥其生命”,但1%的被分析网站仍然存在这个问题。如果你发现自己属于那1%的人,我们建议你控制你的页面,把它的大小至少保持在2MB以下。
图片和视频
图片和视频构成了页面权重的最大部分,所以这应该是你的出发点。更改视觉内容的格式、分辨率或质量可以显著缩小页面。首先问问自己这些视觉效果是否有真正的价值,记住有时候少即是多。
JavaScript和CSS
我们的研究显示68%的网站使用未简化的JavaScript和CSS文件。通过最小化JavaScript和CSS文件(从源代码中删除不必要的行、空白和注释),您将减少资源的大小,从而减少它们的加载时间,提供更好的用户体验并提高搜索引擎排名。
JavaScript代码缩小工具和方法
JavaScript代码缩减可以使用两种流行的工具来完成——JSMin和YUI Compressor。YUI压缩器还可以缩小CSS。闭包编译器是另一个方便的工具,它可以解析你的JavaScript,分析它,删除死代码,重写并最小化剩下的代码。混淆是另一种减小大小的方法,比最小化更有效,尽管由于混淆步骤本身而产生bug的风险更大一些。
除了缩小脚本和样式之外,不要忘记使用gzip或deflate等模式压缩HTML、CSS和Javascript。这将使它们的大小减少一半甚至更多。
根据State of JavaScript和Page Weight报告(这两份报告提供了移动端和桌面端使用JavaScript和CSS的统计数据),平均一个网页包含25个资源请求(分别是20个JS请求和5个CSS请求)。
我们的网站审计工具将标记一个页面包含“太多的JavaScript和CSS文件”只有当它有超过100个资源,这是相当多的。尽管如此,1%的被分析网站被证明有太多的JavaScript和CSS文件!确保不要让JavaScript和CSS文件使页面过载。一般来说,您收到的请求越少越好,所以将这个数字保持在100以下,这样比较安全。此外,考虑将多个CSS和JS文件合并到单个文件中,以加快加载过程。
你可以在以下资源中找到很多关于精简网站的有用信息:
为什么性能很重要b谷歌的Web基础
通过b谷歌的Web基础优化内容效率
雅虎网站提速的最佳实践
Mozilla编写快速加载HTML页面的技巧
优化JavaScript和提高网站加载和渲染速度的11个技巧
提高服务器性能
页面加载速度慢的原因之一显然是HTML页面大小太大。然而,正如我们在前一章中所指出的,只有1%的被分析的网站最终具有较大的HTML页面大小。那么,另外42%的页面加载速度慢的问题来自哪里呢?这通常是由于服务器问题。
如果web服务器缺乏效率,您试图访问的网页也会加载缓慢。您需要审查您的托管服务和提供的软件包;如果还不够,请更换提供商或考虑购买专用服务器。在这里了解更多有助于快速托管包的因素。
手机网站也是如此。事实上,对于移动网站来说,页面速度因素甚至更为关键,因为它们经常被那些在旅途中使用。这个来自Think with谷歌的计算器将帮助你估计提高网站速度如何影响你的收入。
还有其他因素可能会降低服务器的响应速度,例如应用程序逻辑慢、数据库查询慢、路由慢、框架、库、资源CPU不足或内存不足。使用谷歌开发人员关于如何处理这些问题和改进服务器响应时间的建议。
正如我们的研究表明,25%的被分析网站有未缓存的Javascript和CSS文件。如果响应头中没有指定浏览器缓存,则会触发此问题。简单地说,不启用浏览器缓存将使用户每次访问您的页面时下载相同的文件。
启用JavaScript和CSS文件的浏览器缓存允许浏览器存储和重用页面的资源,而不必在请求页面时再次下载它们。这样,浏览器将下载更少的数据,这将减少您的页面加载时间。
总的来说,这个简单的修复可以使多达四分之一的网站表现得更好。
开始修复
有许多因素会影响最终的页面速度,手动处理所有这些因素是一件难以忍受的苦差事,但是您总是可以求助于专门的工具。
b谷歌的《PageSpeed Insights》是一个很好的开始;它是免费的,功能齐全,并为您的站点的移动和桌面版本提供报告。一个额外的好处是,它关注的是b谷歌本身认为重要的问题。
谷歌使用Chrome用户体验页面的数据来评估它在加载速度方面是快速,慢速还是平均。不幸的是,这意味着您只能从Chrome用户获得足够流量的网站上获取信息进行分析,而较小的网站可能会得到不可用的结果。
对于慢速和平均结果,您将获得优化建议,这是加速页面的最佳实践列表。这份清单绝对值得一看,尽管我们应该对它持保留态度;追求完美的分数可能会浪费你的时间,并创造糟糕的用户体验。
对于一个彻底和灵活的网站分析,也远远超出了性能问题,我们建议使用SEMrush网站审计工具:
SEMrush网站审计性能报告将为您提供统计图表,让您对网站的技术问题有一个整体的感觉;它的工具提示将解释每个问题是什么,以及如何解决它。
问题列表按严重程度分为错误、警告和通知;这将帮助你首先找出最严重的错误。
性能报告还允许您连接您的谷歌Analytics帐户,以获得更多的用户体验信息(谷歌Analytics平均页面交互时间):
正如你所看到的,通过调整和配置,加速你的网站是相当简单的。测试网站的特定部分,使用专题报告,并遵循我们的建议,以节省资源,并以最少的努力获得最佳结果。此外,你可以随时通过在报告的顶部监视你的绩效分数来跟踪你的进展。
请在下面的评论部分分享您提高网站速度的最佳实践。此外,请随意分享可以帮助其他网站所有者修复其网站性能问题的链接-让我们收集一个有用的库。