听着,没有一件事能保证解决一个特定的问题。你必须从更广泛的角度来优化你的网站。大量的小修补弥补了大的结果。所以,虽然我将给你五件你可以在这里工作的事情,这是不确定的。甚至谷歌也说,分数是由许多因素共同作用产生的,所以如果你这样做,就很难确定,分数会上升。
谷歌所能给你的,是洞察是什么减慢了速度或者是什么损害了用户体验。许多工具还提供如何修复问题的建议。例如,Web.dev/measure并不提供深入的结果,但它确实让您了解某个特定修复的影响。
谷歌的Web.dev/measure工具可以让您了解修复程序的影响
谷歌即将进行的页面体验更新
我们已经发表了几篇关于谷歌页面体验更新的文章——将在2021年的某个时候发布——所以如果你需要更多的背景信息,可以从这里开始:
页面体验:一个新的谷歌排名因素
了解核心的网络核心:FID, CLS和LCP
在搜索控制台从核心Web Vitals报告获得更多的见解
如何分析你的网站与谷歌灯塔
您或您的开发人员可以做的五件事
多年来,人们一直在谈论网站速度和用户体验的重要性。但是,尽管有大量关于如何优化你的网站的材料,把这些知识付诸实践是困难的。这几个月来,谷歌再次将速度放在首位,以明年的页面体验更新即将发生。为了帮助您做好准备,它开发了一些工具,以提供见解和大量文档供您阅读。
对于很多问题,建议并没有太大的改变。这一切都归结为尽可能快地将主要内容提供给用户。运行测试以查看您的站点执行情况,尝试对修复程序进行优先级排序并开始工作!下面你会发现新旧方法的混合,提高你的网站,以改善你的核心网站。
优化你的图片
我将以一个老调重唱开始这个列表:优化图像。你可以为你的网站做的最重要的事情之一就是适当优化你的图片。是的,这句话我们说过无数次了,但我们还要再说一遍:去做吧。在你的主页或登陆页面上的一个大的未优化的图片可能会伤害你。对于任何给定的站点,大图片通常是最大的内容绘制(LCP)。确保你给你的访问者一个适当的欢迎,使加载迅速!
我们有一篇关于图像SEO的流行文章,描述了你可以做什么来快速加载图像。但简而言之,一定要按需要的大小上菜,并把它压缩好。有很多工具可以帮助你做到这一点。就我个人而言,我很喜欢使用squo .app得到的结果。不要认为你需要保持高分辨率的图像在最常见的屏幕上清晰。
还可以尝试采用现代格式,比如WebP。这些格式可以以较低的尺寸提供高质量的图像。WebP得到了很好的支持,甚至苹果也加入了进来!即将发布的Safari 14 (MacOS和iOS版本)将支持WebP。是的,新的支持Chromium的微软Edge浏览器也支持WebP。
你的CMS也是一个工具,可以帮助你改进图片的加载。预计8月发布的WordPress 5.5将支持延迟加载图片。这意味着它将只加载出现在屏幕上的图像,而将其余的图像留在用户与该屏幕交互时加载。这告诉浏览器只有在需要时才加载大图片。
另一个常青的网站速度建议是使用CDN,但你知道你也可以使用CDN专门为图像?一个图像CDN给你更多的控制如何你想要服务和如何你想要这些出现。由image CDN推送的图像在其URL中获得一串属性,告诉浏览器图像应该如何表现。
通过为图像等指定空间来稳定加载
新的度量标准之一是累积布局移位,或者简称为CLS。举个例子,当一个移动页面看起来已经准备好了,而当你想点击一个按钮时,内容就会转移,一个缓慢加载的广告就会出现在那个位置。这种情况经常发生,也是用户感到沮丧的主要原因之一。现在,虽然优化您的CLS不一定会使您的页面更快,但肯定会使它感觉更快。
CLS是由CSS中没有尺寸的图像引起的。它也可能是由无维的广告和嵌入或动态注入的内容引起的。当没有给出适当的尺寸,这些元素往往只是跳跃在加载过程中,使它显得颠簸和不稳定。这也可能是因为新内容被插入到现有内容的上面。不要这样做,除非用户进行了显式交互。