在 google 页面速度下，我有一个最大的 Contentful Paint

Question

我对 Largest Contentful Paint 结果不好。我使用此代码：

<img src="http://localhost:49167/media/cache/resolve/lazy/build/template/hand.png" data-srcset="
           http://localhost:49167/media/cache/resolve/mini/build/template/hand.png 100w,
          http://localhost:49167/media/cache/resolve/petit/build/template/hand.png 300w,
           http://localhost:49167/media/cache/resolve/semi/build/template/hand.png 450w,
         http://localhost:49167/media/cache/resolve/moyen/build/template/hand.png 600w,
         http://localhost:49167/media/cache/resolve/grand/build/template/hand.png 900w" class="lazyautosizes lazyloaded" data-sizes="auto" style="width:100%;height:100%;" alt="Main d'adulte qui tient main d'enfant" data-toggle="tooltip" data-placement="top" title="" data-original-title="" sizes="715px" srcset="
           http://localhost:49167/media/cache/resolve/mini/build/template/hand.png 100w,
          http://localhost:49167/media/cache/resolve/petit/build/template/hand.png 300w,
           http://localhost:49167/media/cache/resolve/semi/build/template/hand.png 450w,
         http://localhost:49167/media/cache/resolve/moyen/build/template/hand.png 600w,
         http://localhost:49167/media/cache/resolve/grand/build/template/hand.png 900w">

和 google 具有此渲染：

<img src="https://urlofmysite/media/cache/resolve/grand/build/tem…" data-srcset=" https://urlofmysite/media/cache/resolve…" class="lazyautosizes lazyloaded" data-sizes="auto" style="width:100%;height:100%;" alt="hand" data-toggle="tooltip" data-placement="top" data-original-title="" sizes="675px" srcset=" https://urlofmysite/media/cache/resolve…">

带有 liipmanager 的 symfony 5.3 上的站点运行。

我在 liip_imagine_filter.yaml 中使用了很多过滤器：

 bande:
  jpeg_quality: 80
  png_compression_level: 6
  filters:
    auto_rotate: ~
    thumbnail:
      size: [1920, 200]
      mode: outbound
hd:
  jpeg_quality: 80
  png_compression_level: 6
  filters:
    auto_rotate: ~
    relative_resize:
      widen: 1280

grand:
  jpeg_quality: 80
  png_compression_level: 6
  filters:
    auto_rotate: ~
    relative_resize:
      widen: 900

moyen:
  jpeg_quality: 80
  png_compression_level: 6
  filters:
    auto_rotate: ~
    relative_resize:
      widen: 600

Answer 1

有很多解决方案，具体取决于您的用例。如果您正在使用 CDN，请与客户经理联系以利用那些具有 minimal/no 开发工作的人员。如果您的 cdn 是 akamai，则可以使用 Image Manager。我相信其他 CDN 有自己的解决方案。 https://www.akamai.com/us/en/products/performance/image-and-video-manager.jsp

如果您不想解决开发方面的问题，需要付出很多努力，例如从创意中获取所有格式的图像，然后在您的图像标签中提及所有源集，以便浏览器选择支持的格式。

谢谢，

在 google 页面速度下，我有一个最大的 Contentful Paint

in google page speed i have a Largest Contentful Paint

pagespeed

symfony

google-pagespeed

liipimaginebundle

pagespeed-insights