使用fetchpriority=high属性为页面最大资源的加载提速

文章预览

点击上方  前端Q ，关注公众号 回复 加群 ，加入前端Q技术交流群 为页面中拖慢 Largest Contentful Paint [1] (LCP)的静态资源添加 fetchpriority="high" 属性，可以提高加载速度。Esty使用Priority Hints提升了4%的LCP时间，另外一些站点在试验测试环境中甚至可以提升20%-30%。在大多数场景下，使用 fetchpriority 足以为LCP时间带来可观的提升。 代码片段 Priority Hints允许你有机会调整静态资源的加载优先级，包括：images, CSS, fonts, scripts以及iframes。因此Priority Hints并不局限于用来提升LCP表现： 降低预加载scripts的优先级 提升或者降低body标签后段的scripts加载优先级 为不同的fetch请求指定不同优先级（比如后台执行的行为与用户交互行为之间的不同优先级） 以及其他   < img   src = "hero-image.jpg"   fetchpriority = "high"   alt = "Hero" >   < img   src = "happy-cats.avif"   fetchpriority = "low"   ………………………………