改善网站页面速度的10种方法
开发人员长期以来一直惧怕三个小词:Google PageSpeed Insights。销售人员和管理人员喜欢输入URL进行测试,看到分数小于100,并询问可以采取哪些措施来提高分数。显然,开发人员需要修复其代码,对吗?答案不是那么简单。
什么是PageSpeed Insights?
PageSpeed Insights是用于衡量网站性能的行业标准测试工具。由Google创建的PageSpeed Insights(PSI)使用一种算法,该算法结合了网站的众多幕后因素,以总分对它们进行评分。该分数分为移动和桌面类别,以说明影响两种类型访问者的不同因素。
我为什么要关心自己的成绩?
网站页面速度测试以及与此相关的任何其他指标,以前只是开发人员所关心的。但是PageSpeed Insights成为非编码者以清晰的角度谈论网站的一种方式。他们可以比较站点,并测量随时间变化的情况。竞争对手的代理机构可能会得出测试结果,并声称您客户的新的昂贵网站制作不当。(扰流板警报:不一定是正确的。)
此外,Google倾向于“尝试”其页面速度算法中的项目,这些项目最终成为SEO排名中的关键决定因素。还记得“ mobile-geddon”吗?当Google宣布不提供适用于移动设备的版本的网站时,其排名将低于适用于移动设备的同行。这导致急于使网站在设备上更好地显示,以避免SEO产生后果。通过PageSpeed Insights测试,开发人员可以在Google的政策正式推出之前评估其移动性能。
核心网络生命
最新试用的元素统称为Core Web Vitals。该术语指的是三个元素:第一输入延迟(FID),最大内容绘画(LCP)和累积布局偏移(CLS)。这些项目中的每一个在PSI结果页面上都有一个蓝色标记。
- 首次输入延迟是指用户与您的网站进行互动之前的时间。如果脚本继续在后台加载,则用户可能无法立即单击某些内容。请注意,由于FID与实际用户有关,因此该指标在实验室数据中不可用。
- 最大的内容丰富的涂料是指将最大的项目加载到视口中(折痕以上)所花费的时间。这可能是背景视频或英雄图像。
- 累积版式移位是指对内容在显示后继续加载的内容意外“移位”的计算。想想一个带有您要单击的按钮的网站,在您单击按钮之前,横幅广告会在上方弹出,将按钮向下推。您很有可能会单击横幅广告而不是按钮。这显然是一种令人沮丧的经历,因此该指标是一种应对之道。
Google报告说,从2021年5月开始确定网页排名时,将考虑Core Web Vitals分数。现在,这是查看分数并为下一次算法更新做准备的最佳时间。
如何提高我的分数?
您的网站页面速度得分是否不如您期望的那样绿色和闪亮?别担心-有各种各样的技巧可以提高您的分数。
1.获得良好的托管服务提供商。
您是否被标记为减少初始服务器响应时间?并非所有托管都是平等的。共享服务器上便宜的托管计划不会像专用硬件那样快速响应。主机的价格差异很大,您可以轻松超支。花一些时间查看可用的软件包,然后选择一个足以支持您网站流量的选项。
2.确保支持并启用了GZIP 。
GZIP是一种压缩在服务器级别发生的数据的方法。它允许更快地加载诸如图像,样式表和脚本文件之类的常见资产。
3.压缩并延迟加载图像。
Web设计人员和客户通常希望上传他们拥有的最高质量的图像。不幸的是,这将完全破坏站点的加载速度。即使在Photoshop中压缩了资产,仍要通过TinyPNG或Smush之类的图像压缩工具将其发送。此外,请在折页下尽可能多地延迟加载尽可能多的图像。延迟加载将延迟图像的加载,直到用户将视口滚动到该图像所在的位置为止。减少页面加载时所需的元素将极大地影响速度。插件选项可用于延迟加载,但是您也可以通过在主题中使用延迟加载库来添加本机支持。
4.对自定义字体使用“交换”选项。
在加载自定义字体之前,如果看不见文本,PageSpeed Insights将标记您。您可以通过加载系统字体,然后在准备好资源后将其“交换”为所需的字体来避免这种“看不见的文字闪烁”(FOIT)。如果要加载Google字体,只需将&display = swap添加到Google字体URL。如果在样式表中使用@ font-face,则可以添加参数font-display:swap;。您还可以通过将字体预加载到标题中来更快地加载字体。即使在本地加载.woff2文件,也可以在标记中使用rel =“ preload”来更早地获取您的.woff2文件。
5.合并并最小化CSS和JS。
您的主题是否结合并最小化了样式表和脚本?伟大的!但这还不足以使速度测试令人安心。使用WP Optimize之类的插件可以进一步合并插件中的文件,并降低页面加载时的请求总数。
6.检查主题是否膨胀(未使用的代码)。
当一个站点在模板上具有多个布局时,很难仅加载该特定页面上使用的脚本和样式。但是您可以通过盘点实际使用的内容来改进一些“删除未使用的JavaScript / CSS”订单项。也许您有一个您认为需要但不需要的JS库。插件也是如此—真正地将活动插件缩减为仅您需要的那些插件。不要将插件用于您可以在主题中原生实现的功能。
7.客观地评估页面的长度。
如果您被标记为“避免DOM太大”,请问自己:“此页面上是否有太多内容?” 许多人认为尺寸过大意味着一页很长,这是一种情况。但是它也可以指代较深的页面或元素,例如嵌套的画廊,滑块,手风琴等。如果您知道在页面下需要大量部分,请尝试使它们的功能保持最小。如果您需要激烈的互动元素,请考虑将其放置在主要内容所在的页面上。网站编码后,很难减小DOM的大小,除非您可以将整个元素移动到其他页面。在项目的设计阶段,您确实应该记住此行项目。
8.维护您的重定向。
如果资源URL已过期并且必须遵循重定向到其新位置的操作,则将减慢加载所有页面元素的过程。最常见的避免多页重定向触发器是必须从http重定向到https。许多插件,甚至某些主机,都具有在页面加载之前强制执行https的选项,以便您可以完全绕过重定向。
9.盘点您的跟踪脚本。
您可以做其他所有事情,添加任何跟踪脚本(分析,标记管理器,转换像素等)后,您的网站页面速度得分可能会直线下降。发生这种情况是因为第三方脚本通常无法通过大多数PageSpeed Insights指标。它们不必要地从一个URL重定向到另一个URL。他们不会缩小或缓存其资源。它们立即加载到页面上,而不是根据需要加载。具有讽刺意味的是,Google自己的分析JS已在自己的测试中标记出来,但是您可能会影响存储在第三方CDN上的文件。您可以做的就是保持脚本状态,并删除过期广告系列的跟踪元素。同样,如果您正在运行A / B测试,请收集数据,然后删除测试脚本。在加载页面之前必须修改输出的任何操作都会降低您的网站速度。
10.缓存,缓存,缓存。
优化所有可以控制的内容后,找到适合您的缓存解决方案。通过缓存,网站可以构建和存储预构建的文件,而无需在每次访问时重新加载所有资产。一些托管服务提供商(例如WP Engine和SiteGround)在计划中提供了出色的服务器级缓存。还有其他选项,例如Cloudflare,如果您的主机不提供缓存选项。此外,您可以找到许多WordPress插件来缓存您的网站。但是,请注意,其中一些插件实际上可能会降低您的PageSpeed Insights得分,因为它们需要花费更多时间来为新访问者编译网站。访问者单击时会提高访问速度,但PageSpeed Insights机器人只会测试初始负载。
提高您的网站页面速度,以获得更好的用户体验
显然,没有任何一种千篇一律的解决方案可以加快PageSpeed Insights测试的速度。要获得几分,可能要花费很多很多小时。
关注于您可以控制的元素,并确保您提供的是有意义的内容。您的访客不太可能看您的分数。他们只是想觉得您的网站运行速度很快。您也应该有这种感觉。毕竟,页面速度只是一个数字。
Comments off