Exercise 3: Which Core Web Vitals Metric Missing Image Dimensions Harms — Possible Solution ==================================================================== THE ANSWER: CLS (CUMULATIVE LAYOUT SHIFT) ------------------------------ Stripping out the width and height attributes WordPress normally adds automatically to images most directly harms CLS. WHY, PER THIS CHAPTER'S OWN MATERIAL ------------------------------ Per this chapter's own warn-box, "WordPress automatically outputs explicit width and height attributes on images in most standard contexts - a real, built-in CLS protection, since the browser can reserve the correct space before the image finishes loading." With those attributes present, the browser knows the image's exact dimensions before the image file has even finished downloading, and can immediately reserve that exact amount of space in the page layout - nothing else on the page needs to shift once the image actually appears, because the space was already correctly allocated in advance. WHY REMOVING THOSE ATTRIBUTES CAUSES A LAYOUT SHIFT ------------------------------ Without width/height attributes, the browser has no way to know how much space an image will need until the image file itself has actually finished loading and its real dimensions become known. Until then, the browser typically renders the surrounding content as if the image occupied zero space - once the image finally loads and its true size becomes known, everything below and around it has to suddenly shift to make room, which is precisely what Cumulative Layout Shift measures: unexpected, visible movement of content after the page has already started rendering. WHY THIS CHAPTER CALLS THIS A "REAL, WORDPRESS-SPECIFIC RISK" ------------------------------ Per this chapter, "a common mistake in custom theme development is stripping these attributes out (often unintentionally, through custom image-output code), reintroducing the exact layout-shift risk WordPress's own defaults were already preventing." The risk is specifically framed as WordPress-relevant because WordPress already solves this problem automatically by default - the vulnerability only appears when a theme developer's own custom code accidentally overrides or bypasses that existing default protection, often without realizing they've done so. WHY THIS ISN'T PRIMARILY AN LCP OR INP ISSUE ------------------------------ This chapter's own metric-mapping table associates image handling generally with LCP (via lazy loading, responsive sizing, compression), but the SPECIFIC issue of missing width/height attributes is distinctly a CLS problem - it has nothing to do with how quickly the image loads (LCP) or how responsive the page is to interaction (INP); it's entirely about whether the page's own layout stays visually stable while the image is loading. WHY THIS WORKS AS AN ANSWER ------------------------------ It names the correct specific metric, explains the precise mechanism (reserved space vs. unknown space causing shift) using this chapter's own reasoning, and explicitly distinguishes this issue from the more general LCP-focused image techniques covered elsewhere in the same chapter.