Changeset 50682

Timestamp:

04/07/2021 12:59:18 AM (4 years ago)

Author:

peterwilsoncc

Message:

Media: Do not lazy load hidden images or embeds.

Improve the check for sourceless or dimensionless media when determining if the lazy loading attribute should be added to iframes and images. Never include the lazy loading attribute on embeds of WordPress posts as the iframe is initially hidden.

Including loading="lazy" on initially hidden iframes and images can prevent the media from loading in some browsers.

Props adamsilverstein, fabianpimminger, flixos90, johnbillion, jonkastonka, joyously, peterwilsoncc, SergeyBiryukov, SirStuey, swissspidy.
Fixes #52768.

Location:

trunk

Files:

• package-lock.json (modified) (3 diffs)
• src/wp-includes/media.php (modified) (4 diffs)
• tests/phpunit/tests/media.php (modified) (1 diff)

trunk/package-lock.json

@@ -4084 +4084 @@
                     "dev": true
                 },
+                "puppeteer": {
+                    "version": "npm:puppeteer-core@5.5.0",
+                    "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-5.5.0.tgz",
+                    "integrity": "sha512-tlA+1n+ziW/Db03hVV+bAecDKse8ihFRXYiEypBe9IlLRvOCzYFG6qrCMBYK34HO/Q/Ecjc+tvkHRAfLVH+NgQ==",
+                    "dev": true,
+                    "requires": {
+                        "debug": "^4.1.0",
+                        "devtools-protocol": "0.0.818844",
+                        "extract-zip": "^2.0.0",
+                        "https-proxy-agent": "^4.0.0",
+                        "node-fetch": "^2.6.1",
+                        "pkg-dir": "^4.2.0",
+                        "progress": "^2.0.1",
+                        "proxy-from-env": "^1.0.0",
+                        "rimraf": "^3.0.2",
+                        "tar-fs": "^2.0.0",
+                        "unbzip2-stream": "^1.3.3",
+                        "ws": "^7.2.3"
+                    }
+                },
                 "rimraf": {
                     "version": "3.0.2",
@@ -5891 +5911 @@
         "browserify-aes": {
             "version": "1.2.0",
-            "resolved": "http://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
+            "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
             "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
             "dev": true,
@@ -18804 +18824 @@
             "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
             "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
-        },
-        "puppeteer": {
-            "version": "npm:puppeteer-core@5.5.0",
-            "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-5.5.0.tgz",
-            "integrity": "sha512-tlA+1n+ziW/Db03hVV+bAecDKse8ihFRXYiEypBe9IlLRvOCzYFG6qrCMBYK34HO/Q/Ecjc+tvkHRAfLVH+NgQ==",
-            "dev": true,
-            "requires": {
-                "debug": "^4.1.0",
-                "devtools-protocol": "0.0.818844",
-                "extract-zip": "^2.0.0",
-                "https-proxy-agent": "^4.0.0",
-                "node-fetch": "^2.6.1",
-                "pkg-dir": "^4.2.0",
-                "progress": "^2.0.1",
-                "proxy-from-env": "^1.0.0",
-                "rimraf": "^3.0.2",
-                "tar-fs": "^2.0.0",
-                "unbzip2-stream": "^1.3.3",
-                "ws": "^7.2.3"
-            },
-            "dependencies": {
-                "find-up": {
-                    "version": "4.1.0",
-                    "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-                    "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-                    "dev": true,
-                    "requires": {
-                        "locate-path": "^5.0.0",
-                        "path-exists": "^4.0.0"
-                    }
-                },
-                "locate-path": {
-                    "version": "5.0.0",
-                    "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-                    "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-                    "dev": true,
-                    "requires": {
-                        "p-locate": "^4.1.0"
-                    }
-                },
-                "p-locate": {
-                    "version": "4.1.0",
-                    "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-                    "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-                    "dev": true,
-                    "requires": {
-                        "p-limit": "^2.2.0"
-                    }
-                },
-                "path-exists": {
-                    "version": "4.0.0",
-                    "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-                    "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-                    "dev": true
-                },
-                "pkg-dir": {
-                    "version": "4.2.0",
-                    "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-                    "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-                    "dev": true,
-                    "requires": {
-                        "find-up": "^4.0.0"
-                    }
-                },
-                "rimraf": {
-                    "version": "3.0.2",
-                    "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-                    "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-                    "dev": true,
-                    "requires": {
-                        "glob": "^7.1.3"
-                    }
-                }
-            }
         },
         "q": {

trunk/src/wp-includes/media.php

@@ -1870 +1870 @@
  */
 function wp_img_tag_add_loading_attr( $image, $context ) {
+    // Images should have source and dimension attributes for the `loading` attribute to be added.
+    if ( false === strpos( $image, ' src="' ) || false === strpos( $image, ' width="' ) || false === strpos( $image, ' height="' ) ) {
+        return $image;
+    }
+
     /**
      * Filters the `loading` attribute value to add to an image. Default `lazy`.
@@ -1890 +1895 @@
         }
 
-        // Images should have source and dimension attributes for the `loading` attribute to be added.
-        if ( false === strpos( $image, ' src="' ) || false === strpos( $image, ' width="' ) || false === strpos( $image, ' height="' ) ) {
-            return $image;
-        }
-
         return str_replace( '<img', '<img loading="' . esc_attr( $value ) . '"', $image );
     }
@@ -1990 +1990 @@
  */
 function wp_iframe_tag_add_loading_attr( $iframe, $context ) {
+    // Iframes with fallback content (see `wp_filter_oembed_result()`) should not be lazy-loaded because they are
+    // visually hidden initially.
+    if ( false !== strpos( $iframe, ' data-secret="' ) ) {
+        return $iframe;
+    }
+
+    // Iframes should have source and dimension attributes for the `loading` attribute to be added.
+    if ( false === strpos( $iframe, ' src="' ) || false === strpos( $iframe, ' width="' ) || false === strpos( $iframe, ' height="' ) ) {
+        return $iframe;
+    }
+
     /**
      * Filters the `loading` attribute value to add to an iframe. Default `lazy`.
@@ -2008 +2019 @@
         if ( ! in_array( $value, array( 'lazy', 'eager' ), true ) ) {
             $value = 'lazy';
-        }
-
-        // Iframes should have source and dimension attributes for the `loading` attribute to be added.
-        if ( false === strpos( $iframe, ' src="' ) || false === strpos( $iframe, ' width="' ) || false === strpos( $iframe, ' height="' ) ) {
-            return $iframe;
         }
 

trunk/tests/phpunit/tests/media.php

@@ -2942 +2942 @@
         $iframe = '<iframe src="https://www.example.com" width="640" height="360"></iframe>';
         add_filter( 'wp_iframe_tag_add_loading_attr', '__return_false' );
+        $iframe = wp_iframe_tag_add_loading_attr( $iframe, 'test' );
+
+        $this->assertNotContains( ' loading=', $iframe );
+    }
+
+    /**
+     * @ticket 52768
+     */
+    function test_wp_iframe_tag_add_loading_attr_skip_wp_embed() {
+        $iframe   = '<iframe src="https://www.example.com" width="640" height="360"></iframe>';
+        $fallback = '<blockquote>Fallback content.</blockquote>';
+        $iframe   = wp_filter_oembed_result( $fallback . $iframe, (object) array( 'type' => 'rich' ), 'https://www.example.com' );
+        $iframe   = wp_iframe_tag_add_loading_attr( $iframe, 'test' );
 
         $this->assertNotContains( ' loading=', $iframe );