logo

该视频仅会员有权观看

立即开通课程「Next.js 前端应用开发实践」权限。

¥
199
/ 年

在 Image 组件里用 priority 属性设置优先要加载的图像

在打开页面p o t t o o后,浏览器控制台显示警告提示,指出页面上的第一张图片被检测为最大内容绘制(LCP)。LCP是浏览器性能评估指标,测量首次加载时最大图像或文本区块的渲染时间。要提高页面性能,若图像位于页面可视部分(the fold之上),应添加priority属性,使其优先加载。通过设置priority属性,并通过网络选项卡筛选及刷新,可以观察到加了priority的图片会被提前加载。根据浏览器的建议,给第一张图添加此属性后,原先的警告提示不再出现。