seo Question posted in
Some basic information to get you started with this can be found here.

Seo – Can I defer an image on mobile only but not on desktop?

I have an image that loads in my header on mobile. This is a full width image that sits at the top of the page, meaning I cannot defer it as it contributes to the LCP on desktop.

However, on mobile this image has a "display:none" class as it isn’t needed to help speed up mobile page load. I am getting the Google Pagespeed warning on mobile to defer this image.

Is there a way to correctly not load this image at all on mobile devices, a better route than to display:none? Or is there a way to defer the image on mobile only so it doesn’t affect the LCP score for desktop?

Current code is

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

Thanks

Tags:

2

Answers


  1. 0

    To optimize the loading of images for different devices and improve your LCP (Largest Contentful Paint) score on mobile, you can use various techniques. The most effective one in your case is to conditionally load the image only on desktop devices. Here are some approaches to achieve this:

    1. Using picture and media attributes:
    The <picture> element combined with the media attribute allows you to specify different images for different viewport sizes. This method ensures that the image is only loaded when it meets the specified media conditions.

    <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>

    In this example, the first <source> tag with media="(max-width: 767px)" has an empty srcset, so no image will be loaded on mobile devices. The second <source> tag will load the image only for viewports wider than 768px.

    2. Using JavaScript for Conditional Loading:
    You can also use JavaScript to load the image only on desktop devices. This method is useful if you need more control or want to support older browsers.

    <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>

    This script checks the viewport width after the DOM has loaded and appends the image to the header only if the viewport is at least 768px wide.

    3. Using CSS with background-image:
    Another approach is to use CSS to apply the image as a background image for desktop devices. This way, the image is not part of the HTML and won’t be loaded on mobile devices.

    <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>

    In this example, the image is only set as a background for screens 768px wide or larger.

    Choose the method that best fits your needs. The <picture> element with the media attribute is the most modern and straightforward solution, while JavaScript and CSS methods provide more control if needed.

    Login or Signup to reply.
  2. 0

    Yes, you can defer an image on mobile only but not on desktop using CSS media queries and JavaScript. This approach allows you to control how and when images are loaded based on the device’s screen size. Here’s how you can achieve that:

    Step-by-Step Guide
    HTML Structure:

    Use a div or a placeholder for the image that will be loaded on mobile devices.
    Add the actual image inside this div and hide it initially.

    CSS:

    The CSS media query @media (max-width: 768px) targets mobile devices (adjust the breakpoint as needed).
    Initially, the image is hidden with display: none.
    When the screen width is 768px or less, the image is displayed with display: block.
    JavaScript:

    The script waits for the DOM content to load with DOMContentLoaded.
    It checks if the window width is 768px or less.
    If the condition is true, it sets the src attribute of the image to load it.
    Note:
    Adjust the media query breakpoint (768px) according to your needs.
    The data-src attribute holds the actual image URL, which is set to the src attribute only on mobile devices.

    This approach ensures that the image is deferred and loaded only on mobile devices, while on desktop, it remains hidden and not loaded.
    Our web development services can handle your website, no matter what you need.
    Visit WillShall now for more details.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search