[wp-trac] [WordPress Trac] #50367: Avoid layout shifting due to images not having dimension attributes
WordPress Trac
noreply at wordpress.org
Thu Jun 11 21:37:34 UTC 2020
#50367: Avoid layout shifting due to images not having dimension attributes
--------------------------------------+-----------------------
Reporter: flixos90 | Owner: flixos90
Type: defect (bug) | Status: assigned
Priority: normal | Milestone: 5.5
Component: Media | Version:
Severity: normal | Resolution:
Keywords: has-patch has-unit-tests | Focuses:
--------------------------------------+-----------------------
Comment (by adamsilverstein):
Nice work @flixos90! This worked well in my testing.
* I created a test post with a single medium image and left aligned it
next to a block of text.
* Tested loading the post using a throttled connection to simulate a slow
load experience.
Result:
Before the patch the text shows a square block, then jumps around once the
image loads to make room for it. After the patch the image width/height is
included in the img src tag (when I view the html), so the browser shows a
blank space while the image is loading, which the text wraps around. Once
the image loads, no jumping occurs - the text is already in the right
spot. Attaching some screencast gifs of my tests.
This feels like a great improvement: one question though - why are these
images missing the width/height in the first place when inserted with the
block editor? I'm guessing this is discussed on the issue you linked, I
haven't read the entire thing :)
For now though, many users are sure to have created content that includes
image tags lacking width/height attributes. This change will likely
provide measurable improvements in reducing cumulative layout shift for
these sites. Let's get this in before 5.5 beta so it can get some wider
testing.
--
Ticket URL: <https://core.trac.wordpress.org/ticket/50367#comment:5>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform
More information about the wp-trac
mailing list