有没有办法减少非常小的 svg 图像的最大内容痛苦元素渲染延迟？

Question

我有一个静态网站，其中有一个非常小的（9KB）svg 图像。当我运行 Pagespeed Insight 时，我得到以下信息：

正如我所说，SVG 文件大小仅为 9KB。我尝试将图像转换为 webp，这创建了 40KB 的图像，但仍然有近 2 秒的较长渲染延迟。

我只有在移动设备上进行 Pagespeed Insight 测试时才会出现此情况，对于桌面设备，我不会遇到这么长的渲染延迟，并且性能非常好。

有什么办法可以减少渲染延迟吗？

Answer 1

渲染延迟不一定是因为图像格式或大小导致需要很长时间才能显示。该页面更有可能没有请求它显示。特别是对于像这样非常大的值。

以下场景：

<script>
  -- do lots of blocking work
</script>
<img src="hero.jpg">

在这种情况下，图像将被预加载扫描仪发现并提前获取，但阻塞脚本将阻止其渲染。

另一个常见模式来自客户端渲染的应用程序：

<html>
<head>
  <link rel="preload" src="hero.jpg" as="image">
</head>
<body>
  <div id="app"></div>
  <script src="app.js"?</script>
</body>
</html>

在这种情况下，图像是预加载的，因此可以尽早下载。但它根本不在页面中，但可能是由

app.js

添加的。所以渲染延迟是在等待客户端脚本运行。

您需要查看如何请求 LCP 图像，以及何时将其添加到 DOM 并显示，以及中间的任何因素都会减慢速度。