Jump to content

Edit History

TecMikro

TecMikro

[SOLVED] 

I had high CLS in mobile (Prestashop 1.7.7.8). The solution was to use aspect ratio boxes (https://css-tricks.com/aspect-ratio-boxes/). I added the following CSS code in /themes/child_classic/assets/css/custom.css (I'm using child theme): 

.images-container {
  height: 0;
  overflow: hidden;
  padding-top: 100%;
  background: white;
  position: relative;
}

.product-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Now CLS is 0.012 (Mobile) and 0.002 (Desktop) in PageSpeed Insights. This is a partial solution as in desktop view the thumbnail carousel at the bottom of the main product image is hidden (for products that have more than one image). Possibly the best option is to update to version 1.7.8.x of Prestashop, which improves the CLS and other parameters that Google requires.

TecMikro

TecMikro

[SOLVED] 

I had high CLS in mobile (Prestashop 1.7.7.8). The solution was to use aspect ratio boxes (https://css-tricks.com/aspect-ratio-boxes/). I added the following CSS code in /themes/child_classic/assets/css/custom.css (I'm using child theme): 

.images-container {
  height: 0;
  overflow: hidden;
  padding-top: 100%;
  background: white;
  position: relative;
}

.product-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Now CLS is 0.012 (Mobile) and 0.002 (Desktop) in PageSpeed Insights.

TecMikro

TecMikro

[SOLVED] 

I had high CLS in mobile (Prestashop 1.7.7.8). The solution was to use aspect ratio boxes (https://css-tricks.com/aspect-ratio-boxes/). I added the following CSS code in /themes/child_classic/assets/css/custom.css (I'm using child theme): 

.images-container {
  height: 0;
  overflow: hidden;
  padding-top: 100%;
  background: white;
  position: relative;
}

.product-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

 

TecMikro

TecMikro

[SOLVED] 

I had high CLS in mobile (Prestashop 1.7.7.8). The solution was to use aspect ratio boxes (https://css-tricks.com/aspect-ratio-boxes/). I added the following CSS code in /themes/classic/assets/css/custom.css: 

.images-container {
  height: 0;
  overflow: hidden;
  padding-top: 100%;
  background: white;
  position: relative;
}

.product-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

 

×
×
  • Create New...