WordPress 在他们的开发者部分发表了一篇文章,提议改进 WordPress 的默认延迟加载行为。 测试显示,提议的更改将 Core Web Vitals 的性能指标平均提高了 7% 至高达 33%。
改进 WordPress 中的核心 Web Vitals 的建议
该提案指出,延迟加载属性的细粒度控制属于主题开发人员的手中。
也就是说,我们发现,通过改进默认添加延迟加载的方式,可以显着改进被称为最大内容绘制的 Core Web Vitals 指标。
提案是这样描述改进的:
“不是默认延迟加载所有图像和 iframe,而是不应该延迟加载第一个内容图像(也考虑特色图像)或内容 iframe。
这是一个比当前实现使用的默认值更敏感的默认值,平均而言,它在规模上将带来更好的开箱即用的 LCP 性能,同时保持必要的低带宽。”
延迟加载和最大内容绘制
延迟加载是一种通过延迟下载当前不需要的图像和 iframe 等网页元素来加速页面感知下载的方法。
使用延迟加载,可以通过使用称为加载属性的 HTML 属性来延迟在站点访问者的浏览器屏幕中不可见的图像等元素。
图像是网页 HTML 元素。
HTML 属性是修改 HTML 元素(如图像)的代码。
在这种情况下,加载属性通过告诉浏览器延迟下载来修改图像。
加载属性告诉浏览器延迟下载图像,使浏览器可以下载更重要的页面元素,网站访问者可以立即查看这些元素。
这使网站访问者的页面交互速度更快。
最大内容绘制 (LCP) 衡量图像和其他元素在站点访问者视口(访问者看到的浏览器屏幕)中的下载速度。
图像通常用 HTML 编码,如下所示:
<img src=" alt="example text">
添加延迟加载是添加延迟加载 HTML 属性的简单问题:
<img src=" alt="example text" loading="lazy">
WordPress 5.9 如何改进最大的内容绘画
发布改进 LCP 提案的开发人员指出,从 WordPress 5.5 开始,核心代码默认为所有图像和 iframe 添加了延迟加载属性。
但这并不理想,因为页面顶部的图像(如徽标和特色图像)需要下载才能使网页可用。
WordPress 实现了这样的延迟加载,因为它无法准确地将最重要的图像排除在接收延迟加载属性之外。
原因是因为所有主题的编码都不同,因此这种细粒度的排除最好由主题开发人员完成。
虽然当前 WordPress 的默认延迟加载实现并不理想,但以这种方式添加延迟加载明显优于根本不添加加载属性。
正如下面列出的测试结果所示,所提出的建议代表了明显的改进。
有关的: Advanced Core Web Vitals:技术 SEO 指南
WordPress 将如何改进最大的内容绘画
WordPress 开发团队的提议是排除将延迟加载属性添加到代码中的第一个图像或 iframe。
开发人员在前 50 个最流行的 WordPress 主题上测试了这种方法,发现将其添加到第一个图像或 iframe 元素可以使 LCP Core Web Vitals 得分平均提高 7%。
开发人员接下来测试了通过向两个元素添加延迟加载来改进 LCP 的效果。 性能提升平均下降了 2%,这表明从多个元素中排除延迟加载并没有更好地改善 LCP。
这些是一些发现:
“从延迟加载中省略第一个内容图像导致 LCP 中值提高了 7%(1,877 毫秒,而当前核心行为为 2,020 毫秒),图像字节中值增加 0%(368KB 与当前核心行为的 369KB 相比) )。 → 省略第一个内容图像显然会导致 LCP 改进,而保存的图像字节数没有明显倒退。
从延迟加载中省略前两个内容图像导致 LCP 中位数提高 5%(1,927 毫秒,而当前核心行为为 2,020 毫秒),图像字节中位数增加 2%(378KB 与当前核心行为的 369KB 相比)。 → 省略前两个内容图像对两个指标产生的结果比只省略第一个更差,即最好只跳过第一个内容图像的延迟加载,因此不需要对大量图像进行额外测试而不是延迟-需要加载。”
新的 WordPress 延迟加载测试结果
- 测试组中 5% 的主题的 LCP 分数差 10% 到高达 21%。
- 42% 的主题将 LCP 分数从 10% 提高到 33%。
- 测试表明,大多数测试主题的好处都更好。
根据 WordPress 的提议:
“虽然所有主题的 LCP 改进中位数仅为 7%,但大量主题的显着胜利更大,而显着损失则微乎其微。”
有关的: 18 个 WordPress 插件将加速您的网站
谷歌人制作了一个概念证明插件
一个 WordPress 核心提交者创建了一个 插件形式的概念证明 (POC) 补丁,大概是出于调试目的,并将其发布在 GitHub 上。
它不是官方的 WordPress 插件版本,所以它是 不是 建议赶紧出去安装。
官方插件版本发布在 WordPress 插件存储库中。
精致的延迟加载何时到来?
目前为 WordPress 5.9 设置了改进的延迟加载行为的时间表。
WordPress 5.9 目前定于 2021 年 12 月发布。
改进延迟加载功能的提案目前正在讨论中,到目前为止在评论中得到了积极的回应。
因此,除非出现当前无法预料的问题,否则今年晚些时候 WordPress 网站很有可能会出现改进的最大内容绘制分数。
引文
○官方 WordPress 提案公告
完善 WordPress Core 的延迟加载实现
用于延迟加载改进的 WordPress GitHub 页面
在第一个内容图像/iframe 上省略延迟加载属性
if( sopp != 'yes' && addtl_consent != '1~' ){
!function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window,document,'script', '
if( typeof sopp !== "undefined" && sopp === 'yes' ){ fbq('dataProcessingOptions', ['LDU'], 1, 1000); }else{ fbq('dataProcessingOptions', []); }
fbq('init', '1321385257908563');
fbq('track', 'PageView');
fbq('trackSingle', '1321385257908563', 'ViewContent', { content_name: 'wordpress-core-web-vitals-boost', content_category: 'news wp' }); }