WordPress.org
Get WordPress

Make WordPress Core

Changeset 50682


Ignore:
Timestamp:
04/07/2021 12:59:18 AM (6 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:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/package-lock.json

    r50668 r50682  
    40844084                                        "dev": true
    40854085                                },
     4086                                "puppeteer": {
     4087                                        "version": "npm:puppeteer-core@5.5.0",
     4088                                        "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-5.5.0.tgz",
     4089                                        "integrity": "sha512-tlA+1n+ziW/Db03hVV+bAecDKse8ihFRXYiEypBe9IlLRvOCzYFG6qrCMBYK34HO/Q/Ecjc+tvkHRAfLVH+NgQ==",
     4090                                        "dev": true,
     4091                                        "requires": {
     4092                                                "debug": "^4.1.0",
     4093                                                "devtools-protocol": "0.0.818844",
     4094                                                "extract-zip": "^2.0.0",
     4095                                                "https-proxy-agent": "^4.0.0",
     4096                                                "node-fetch": "^2.6.1",
     4097                                                "pkg-dir": "^4.2.0",
     4098                                                "progress": "^2.0.1",
     4099                                                "proxy-from-env": "^1.0.0",
     4100                                                "rimraf": "^3.0.2",
     4101                                                "tar-fs": "^2.0.0",
     4102                                                "unbzip2-stream": "^1.3.3",
     4103                                                "ws": "^7.2.3"
     4104                                        }
     4105                                },
    40864106                                "rimraf": {
    40874107                                        "version": "3.0.2",
    … …  
    58915911                "browserify-aes": {
    58925912                        "version": "1.2.0",
    5893                         "resolved": "http://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
     5913                        "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
    58945914                        "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
    58955915                        "dev": true,
    … …  
    1880418824                        "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
    1880518825                        "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
    18806                 },
    18807                 "puppeteer": {
    18808                         "version": "npm:puppeteer-core@5.5.0",
    18809                         "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-5.5.0.tgz",
    18810                         "integrity": "sha512-tlA+1n+ziW/Db03hVV+bAecDKse8ihFRXYiEypBe9IlLRvOCzYFG6qrCMBYK34HO/Q/Ecjc+tvkHRAfLVH+NgQ==",
    18811                         "dev": true,
    18812                         "requires": {
    18813                                 "debug": "^4.1.0",
    18814                                 "devtools-protocol": "0.0.818844",
    18815                                 "extract-zip": "^2.0.0",
    18816                                 "https-proxy-agent": "^4.0.0",
    18817                                 "node-fetch": "^2.6.1",
    18818                                 "pkg-dir": "^4.2.0",
    18819                                 "progress": "^2.0.1",
    18820                                 "proxy-from-env": "^1.0.0",
    18821                                 "rimraf": "^3.0.2",
    18822                                 "tar-fs": "^2.0.0",
    18823                                 "unbzip2-stream": "^1.3.3",
    18824                                 "ws": "^7.2.3"
    18825                         },
    18826                         "dependencies": {
    18827                                 "find-up": {
    18828                                         "version": "4.1.0",
    18829                                         "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
    18830                                         "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
    18831                                         "dev": true,
    18832                                         "requires": {
    18833                                                 "locate-path": "^5.0.0",
    18834                                                 "path-exists": "^4.0.0"
    18835                                         }
    18836                                 },
    18837                                 "locate-path": {
    18838                                         "version": "5.0.0",
    18839                                         "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
    18840                                         "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
    18841                                         "dev": true,
    18842                                         "requires": {
    18843                                                 "p-locate": "^4.1.0"
    18844                                         }
    18845                                 },
    18846                                 "p-locate": {
    18847                                         "version": "4.1.0",
    18848                                         "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
    18849                                         "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
    18850                                         "dev": true,
    18851                                         "requires": {
    18852                                                 "p-limit": "^2.2.0"
    18853                                         }
    18854                                 },
    18855                                 "path-exists": {
    18856                                         "version": "4.0.0",
    18857                                         "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
    18858                                         "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
    18859                                         "dev": true
    18860                                 },
    18861                                 "pkg-dir": {
    18862                                         "version": "4.2.0",
    18863                                         "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
    18864                                         "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
    18865                                         "dev": true,
    18866                                         "requires": {
    18867                                                 "find-up": "^4.0.0"
    18868                                         }
    18869                                 },
    18870                                 "rimraf": {
    18871                                         "version": "3.0.2",
    18872                                         "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
    18873                                         "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
    18874                                         "dev": true,
    18875                                         "requires": {
    18876                                                 "glob": "^7.1.3"
    18877                                         }
    18878                                 }
    18879                         }
    1888018826                },
    1888118827                "q": {

  • trunk/src/wp-includes/media.php

    r50586 r50682  
    18701870 */
    18711871function wp_img_tag_add_loading_attr( $image, $context ) {
     1872        // Images should have source and dimension attributes for the `loading` attribute to be added.
     1873        if ( false === strpos( $image, ' src="' ) || false === strpos( $image, ' width="' ) || false === strpos( $image, ' height="' ) ) {
     1874                return $image;
     1875        }
     1876
    18721877        /**
    18731878         * Filters the `loading` attribute value to add to an image. Default `lazy`.
    … …  
    18901895                }
    18911896
    1892                 // Images should have source and dimension attributes for the `loading` attribute to be added.
    1893                 if ( false === strpos( $image, ' src="' ) || false === strpos( $image, ' width="' ) || false === strpos( $image, ' height="' ) ) {
    1894                         return $image;
    1895                 }
    1896 
    18971897                return str_replace( '<img', '<img loading="' . esc_attr( $value ) . '"', $image );
    18981898        }
    … …  
    19901990 */
    19911991function wp_iframe_tag_add_loading_attr( $iframe, $context ) {
     1992        // Iframes with fallback content (see `wp_filter_oembed_result()`) should not be lazy-loaded because they are
     1993        // visually hidden initially.
     1994        if ( false !== strpos( $iframe, ' data-secret="' ) ) {
     1995                return $iframe;
     1996        }
     1997
     1998        // Iframes should have source and dimension attributes for the `loading` attribute to be added.
     1999        if ( false === strpos( $iframe, ' src="' ) || false === strpos( $iframe, ' width="' ) || false === strpos( $iframe, ' height="' ) ) {
     2000                return $iframe;
     2001        }
     2002
    19922003        /**
    19932004         * Filters the `loading` attribute value to add to an iframe. Default `lazy`.
    … …  
    20082019                if ( ! in_array( $value, array( 'lazy', 'eager' ), true ) ) {
    20092020                        $value = 'lazy';
    2010                 }
    2011 
    2012                 // Iframes should have source and dimension attributes for the `loading` attribute to be added.
    2013                 if ( false === strpos( $iframe, ' src="' ) || false === strpos( $iframe, ' width="' ) || false === strpos( $iframe, ' height="' ) ) {
    2014                         return $iframe;
    20152021                }
    20162022

  • trunk/tests/phpunit/tests/media.php

    r50448 r50682  
    29422942                $iframe = '<iframe src="https://www.example.com" width="640" height="360"></iframe>';
    29432943                add_filter( 'wp_iframe_tag_add_loading_attr', '__return_false' );
     2944                $iframe = wp_iframe_tag_add_loading_attr( $iframe, 'test' );
     2945
     2946                $this->assertNotContains( ' loading=', $iframe );
     2947        }
     2948
     2949        /**
     2950         * @ticket 52768
     2951         */
     2952        function test_wp_iframe_tag_add_loading_attr_skip_wp_embed() {
     2953                $iframe   = '<iframe src="https://www.example.com" width="640" height="360"></iframe>';
     2954                $fallback = '<blockquote>Fallback content.</blockquote>';
     2955                $iframe   = wp_filter_oembed_result( $fallback . $iframe, (object) array( 'type' => 'rich' ), 'https://www.example.com' );
     2956                $iframe   = wp_iframe_tag_add_loading_attr( $iframe, 'test' );
    29442957
    29452958                $this->assertNotContains( ' loading=', $iframe );
Note: See TracChangeset for help on using the changeset viewer.