我可以仅在移动设备上延迟图像，而不能在桌面上延迟图像吗？

Question

我有一个图像加载到移动设备上的标题中。这是位于页面顶部的全宽图像，这意味着我不能推迟它，因为它有助于桌面上的 LCP。

但是，在移动设备上，此图像具有“display:none”类，因为不需要它来帮助加快移动页面加载速度。我在移动设备上收到 Google Pagespeed 警告以推迟此图像。

有没有一种方法可以在移动设备上完全不加载此图像，这是比显示更好的路线：无？或者有没有办法仅在移动设备上延迟图像，这样就不会影响桌面设备的 LCP 分数？

当前代码是

<img class="full-width-scroller-bg-image desktop-only" src="<?php echo $thumb;?>" width="1920px" height="1080px" alt="Image alt tag"/>

谢谢

Answer 1

要优化不同设备的图像加载并提高移动设备上的 LCP（最大内容绘制）分数，您可以使用各种技术。对于您的情况，最有效的方法是仅在桌面设备上有条件地加载图像。以下是实现这一目标的一些方法：

1。使用图片和媒体属性：

<picture>

元素与

media

属性相结合，允许您为不同的视口大小指定不同的图像。该方法确保图像仅在满足指定的媒体条件时才加载。

<picture>
  <source media="(max-width: 767px)" srcset="">
  <source media="(min-width: 768px)" srcset="<?php echo $thumb;?>">
  <img src="<?php echo $thumb;?>" alt="Image alt tag" width="1920" height="1080">
</picture>

在此示例中，带有

<source>

的第一个

media="(max-width: 767px)"

标签具有空的

srcset

，因此移动设备上不会加载任何图像。第二个

<source>

标签将仅加载宽度大于 768px 的视口的图像。

2。使用 JavaScript 进行条件加载： 您还可以使用 JavaScript 仅在桌面设备上加载图像。如果您需要更多控制或想要支持旧版浏览器，此方法非常有用。

<script>
  document.addEventListener("DOMContentLoaded", function() {
    if (window.innerWidth >= 768) {
      var img = document.createElement('img');
      img.src = "<?php echo $thumb;?>";
      img.alt = "Image alt tag";
      img.width = 1920;
      img.height = 1080;
      img.classList.add('full-width-scroller-bg-image', 'desktop-only');
      document.querySelector('header').appendChild(img);
    }
  });
</script>

此脚本在 DOM 加载后检查视口宽度，并仅在视口宽度至少为 768px 时将图像附加到标题。

3.将 CSS 与背景图像结合使用： 另一种方法是使用 CSS 将图像应用为桌面设备的背景图像。这样，图像就不是 HTML 的一部分，也不会加载到移动设备上。

<style>
  .full-width-scroller-bg-image {
    display: none;
  }
  
  @media (min-width: 768px) {
    .full-width-scroller-bg-image {
      display: block;
      width: 1920px;
      height: 1080px;
      background-image: url("<?php echo $thumb;?>");
      background-size: cover;
    }
  }
</style>

<div class="full-width-scroller-bg-image"></div>

在此示例中，图像仅设置为宽度为 768 像素或更大的屏幕的背景。

选择最适合您需求的方法。具有

<picture>

属性的

media

元素是最现代、最直接的解决方案，而 JavaScript 和 CSS 方法则在需要时提供更多控制。