OEmbed Lazyload

Motivation

The OEmbed Lazyload module aims to prevent the unnecessary loading of third party assets until such time that a user expresses interest in viewing the third party content or such content enters the viewport, depending on how the module is configured.

Loading third party content is slow

This project was developed in order to help optimize projects that rely heavily on core media oembed content. Oembed on its own has the potential to load excessive third party assets even if a user has no intention of consuming the content.

For example, loading oembed content from YouTube can add nearly 750kB to what a user has to download on every page view.

Some third party content providers offer a rich API

Out of the box, there really isn't a good way to tap into any custom API's that a particular provider supports. For example, there is an option to turn off YouTube branding on video embeds. This module provides a mechanism to tap into these otherwise inaccessible customization points.

Installation

The recommended installation method for this module is via composer.
composer require drupal/oembed_lazyload

Configuration

After installing the module and any appropriate sub-module(s), the site builder must select the "Lazy load oEmbed video" formatter in the appropriate media view display configuration.

How does it work?

The premise behind the mechanism is deceptively simple. It leverages the fact that Drupal wraps oEmbed content in an iframe for security purposes (https://oembed.com/#section3). This module provides a Field Formatter that delays the loading of this iframe until a user clicks a "Play" button or when the iframe enters the viewport. It also allows plugins to influence the content returned from the oembed provider before serving it to the user.

Sub-modules (notably the oembed_lazyload_youtube module), enhances the user-experience through various mechanisms introduced by the new formatter type.

Page Speed Metrics

Page speed insights (https://developers.google.com/speed/pagespeed/insights/) shows that lazy loading oEmbed content can have a dramatic effect on perceived page load times.

Before

After

Backward Compatibility / Upgrade Paths

Dev releases offer no BC guarantees whatsoever nor do they guarantee upgrade paths. Any data model and interface changes can be made without any release notes. Dev releases are not ready for production use.

Alpha releases offer no BC guarantees on interfaces. Data model changes will be communicated out via release notes. No automated upgrade paths will be made available.

Beta releases offer no BC guarantees on interfaces. Any breaking changes will be communicated out via release notes. No automated upgrade paths will be made available.

RC releases offer BC guarantees on interfaces and data models. Upgrade paths will be made available.

Stable releases offer the same guarantees as RC releases, but will also be under the Security Advisory Program.

Need Help?

Feel free to reach out at #oembed-lazyload at https://drupal.slack.com or send me a DM. I'm lleber on slack.