Skip to content

Instantly share code, notes, and snippets.

@westonruter
Last active June 8, 2020 17:02
Show Gist options
  • Save westonruter/9a8cda7307d08140f9edc29d246e46e8 to your computer and use it in GitHub Desktop.
Save westonruter/9a8cda7307d08140f9edc29d246e46e8 to your computer and use it in GitHub Desktop.
Now available on the WordPress.org plugin directory: https://wordpress.org/plugins/lazy-loading-oembed-iframes/
=== Lazy Loading oEmbed Iframes ===
Contributors: westonruter
Tags: oembed, performance
Requires at least: 2.9
Tested up to: 5.4
Stable tag: trunk
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Requires PHP: 5.6
Add the loading=lazy attribute to iframes coming from oEmbeds in content
== Description ==
This plugin adds the <code>loading=lazy</code> attribute to <code>iframe</code> elements coming from oEmbeds. In WordPress 5.5, <code>loading=lazy</code> is added to images but not yet iframes (though it was mentioned in <a href="https://core.trac.wordpress.org/ticket/44427">#44427</a>). For lazy-loaded images on WP 5.4 and before, use the <a href="https://wordpress.org/plugins/wp-lazy-loading/">Lazy Loading Feature Plugin</a>.
This plugin will likely be obsolete either by the time WordPress 5.5 is released or soon thereafter.
<?php
/**
* Lazy Loading oEmbed Iframes plugin bootstrap.
*
* @package Google\Lazy_Loading_oEmbed_Iframes
* @author Weston Ruter, Google
* @license GPL-2.0-or-later
* @copyright 2020 Google Inc.
*
* @wordpress-plugin
* Plugin Name: Lazy Loading oEmbed Iframes
* Plugin URI: https://gist.github.com/westonruter/9a8cda7307d08140f9edc29d246e46e8
* Description: Add <code>loading=lazy</code> to <code>iframe</code> elements coming from oEmbeds. In WordPress 5.5, <code>loading=lazy</code> is added to images but not yet iframes (though it was mentioned in <a href="https://core.trac.wordpress.org/ticket/44427">#44427</a>). For lazy-loaded images on WP 5.4 and before, use the <a href="https://wordpress.org/plugins/wp-lazy-loading/">Lazy Loading Feature Plugin</a>.
* Version: 1.0
* Author: Weston Ruter
* Author URI: https://weston.ruter.net/
* License: GNU General Public License v2 (or later)
* License URI: http://www.gnu.org/licenses/gpl-2.0.html
* Gist Plugin URI: https://gist.github.com/westonruter/9a8cda7307d08140f9edc29d246e46e8
*/
namespace Google\Lazy_Loading_oEmbed_Iframes;
/**
* Filter oEmbed HTML to inject loading=lazy attribute into iframes.
*
* @param string $html HTML for oEmbed.
* @return string Filtered oEmbed HTML.
*/
function filter_oembed_html( $html ) {
return preg_replace_callback(
'/(?<=<iframe\s)[^>]+(?=>)/',
function ( $matches ) {
$attributes = $matches[0];
if ( false === strpos( $attributes, 'loading=' ) ) {
$attributes .= ' loading="lazy"';
}
return $attributes;
},
$html
);
}
add_filter( 'embed_oembed_html', __NAMESPACE__ . '\filter_oembed_html' );
@westonruter
Copy link
Author

westonruter commented Jun 5, 2020

Installation instructions: https://gist.github.com/westonruter/6110fbc4bef0c4b8c021a112012f7e9c

This plugin has been added to the WordPress.org plugin directory. Install from there: https://wordpress.org/plugins/lazy-loading-oembed-iframes/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment