Changeset 12757

Timestamp:

10/16/2020 06:02:01 AM (4 years ago)

Author:

r-a-y

Message:

Add lazy loading support for images and iframes.

In order to take advantage of native browser support for lazy loading,
this commit adds the 'loading="lazy"' attribute to all <img> and
<iframe> elements used throughout BuddyPress (activity content,
private messaging content and avatar display).

The generic function, bp_core_add_loading_lazy_attribute(), is
introduced to help with this.

A special case is made for WordPress post embeds. As of this commit,
only Chromium-based browsers (77+) support iframe lazy loading if the
iframe is visible on load. (See ​https://web.dev/iframe-lazy-loading/#iframe-specific-lazy-loading-behavior.)
Since WordPress post embeds uses inline CSS to hide their iframe on
initial load, we need to remove their inline CSS so lazy loading can
be properly applied.

Props r-a-y, imath.

Fixes #8340.

Location:

trunk/src

Files:

• bp-activity/bp-activity-embeds.php (modified) (1 diff)
• bp-activity/bp-activity-filters.php (modified) (1 diff)
• bp-core/bp-core-filters.php (modified) (2 diffs)
• bp-groups/bp-groups-blocks.php (modified) (1 diff)
• bp-groups/classes/class-bp-groups-component.php (modified) (1 diff)
• bp-members/bp-members-blocks.php (modified) (1 diff)
• bp-messages/bp-messages-filters.php (modified) (1 diff)

trunk/src/bp-activity/bp-activity-embeds.php

@@ -268 +268 @@
 
             // Set up thumb.
-            $content = sprintf( '<div class="thumb" style="max-width:%1$spx">%2$s<a href="%3$s" rel="nofollow" onclick="top.location.href=\'%3$s\'"><img src="%4$s" alt="" /></a></div>', $thumb_width, $play_icon, esc_url( $url ), esc_url( $thumbnail ) );
+            $content = sprintf( '<div class="thumb" style="max-width:%1$spx">%2$s<a href="%3$s" rel="nofollow" onclick="top.location.href=\'%3$s\'"><img loading="lazy" src="%4$s" alt="" /></a></div>', $thumb_width, $play_icon, esc_url( $url ), esc_url( $thumbnail ) );
 
             // Show title.

trunk/src/bp-activity/bp-activity-filters.php

@@ -91 +91 @@
 add_filter( 'bp_get_activity_latest_update_excerpt', 'bp_activity_make_nofollow_filter' );
 add_filter( 'bp_get_activity_feed_item_description', 'bp_activity_make_nofollow_filter' );
+
+add_filter( 'bp_get_activity_content_body', 'bp_core_add_loading_lazy_attribute' );
+add_filter( 'bp_activity_comment_content',  'bp_core_add_loading_lazy_attribute' );
 
 add_filter( 'pre_comment_content',                   'bp_activity_at_name_filter' );

trunk/src/bp-core/bp-core-filters.php

@@ -59 +59 @@
 add_filter( 'bp_email_set_content_plaintext', 'wp_strip_all_tags', 6 );
 add_filter( 'bp_email_set_subject', 'sanitize_text_field', 6 );
+
+// Avatars.
+add_filter( 'bp_core_fetch_avatar', 'bp_core_add_loading_lazy_attribute' );
 
 /**
@@ -901 +904 @@
 
 /**
+ * Add 'loading="lazy"' attribute into images and iframes.
+ *
+ * @since 7.0.0
+ *
+ * @string $content Content to inject attribute into.
+ * @return string
+ */
+function bp_core_add_loading_lazy_attribute( $content = '' ) {
+    if ( false === strpos( $content, '<img ' ) && false === strpos( $content, '<iframe ' ) ) {
+        return $content;
+    }
+
+    $content = str_replace( '<img ',    '<img loading="lazy" ',    $content );
+    $content = str_replace( '<iframe ', '<iframe loading="lazy" ', $content );
+
+    // WordPress posts need their position absolute removed for lazyloading.
+    $find_pos_absolute = ' style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" ';
+    if ( false !== strpos( $content, 'data-secret=' ) && false !== strpos( $content, $find_pos_absolute ) ) {
+        $content = str_replace( $find_pos_absolute, '', $content );
+    }
+
+    return $content;
+}
+
+/**
  * Should BuddyPress load the mentions scripts and related assets, including results to prime the
  * mentions suggestions?

trunk/src/bp-groups/bp-groups-blocks.php

@@ -111 +111 @@
             '<div class="item-header-avatar">
                 <a href="%1$s">
-                    <img src="%2$s" alt="%3$s" class="avatar">
+                    <img loading="lazy" src="%2$s" alt="%3$s" class="avatar">
                 </a>
             </div>',

trunk/src/bp-groups/classes/class-bp-groups-component.php

@@ -893 +893 @@
 
                 if ( empty( $bp->bp_options_avatar ) ) {
-                    $bp->bp_options_avatar = '<img src="' . esc_url( bp_core_avatar_default_thumb() ) . '" alt="' . esc_attr__( 'No Group Profile Photo', 'buddypress' ) . '" class="avatar" />';
+                    $bp->bp_options_avatar = '<img loading="lazy" src="' . esc_url( bp_core_avatar_default_thumb() ) . '" alt="' . esc_attr__( 'No Group Profile Photo', 'buddypress' ) . '" class="avatar" />';
                 }
             }

trunk/src/bp-members/bp-members-blocks.php

@@ -107 +107 @@
             '<div class="item-header-avatar">
                 <a href="%1$s">
-                    <img src="%2$s" alt="%3$s" class="avatar">
+                    <img loading="lazy" src="%2$s" alt="%3$s" class="avatar">
                 </a>
             </div>',

trunk/src/bp-messages/bp-messages-filters.php

@@ -78 +78 @@
 add_filter( 'bp_get_message_thread_content',          'stripslashes_deep', 1 );
 
+add_filter( 'bp_get_the_thread_message_content', 'bp_core_add_loading_lazy_attribute' );
+
 // Personal data export.
 add_filter( 'wp_privacy_personal_data_exporters', 'bp_messages_register_personal_data_exporter' );