Add intersection observer to lazyload Oembed iframes

Add missing Javascript

Have code reviewed the patch and tested and it works for me. Have seen massive performance gains on pages with any iframes

The Needs Review Queue Bot → tested this issue.

While you are making the above changes, we recommend that you convert this patch to a merge request → . Merge requests are preferred over patches. Be sure to hide the old patch files as well. (Converting an issue to a merge request without other contributions to the issue will not receive credit.)

AndySipple → changed the visibility of the branch 3405593-add-intersection-observer to hidden.

AndySipple → changed the visibility of the branch 11.x to hidden.

AndySipple → changed the visibility of the branch 3405593-add-intersection-observer to active.

AndySipple → changed the visibility of the branch 3405593- to hidden.

Fix phpcs eslint errors.

AndySipple → changed the visibility of the branch 3405593-add-intersection-observer to hidden.

This is re-roll patch so it works with 10.1.x.
Version 10.2.x adds drupal.media-icon: to media.libraries.yml found here https://git.drupalcode.org/project/drupal/-/blob/10.2.x/core/modules/med...

Have tested the updated patches

Conduct a Google lighthouse page speed assessment and observe a decrease in unused JavaScript, impacting the overall page speed score.

A decrease in unused JavaScript is a good thing, do you mean an increase? I'd like to see the actual difference in page speed scores before/after.

This also needs some test coverage before it can be committed.

What would be the best way to write a test for this @catch?

@catch added some screenshots. Yes, my mistake it should say "increase" not "decrease".

@paulsheldrake - could probably add extra cases/assertions to OEmbedFormatterTest.php to validate that the config results in the expected markup. Vven better would be a FunctionalJavaScript test that ensures the JavaScript actually works in loading the oembed content, MediaSourceOEmbedVideoTest looks the closest to base this on.

+++ b/core/modules/media/js/media_embed_intersection_observer.js
@@ -0,0 +1,36 @@
+        '.media-oembed-content[data-src]',

Can this be provided as a js setting? Theming can change the class names very easily and having the ability to inject the class name would be a nice bonus.

I'm not sure we need to say 'intersection observer' in the UI text, can we say something like 'lazy loading with JavaScript'?

Would also like to understand why the lazy attribute is not sufficient here - are browsers applying different tests to the lazy attribute vs. intersection observer? Is it possible to see 'premature' loading of the iframe when using devtools and a real page, or is this somehow a side effect of Google lighthouse?

@heddn, could you provide an example?

@catch, I agree with the suggested naming.

For further details on the loading="lazy" attribute and the threshold, refer to this link: https://web.dev/articles/browser-level-image-lazy-loading#improved_data-.... On a 4G connection, the threshold is set at 1250px, while on 3G, it's 2500px. Anything within this threshold is loaded according to Google documentation.
Unfortunately, I haven't found documentation explaining why adding loading="lazy" onto iframes does not yield better lighthouse scores.

More information https://web.dev/articles/iframe-lazy-loading

@AndySipple https://www.drupal.org/node/2274843#configurable → seems like a good jumping off place for passing settings along.

Re-roll patch for 10.2