Simple Omelette Recipe

Community feedback

• 

  Abdul Khaliq 🚀•72,580

  @0xabdulkhaliqPosted 6 months ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have a suggestion regarding your code that I believe will be of great interest to you.

  ---

  PREVENT LAYOUT SHIFTS 📉:

  • Your solution needs to be improved to prevent Cumulative Layout Shift (CLS) which results a visually unstable or janky website, particularly on mobile devices.

  ---

  • Image and/or video elements that aren't explicitly declared with height and width attributes are usually re-sized using CSS (either on the image itself or the parent container). When this happens, the browser can only determine their dimensions and allocate space for them once it starts downloading the 'unsized images' and/or videos.

  ---

  • You may notice that when the browser fetches these images, your page content is constantly being pushed down or moved around from its original position (i.e., layout shifts) as the browser resizes the images and positions them on your page.

  ---

  • Currently the img element have no explicit width and height to prevent CLS,

  <img src="assets/omelete.svg" alt="">
  

  • Here's an example which could help you to prevent CLS,

  <img src="assets/omelete.svg" alt="" width="656" height="300">
  

  • The height and width needs to have the actual measurements of that corresponding image.

  ---

  • I would like to recommend the article Use explicit width and height on image elements from GTMetrix to learn more about Layout Shifts and why's it needs to be prevented.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  1
• 

  P

  Vitoria Fonseca•230

  @vitorianfonsecaPosted 6 months ago

  Well done :)

  Marked as helpful

  1