> Make sure you define a width and a height for all images on your webpage. This helps save time since the browser doesn’t have to do the work of calculating the dimensions.
This isn't correct in my opinion (it might be technically but not to a level where anyone would notice it), what it actually does it reserves the space in advance for the image as the rest of the page loads. If you don't do this then what happens is that the content keeps being pushed down which makes it seem like it's loading slower. So this impacts perceived loading time over actual loading time.
> what happens is the content keeps being pushed down
What happens is that the browser is re-flowing and re-painting part or all of the page, rather than updating just the area the image is known to occupy. Reflows are expensive, particularly on mobile.
Also of note is that in some circumstances (as mentioned in the link above,) the browser may have to delay rendering some parts of the page until it knows the dimensions of either the image or one of its containing elements, which means rendering the container might have to wait until it fetches enough of the image to calculate the height and width.
This isn't correct in my opinion (it might be technically but not to a level where anyone would notice it), what it actually does it reserves the space in advance for the image as the rest of the page loads. If you don't do this then what happens is that the content keeps being pushed down which makes it seem like it's loading slower. So this impacts perceived loading time over actual loading time.