search

laurenashpole / vue-inner-image-zoom

https://laurenashpole.github.io/vue-inner-image-zoom
140 stars 16 forks source link

How to improve lighthouse cumulative layout shift score with this package? #36

Open dosstx opened 2 years ago

dosstx commented 2 years ago

Hi, loving this plugin.

However, I'm a newbie to responsive images in general and I'm having some trouble understanding how I can improve the lighthouse score for the Performance/Cumulative Layout Shift (CLS) section.

With the following code, I get a lighthouse score of 84 due to CLS:

      <InnerImageZoom
        v-if="post.public_id"
        :src="`https://res.cloudinary.com/${$config.cloudinary.cloudName}/f_auto,q_60,w_900/${post.public_id}`"
        :zoom-src="`https://res.cloudinary.com/${$config.cloudinary.cloudName}/c_scale,w_2000,q_auto:best,f_auto/${post.public_id}`"
        :width="post.width" <---- original width of image is: 3096
       :height="post.height" <---- original height of image is: 2591
        :has-spacer="true"
        :alt="post.title"
        :hide-hint="true"
        :src-set="'https://res.cloudinary.com/XXXX/image/upload/f_auto,q_60,w_510/v1640005494/users/ezcOtHHWVrYLZoPvVOCumfubSUa2/uploads/XXXX.jpg 510w,https://res.cloudinary.com/XXXX/image/upload/f_auto,q_60,w_607/v1640005494/users/ezcOtHHWVrYLZoPvVOCumfubSUa2/uploads/XXXX.jpg 607w,https://res.cloudinary.com/XXXX/image/upload/f_auto,q_60,w_689/v1640005494/users/ezcOtHHWVrYLZoPvVOCumfubSUa2/uploads/XXXX.jpg 689w,https://res.cloudinary.com/XXXX/image/upload/f_auto,q_60,w_769/v1640005494/users/ezcOtHHWVrYLZoPvVOCumfubSUa2/uploads/XXXX.jpg 769w,https://res.cloudinary.com/XXXX/image/upload/f_auto,q_60,w_841/v1640005494/users/ezcOtHHWVrYLZoPvVOCumfubSUa2/uploads/XXXX.jpg 841w,https://res.cloudinary.com/XXXX/image/upload/f_auto,q_60,w_900/v1640005494/users/ezcOtHHWVrYLZoPvVOCumfubSUa2/uploads/XXXX.jpg 900w'"
      />

Whereas, with the following code like so, I get a score of 100:

      <img
       class="img-fluid"
        :src="`https://res.cloudinary.com/${$config.cloudinary.cloudName}/f_auto,q_60,w_900/${post.public_id}`"
        :src-set="'https://res.cloudinary.com/XXXX/image/upload/f_auto,q_60,w_510/v1640005494/users/ezcOtHHWVrYLZoPvVOCumfubSUa2/uploads/XXXX.jpg 510w,https://res.cloudinary.com/XXXX/image/upload/f_auto,q_60,w_607/v1640005494/users/ezcOtHHWVrYLZoPvVOCumfubSUa2/uploads/XXXX.jpg 607w,https://res.cloudinary.com/XXXX/image/upload/f_auto,q_60,w_689/v1640005494/users/ezcOtHHWVrYLZoPvVOCumfubSUa2/uploads/XXXX.jpg 689w,https://res.cloudinary.com/XXXX/image/upload/f_auto,q_60,w_769/v1640005494/users/ezcOtHHWVrYLZoPvVOCumfubSUa2/uploads/XXXX.jpg 769w,https://res.cloudinary.com/XXXX/image/upload/f_auto,q_60,w_841/v1640005494/users/ezcOtHHWVrYLZoPvVOCumfubSUa2/uploads/XXXX.jpg 841w,https://res.cloudinary.com/XXXX/image/upload/f_auto,q_60,w_900/v1640005494/users/ezcOtHHWVrYLZoPvVOCumfubSUa2/uploads/XXXX.jpg 900w'"
        :width="post.width"
        :height="post.height"
        alt="testimage"
      />

Does anyone have any tips on how I can improve the CLS score when using the vue inner image zoom library in Vue2 (I am actually using NuxtJS, but that should be the same)?

Thanks!

laurenashpole commented 2 years ago

When you set width, height, and hasSpacer, it should insert a wrapper around your image with padding-bottom set to save the space that your image will load into. If you inspect the original image are you seeing that div? If not I'll have to look into whether using it in combination with Nuxt is causing unexpected issues.