Unable to improve CLS

[PrestameMucho]

Hello,

I have recently taken a web for improving its core vitals. I have gone from 19 points to 70ish. But I am a bit stuck with the CLS. I know where it comes from (the sliders).

 

I am struggling with the pictures. Can prestashop generate the thumbnails in webp? How can I specify an explicit width and height as suggested by pagespeed.web.dev.

 

https://pagespeed.web.dev/analysis/https-gregariobikes-com/mfd45stkx8?form_factor=mobile

 

Thank you in advance.

[El Patron]

for sliders we set first image as high priority, remaining sliders to low...

1st slider fetchpriority high

2nd nth low

for example:

You can use fetchpriority="low" to lower the priority of above-the-fold images that may not be important for example in an image carousel.

<ul class="carousel"> <img src="img/carousel-1.jpg" fetchpriority="high"> <img src="img/carousel-2.jpg" fetchpriority="low"> <img src="img/carousel-3.jpg" fetchpriority="low"> <img src="img/carousel-4.jpg" fetchpriority="low"> </ul>

I don't recommend sliders but 'css boxes' containing content with link to that content.  For some reason PS users feel it's necessary to have sliders, check landing pages of walmart.com amazon.com unless the image is 'very light'.  ok newegg.com uses sliders, so you may want to study what the media is.

 

we have two new modules (built for clients) we have on our website but we suck at marketing,  they remove render blocking for .css and .js files...

https://prestaheroes.com/collections/performance

 

tip: I see a lot of time spent on index pages, from design to performance.  the index page upon landing, above the fold, should provide navigation to categories or other  imporant parts of your catalog.  Below the fold remove all useless features that comes with thems and some think important, new/featured/etc...

 

78% of people will not scroll...we don't really even want people landing on index, in a product search but if they do they don't want to be there, make above the fold navigation....

good luck!

 

[PrestameMucho]

            <div id="carousel" data-ride="carousel" class="carousel slide" data-interval="{$homeslider.speed}" data-wrap="{(string)$homeslider.wrap}" data-pause="{$homeslider.pause}">
                <ul class="carousel-inner" role="listbox">
                    {foreach from=$homeslider.slides item=slide name='homeslider'}
                        <li class="carousel-item {if $smarty.foreach.homeslider.first}active{/if}" role="option" aria-hidden="{if $smarty.foreach.homeslider.first}false{else}true{/if}">
                            <a href="{$slide.url}">
                                <figure>
                                    <img src="{$slide.image_url}" alt="{$slide.legend|escape}" fetchpriority="low">
                                    {if $slide.title || $slide.description}
                                        <figcaption class="caption">
                                            <h2 class="display-1 text-uppercase">{$slide.title}</h2>
                                            <div class="caption-description">{$slide.description nofilter}</div>
                                        </figcaption>
                                    {/if}
                                </figure>
                            </a>
                        </li>
                    {/foreach}
                </ul>
                <div class="direction" aria-label="{l s='Carousel buttons' d='Shop.Theme.Global'}">
                    <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
                        <span class="icon-prev hidden-xs" aria-hidden="true">
                            <i class="material-icons">&#xE5CB;</i>
                        </span>
                        <span class="sr-only">{l s='Previous' d='Shop.Theme.Global'}</span>
                    </a>
                    <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
                        <span class="icon-next" aria-hidden="true">
                            <i class="material-icons">&#xE5CC;</i>
                        </span>
                        <span class="sr-only">{l s='Next' d='Shop.Theme.Global'}</span>
                    </a>
                </div>
            </div>

That is the code I have. I tried switching all to low priority but didnt work out.

 

I cannot agree more with you I want a landing page that funnel all possible clients to their desired section. I would be quite lucky if they find the product they want at first sight.

 

I have had a look to amazon.com and I am not sure if they are sliders but you can scroll horizontally. Is there any PS module that does that?

 

I am starting at the moment and running a bit low on budget :s

 

 

[El Patron]

3 hours ago, PrestameMucho said:

            <div id="carousel" data-ride="carousel" class="carousel slide" data-interval="{$homeslider.speed}" data-wrap="{(string)$homeslider.wrap}" data-pause="{$homeslider.pause}">
                <ul class="carousel-inner" role="listbox">
                    {foreach from=$homeslider.slides item=slide name='homeslider'}
                        <li class="carousel-item {if $smarty.foreach.homeslider.first}active{/if}" role="option" aria-hidden="{if $smarty.foreach.homeslider.first}false{else}true{/if}">
                            <a href="{$slide.url}">
                                <figure>
                                    <img src="{$slide.image_url}" alt="{$slide.legend|escape}" fetchpriority="low">
                                    {if $slide.title || $slide.description}
                                        <figcaption class="caption">
                                            <h2 class="display-1 text-uppercase">{$slide.title}</h2>
                                            <div class="caption-description">{$slide.description nofilter}</div>
                                        </figcaption>
                                    {/if}
                                </figure>
                            </a>
                        </li>
                    {/foreach}
                </ul>
                <div class="direction" aria-label="{l s='Carousel buttons' d='Shop.Theme.Global'}">
                    <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
                        <span class="icon-prev hidden-xs" aria-hidden="true">
                            <i class="material-icons">&#xE5CB;</i>
                        </span>
                        <span class="sr-only">{l s='Previous' d='Shop.Theme.Global'}</span>
                    </a>
                    <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
                        <span class="icon-next" aria-hidden="true">
                            <i class="material-icons">&#xE5CC;</i>
                        </span>
                        <span class="sr-only">{l s='Next' d='Shop.Theme.Global'}</span>
                    </a>
                </div>
            </div>

That is the code I have. I tried switching all to low priority but didnt work out.

 

I cannot agree more with you I want a landing page that funnel all possible clients to their desired section. I would be quite lucky if they find the product they want at first sight.

 

I have had a look to amazon.com and I am not sure if they are sliders but you can scroll horizontally. Is there any PS module that does that?

 

I am starting at the moment and running a bit low on budget :s

 

 

Hi you want first to be high, rest low...or make all high...which is better than  all  low

[PrestameMucho]

I took out all of them and I still was having issues. Whats the most efficient way here? Shall I Install a new theme?

[El Patron]

1 hour ago, PrestameMucho said:

I took out all of them and I still was having issues. Whats the most efficient way here? Shall I Install a new theme?

Most effective way is to have experienced person or agency help you with performance.  Me?  I find some ps admins focused on performance, which requires a lot of experienced to understand where to even start.  Some people are actually go insane  with it  all, then  they look for magic bullet like a cache module which rarely if ever do more than break your shop in unexpected ways.

What I  highly recommend is using 

https://www.webpagetest.org/

gives you solutions to existing problems and allows 'experiments'....recommended by g, when running lighthouse, they even mention....

there you will get much better idea of what parts need to be improved, that actually make a difference.  The other thing to understand is that google measures 'above the  fold' render, not how fast your footer loads...

for best performance improvement, get hosting with nvme to ssd.....all cpus are waiting for data,  best bang for the buck....

look, for ecommerce,  google already knows number of visits, number of pages, abandoned and cart completion...this tells them if good/bad visitors experience, so you should be focusing on ensuring your shop presents visitor info above the fold.

of course work on improving performance but first learn what is important....do it little by little...but otherwise work on selling