为何我的LCP元素Load Delay占比过高?已做优化仍无改善
LCP指标优化困境:Load Delay占比过高问题排查
我一直在尝试提升网站的web.dev评分,目前卡在LCP(最大内容绘制)指标上,Load Delay(加载延迟)占比极高,搞不懂原因。以下是最新测试数据:
| Phase | % of LCP | Timing |
|---|---|---|
| TTFB | 12% | 650 ms |
| Load Delay | 77% | 4260 ms |
| Load Time | 1% | 60 ms |
| Render Delay | 10% | 570 ms |
我们讨论的LCP元素是一张图片,其img标签代码如下:
<img class="img-fluid" fetchpriority="high" loading="eager" alt="Van houtwolisolatie tot schelpen: welke natuurlijke isolatiematerialen zijn er?" width="1024" height="768" src="https://livios-images.imgix.net/livios/umbracomedia/100432/renovatie%20kalkhennep2.jpg?w=640&h=480&auto=format&fit=crop&crop=faces%2Cfocalpoint&corner-radius=10&mask=corners&s=0cd046a70dfd52ab8c40029eafd14e99">
我已经给图片添加了fetchpriority="high"和loading="eager"属性来优化加载,还在HTML头部添加了以下标签优化DNS加载和预加载:
<link rel="preconnect" href="https://livios-images.imgix.net" crossorigin=""> <link rel="dns-prefetch" href="https://livios-images.imgix.net"> <link rel="preload" href="https://livios-images.imgix.net/livios/umbracomedia/100432/renovatie%20kalkhennep2.jpg?w=640&h=480&auto=format&fit=crop&crop=faces%2Cfocalpoint&corner-radius=10&mask=corners&s=0cd046a70dfd52ab8c40029eafd14e99" as="image">
但Load Delay仍然居高不下,请问我是不是遗漏了什么优化点?
内容的提问来源于stack exchange,提问作者Arn Vanhoutte
相关产品推荐
相关产品推荐

