Product preview card

Community feedback

• 

  P

  Steven Stroud•11,910

  @StroudyPosted 3 months ago

  Hey, I can't give many pointers as I haven't used those technology, But some things I noticed,

  • Setting a height and width attribute to your <img> will increase performance to reduce layout shifts and improve CLS, It reserves the space on the page for the image,
  • Page is blocked from indexing, Search engines are unable to include your pages in search results if they don't have permission to crawl them x-robots-tag: noindex.

  I look forward to seeing more from you and I hope to use svelte soon!

  Marked as helpful

  1

  ---

  

  AriyanSep0_0•330

  @ARiYaNSEp0-0Posted 3 months ago

  @Stroudy hi. good comment and good problem you mentioned but I am not sure if setting aspect ratio would fix that. the solution (which is recommended by many performance test tools) is using width and height attribute. with these attribute image have fix size even when not loaded then when image and css are loaded we don't have shifts anymore

  Marked as helpful

  2

  

  P

  Steven Stroud•11,910

  @StroudyPosted 3 months ago

  @ARiYaNSEp0-0 Hey, I just did a deeper dive and you are correct, setting an aspect ratio for an image in CSS will ensure that the image maintains a specific height and width ratio, but it does not inherently provide the image with a specific height or width. Thank you for bringing that to my attention! :D Updated my comment, let me know if there is anything else I misunderstood I highly appreciate it!

  1

  

  AriyanSep0_0•330

  @ARiYaNSEp0-0Posted 3 months ago

  @Stroudy your welcome my friend. I am glad that it was helpful for you

  1

  

  P

  Tsukimi•780

  @hikawiPosted 3 months ago

  Thank you both c:

  1