谷歌性能主管最新的有关LCP的文章
原文地址:philipwalton.com/articles/dy…
动态LCP优先级:根据历史调整
2022年12月28日
年初,chrome新增Priority Hints API,允许开发者在img、script和link等元素上设置fetchpriority="high"以保证优先加载。我个人非常认可这个api。我认为如果网站使用这个api,能最快速、最便捷的提高LCP。
不过也有小弊端,为了使用该api,就必须提前知道页面的LCP是哪个元素。
对于绝大多数内容都是静态内容的网站,LCP元素很容易知道。但是对于复杂网站,特别是有很多动态的、个性化甚至是UGC内容,可能就很难提前知道LCP元素是哪一个。
知道LCP元素最可靠的办法便是真实加载页面,然后查看通过LCP的api查看。但在这时,元素已经渲染到屏幕上了,再添加fetchpriority已经为时已晚。
真的如此吗?
尽管对于当前访问者,添加属性可能已经晚了,但是对于下一个访问者,是不一样的。难的是从上一个用户收集LCP数据,然后利用数据为未来做加载优化。尽管这听起来很复杂,但通过以下几个简单步骤,还是可以实现的:
在每个页面执行js脚本,检测LCP元素,发送到服务器
服务器存储LCP元素数据,便于将来参考
针对页面访问,检查页面是否有LCP元素,如有则对该元素添加fetchpriority属性。
尽管实现方法很多,我目前知道最好的是使用Cloudflare Workers, the Worker KV datastore和Worker HTMLRewriter API,目前都有免费的方法。
本文我将详细介绍。此外为了方便,我也把代码简化做了例子,但如果想看完整方案,可以参照github链接
Step 1: 识别LCP元素发送到服务器
为了根据访问数据动态设置LCP元素的优先级别,第一步应该是判断LCP元素,标识该元素后在随后的用户访问中匹配该元素。
使用web-vitals 识别LCP元素很容易,而且第3版本还包含一个 属性,能够暴漏所有LCP信息,下面便是一个例子。
// Import from the attribution build.import {onLCP} from'web-vitals/attribution';// Then register a callback to run after LCP.onLCP(({attribution}) => {// If the LCP element is an image, send a request to the `/lcp-data`// endpoint containing the page's URL path and LCP element selector.if (attribution.lcpEntry?.element?.tagName.toLowerCase() === 'img') {navigator.sendBeacon('/lcp-data',JSON.stringify({url: location.pathname,selector: attribution.element,}));}
});
复制代码
上面的代码例子中,attribution.element值是css选择器能够标识LCP元素。比如,在下面My Challenge to the Web Performance Community的页面中,通常将发送以下信息:
{"url": "/articles/my-challenge-to-the-web-performance-community/","selector": "#post>div.entry-content>figure>a>img"
}
复制代码
注意,通常会被发送,不是100%发送。因为根据屏幕尺寸,当前页面最大元素不一定总是该图片。比如,下图就展示了在传统PC和移动端不同视口下最常见的LCP元素。
如上图所示,PC端最大可见元素通常是图片,但在移动端通常就是第一段文本。
讲到这里需要强调一点,正如代码例子展示的,虽然同一个页面在不同用户可能LCP元素也可能是不同的,所以任何动态LCP方案都需要考虑这一点,我也会在文章后面讲解我是如何处理这个问题的。
Step 2: 存储 LCP 数据以便将来参考
第一步中的代码将当前页面的LCP数据发送到 /lcp-data端口,下一步是创建数据接收的处理方法并存储数据,以便将来访问使用。
因为我在网站上使用cloudflare worker,对我来说最好的方式是使用KV存储。KV 存储是key/value数据结构,可以同步到cloudflare的边缘节点上,也正是因为如此,所以读取也非常快,不过在更新数据时,不能立刻同步到所有边缘节点上,所以数据可能不是最新的。
在我这个案例中,数据不是最新完全不是问题,因为该功能主要在于提升性能,任何的请求延迟都可能达不到初衷,同时,因为Priority hints严格来讲是锦上添花,即便LCP并非实时也不影响。
为了使用cloudfalre kv 存储的边缘节点,首先需要创建存储然后设置binding,设置完成后,便能读写存储做简单的.get() 和 .put()操作了:
// Read from the store.const myValue = await store.get('my-key');// Write to the store.await store.put('my-key', 'Updated value...');
复制代码
在我的LCP存储上,我希望能根据用户请求的页面来查询LCP元素选择器,所以key是页面url,value是该url的LCP元素选择器。
需要记住的是,因为LCP元素在不同的屏幕设备上可能也不相同,就需要根据在lcp数据上加上设备类型。为了判断设备类型(mobile或pc),我根据 sec-ch-ua-mobile在请求时的header来判断 。尽管这一请求头只在chromium为基础的浏览器才兼容,要注意本身priority hints这个api也是如此,所以这个案例中已经足够用了。
参照上面内容,pc端的kv 键值对如下:
Key |
desktop:/articles/my-challenge-to-the-web-performance-community/ |
Value |
#post>div.entry-content>figure>a>img |
移动端的数据大概如下:
Key |
mobile:/articles/my-challenge-to-the-web-performance-community/ |
Value |
#post>div.entry-content>p |
以下是完整的存储LCP数据的worker代码:
exportdefault {asyncfetch(request, env) {if (url.endsWith('/lcp-data') && request.method === 'POST') {returnstorePriorityHints(request, env.PRIORITY_HINTS);}},
};asyncfunctionstorePriorityHints(request, store) {const {url, selector} = await request.json();// Determine if the visitor is on mobile or desktop via UA client hints.const device =request.headers.get('sec-ch-ua-mobile') === '?1' ? 'mobile' : 'desktop';// The key is the device joined with the URL path. If the LCP element// can vary by more than just the device, more granularity can be added.const key = `${device}:${url}`;// If the new selector is different from the old selector, update it.const storedSelector = await store.get(key);if (selector !== storedSelector) {await store.put(key, selector);}// Return a 200 once successful.returnnewResponse();
}
复制代码
下面解释一下上述代码为什么这么写:
export fetch函数处理逻辑,包括检查请求url的请求方式(post)同时满足接口路径(/lcp-data)
如果都满足,调用storePriorityHint方法根据PRIORITY_HINTS的kv数据存储。
storePriorityHint会提取url和选择器的值,同时根据请求头是sec-ch-ua-mobile确定设备类型
随后检查KV存储利用key查找LCP的元素选择器并用key将设备和url关联。
如果能找到选择器,或者已存储的选择器与当前json内容不同,就会更新选择器。
Step 3: 添加匹配fetchpriority数据到将来的请求上
每个页面和设备的LCP数据存储后,就能够在给未来访问中动态的给img元素添加fetchpriority属性。
我之前提到使用HTMLRewriter能实现,因为能便捷使用selector-based API 来重写HTML,轻松找到之前存储的正好符合选择器的img元素。
逻辑如下:
对于每个页面的请求,根据页面url、sec-ch-ua-mobile请求头来判定当前页面LCP数据的key,然后再KV存储中查找该数据。
同时,请求当前页面的HTML
如果当前页面/设备存储了LCP数据,则创建 HTMLRewriter实例,并找到匹配的元素选择器添加fetchpriority 属性。
如果未存储LCP数据,则按照正常返回页面
以下是代码:
exportdefault {asyncfetch(request, env) {// If the request is to the `/lcp-data` endpoint, add it to the KV store.if (url.endsWith('/lcp-data') && request.method === 'POST') {returnstorePriorityHints(request, env.PRIORITY_HINTS);}// For all other requests use the stored LCP data to add the// `fetchpriority` attribute to matching <img> elements on the page.returnaddPriorityHintsToResponse(request, env.PRIORITY_HINTS);},
};asyncfunctionaddPriorityHintsToResponse(request, store) {const urlPath = newURL(request.url).pathname;const device =request.headers.get('sec-ch-ua-mobile') === '?1' ? 'mobile' : 'desktop';const hintKey = `${device}:${encodeURIComponent(urlPath)}`;const [response, hintSelector] = awaitPromise.all([fetch(request),store.get(hintKey),]);// If a stored selector is found for this page/device, apply it.if (hintSelector) {returnnewHTMLRewriter().on(hintSelector, newPriorityHintsHandler()).transform(response);}return response;
}classPriorityHintsHandler {#applied = false;element(element) {// Only apply the `fetchpriority` attribute to the first matching element.if (!this.#applied) {element.setAttribute('fetchpriority', 'high');this.#applied = true;}}
}
复制代码
可以通过在pc端访问网站页面 查看例子,应该能看到第一章图片使用了fetchpriority="high"属性,需要注意的是源代码中没有该属性,这个属性只有在之前用户上报该图片是LCP元素才会生效,你在访问时可能就能看到。
必须着重说明一下,该属性是被添加到了HTML上,而不是使用客户端js加载的。可以通过curl请求页面html源代码,在相应的html文件中应该能看到fetchpriority属性。
curl https://philipwalton.com/articles/my-challenge-to-the-web-performance-community/
复制代码
同时,源代码中没有这个属性,是cloudflare根据之前的访问情况添加的。
重要提醒
我认为大型网站在这上面能获益良多,但是有一些重要提醒需要关注一下。
首先,在上面的策略中,页面LCP元素需要在HTML源码中能找到,换言之,LCP元素不能是js动态引入的,也不能是通过data-src而非src等常见技术:
<img data-src="data:image.jpg" class="lazyload" />
复制代码
In addition to the fact that it’s always a bad idea to lazy load your LCP element, any time you use JavaScript to load images, it won’t work with the declarative fetchpriority attribute.
总是懒加载LCP元素可能是很糟糕的方法,所以任何时候使用js加载图片,使用fetchpriority这个属性其实无效。
此外,如果访问者不同,lcp元素变动不大,则使用这种方法收益最大。如果访问者不同,LCP元素不同,则一个访问者的LCP元素则不会匹配下一个访问者。
如果网站是这种情况,你可能就需要在LCP数据key中添加user ID;但是这种情况只在用户频繁反复访问网站的情况才值得。如果不是这种情况,可能不会有收益。
验证技术是否有效
同任何性能方案一样,观测影响和验证技术是否有效也非常重要。其中一个验证的方式是测量特定网站结果的精确度,也就是说,对于动态加载 fetchpriority的情况,有多少更正了元素。
可以使用下面代码验证:
import {onLCP} from'web-vitals/attribution';onLCP((metric) => {let dynamicPriority = null;const {lcpEntry} = metric.attribution;// If the LCP element is an image, check to see if a different element// on the page was given the `fetchpriority` attribute.if (lcpEntry?.url && lcpEntry.element?.tagName.toLowerCase() === 'img') {const elementWithPriority = document.querySelector('[fetchpriority]');if (elementWithPriority) {dynamicPriority =elementWithPriority === lcpEntry.element ? 'hit' : 'miss';}}// Log whether the dynamic priority logic was a hit, miss, or not set.console.log('Dynamic priority:', dynamicPriority);
});
复制代码
如果曾动态加载fetchpriority,一旦页面出现fetchpriority属性,但非LCP元素,则添加错误。
你可以使用 “hit rate”验证匹配逻辑的有效情况,如果在一段时间内缺失很大,则有可能需要调整或取消。
总结
如果读者感觉这一技术有用,可以考虑尝试或者分享给你认为可能有用的人。我希望像cloudflare一样的CDN商能够自动使用这个技术,或者作为一项用户选可配置的特性。
此外,希望本文能对用户在LCP这方面有所启发,能了解LCP这种动态指标的实质是非常依靠用户的行为。虽然永远提前知道LCP元素不太可能,但是性能技巧在一定程度上能够有所收益,也需要适当的调整。
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
谷歌性能主管最新的有关LCP的文章相关推荐
- 英特尔携手谷歌云加速最新虚拟机;谷歌云平台下调抽成比例;Hitachi Vantara推出全新云成本优化服务...
NEWS 新闻回顾 GitLab 将上市 随着收入持续增长和亏损扩大,DevOps 宠儿 GitLab 终于申请了首次公开募股 (IPO). GitLab 一直致力于成为开发人员的一站式商店,与 Gi ...
- 谷歌机器学习主管:10年自学数据科学的3点心得体会
全文共3243字,预计学习时长10分钟 来源:Pexels 数据科学.机器学习和分析被认为是最热门的职业之一. 工业界.学术界和政府对熟练数据科学的从业人员的需求正在迅速增长.因此,目前的" ...
- 谷歌性能测评工具lighthouse使用
谷歌性能测评工具lighthouse使用 1.谷歌插件lighthouse的基本介绍 Lighthouse 是一个网站性能测评工具, 它是 Google Chrome 推出的一个开源自动化工具,能够对 ...
- 谷歌硬件主管:AR眼镜还在开发,环境计算是未来目标
NEW 关注Tech逆向思维视频号 最新视频→[新冠病毒空气传播是接触传播的1000倍?] 5月13日消息,谷歌硬件主管里克·奥斯特洛 (Rick Osterloh)日前在接受采访时表示," ...
- 关于谷歌中国的最新声明
关于谷歌中国的最新声明 David Drummond, SVP, Corporate Development and Chief Legal Officer 今年1月12日,我们在本博客上宣布,Goo ...
- 性能超越最新序列推荐模型,华为诺亚方舟提出记忆增强的图神经网络
作者 | Chen Ma, Liheng Ma等 译者 | Rachel 出品 | AI科技大本营(ID:rgznai100) 用户-商品交互的时间顺序可以揭示出推荐系统中用户行为随时间演进的序列性特 ...
- 视频也能P!谷歌CVPR 2021最新视频P图模型omnimatte
点击上方"视学算法",选择加"星标"或"置顶" 重磅干货,第一时间送达 来源:Google AI .新智元 [导读]你是否还在受视频P图不能 ...
- 谷歌大脑AutoML最新进展:用进化算法发现神经网络架构
来源:AI中国 大脑的进化进程持续已久,从5亿年前的蠕虫大脑到现如今各种现代结构.例如,人类的大脑可以完成各种各样的活动,其中许多活动都是毫不费力的.例如,分辨一个视觉场景中是否包含动物或建筑物对我们 ...
- 谷歌大脑AutoML最新进展:不断进化的阿米巴网络
原作 Esteban Real Root 编译自 Google Research Blog 量子位 出品 | 公众号 QbitAI 自然界用了5亿年时间. 才把神经系统从最原始的雏形--阿米巴(Amo ...
最新文章
- c语言如何将浮点数转换为字节,浅谈C语言整型与浮点型转换
- dataset的去重计数 g2_去互联网公司面试,面试官问我SpringCloud,附答案
- 高通平台MSM8916LCM模块移植(一)-bootloader部分
- 53.垃圾回收算法的实现原理、启动Java垃圾回收、Java垃圾回收过程、垃圾回收中实例的终结、对象什么时候符合垃圾回收的条件、GC Scope 示例程序、GC OutOfMemoryError的示例
- linux-dns的安装
- Linux下安装搭建Memcached集群环境
- python安装json模块_python 标准模块之json 模块
- c语言如何制作多线程序,c语言中如何创建多线程。最好有一个例子,谢谢!!...
- FrameWork数据权限浅析4之基于多维度配置表实现行级数据安全
- 《神经网络和深度学习》系列文章七:实现我们的神经网络来分类数字(下)...
- 牛津高阶字典ld2_(离线)英语词典软件推荐
- Windows调出屏幕键盘的步骤
- 电脑系统win8计算机在哪里设置开机密码,电脑怎样设置开机密码_win8开机密码设置...
- Android AdMob教程
- STM32—驱动RFID-RC522模块
- ie8安装java提示被阻止_IE8浏览器安装失败的解决方法
- 【没用的小知识又增加了--CCS】
- uva10859放置街灯(树形dp)
- 冰箱变革成AI科技营养管家 COLMO 成功占位营养及高定赛道
- 常用搜索引擎使用技巧
热门文章
- 安卓hook解密教程
- 深入浅出JBoss Seam
- 职场人生:一个7年老员工的离职总结:如何打造一个最强大的“自我”
- 面试题:赛马问题(超级清晰详细)
- 自然语言处理 | (5)英文文本处理与spaCy
- 简单解决MPlayerX播放视频时中间有个MPlayerX的图标的问题
- win10s上不了网,网卡代码驱动异常代码56。
- 万象08增强版升级万象OL详细流程
- Eureka Server源码解析(服务故障下线剔除流程)
- La Salle-Pui Ching Programming Challenge 2017 Gym - 101522A,B,C,D,H,I,K