Problem/Motivation

This issue proposes the implementation of lazy loading for off-screen images in the Acquia DAM. By adding the loading="lazy" attribute to the embed option for images, we can enhance the performance of web pages by deferring the loading of images that are not immediately visible in the viewport. Currently it is available with download and sync option.

Steps to reproduce

  • Install Drupal
  • Install Acquia DAM & media_library
  • Authenticate site in the configuration and then authorize the user
  • Create Content type and add media field with Acquia DAM: Image bundle selected.
  • Edit Acquia DAM: Image media type and check the Download and sync option & save changes.
  • Create page and add DAM assets.
  • Verify the loading="lazy" attribute is available with image tag.
  • Edit Acquia DAM: Image media type and uncheck the Download and sync option & save changes.
  • Visit page and verify the loading="lazy" attribute is not available with image tag.

Proposed resolution

Add the image_loading attribute into the EmbedCodeFormatter.

Issue fork acquia_dam-3530965

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

rajeshreeputra created an issue. See original summary.

rajeshreeputra’s picture

rajeshreeputra
he/him
Location Pune
commented
Issue summary: View changes
dbrownmt’s picture

dbrownmt
Location New Hampshire, USA
commented

Adding some more information as to the importance of this. Google's page speed metrics prefer to not have LCP images lazy loaded. Using assets from the DAM is a common use case for hero images and similar components. Having the image formatter include image loading in order to switch these assets to eager is very important in these use cases.

rohan-sinha made their first commit to this issue’s fork.

rohan-sinha opened merge request !308

rohan-sinha’s picture

rohan-sinha commented
Status: Active » Needs review

  • rohan-sinha committed 14abe74c on 1.1.x 
    Resolve #3530965 "Fix: Implementation of lazy loading for off-screen...

rohan-sinha opened merge request !326

  • rohan-sinha committed 14abe74c on 1.1.x-webhook 
    Resolve #3530965 "Fix: Implementation of lazy loading for off-screen...

rohan-sinha opened merge request !328

  • rohan-sinha committed e2b4a648 on 1.1.x-webhook 
    Resolve #3530965 "CKEditor-embedded media Fix"

rajeshreeputra’s picture

rajeshreeputra
he/him
Location Pune
commented
Status: Needs review » Fixed

MR merged!

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.