search

lansingcodes / www

Events and resources for Lansing coders
https://www.lansing.codes
Other
7 stars 16 forks source link

Set explicit height and width on img elements #148

Closed egillespie closed 2 years ago

egillespie commented 2 years ago

Describe the bug

From the Chrome Lighthouse performance audit:

image

Without explicit height and width attributes on the img elements, the browser will need to adjust the layout after every image is downloaded to make room for the content. Setting explicit image dimensions allows the browser to avoid additional layout adjustments, reduces movement of page content, and shortens the duration of the full page render.

To Reproduce

  1. Open https://lansing.codes in a new Chrome Incognito window
  2. Open Chrome DevTools
  3. Select the Lighthouse tab
  4. Check "Performance" and "Desktop"
  5. Run the audit

Expected behavior

The browser should be able to use the height and width to adjust the layout of the page before images are downloaded and the Lighthouse audit should no longer report this issue for any image.

See Images Without Dimensions for more information about this issue and how to fix it.

⚠️ Make sure that mobile/responsive image sizes are either not affected or adjusted along with this change.

egillespie commented 2 years ago

The Lighthouse report no longer includes this issue in staging: image