Flexislider Speed Optimisation

Question

Am I missing a way to optimise the flexislider load time. The LCP on the page speed is very high on the site and I would like to make the slides smaller, as at the moment they seem to be 1140 and I can't see where in the css that is coming from?

The image is only 900 x 442 but it gets rendered to 1140 x 560 ?

Compared to https://themes.semicolonweb.com/html/canvas/slider-flex.html this site, with only one image is taking much longer to load it seems?

div class="fslider" data-easing="easeInQuad">
<div class="flexslider">
<div class="slider-wrap">
<div class="slide">
[

Professional Car Valeting

Either visit our Studio Workshop in Brighton
or use our Mobile Valeting Service where we come to you right across East & West Sussex

](car-valeting.html)
</div>

SemiColonWeb · Accepted Answer

Hello,

The issue is that the Flex Slider loads on Page Load and since you are using the Flex Slider for the Main Slider which is visible by default, it affects the LCP. Also, the Flex Slider is responsive and will take the size of the container, so it is getting resized.

This can be improved in the New Versions of Canvas by using a Placeholder Image, but since you are using a very old version of Canvas, this is currently not supported. We recommend updating to the Latest Version and we can provide you with further assistance on this.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

GavinBaylis · Answer

Can that placeholder image have copy text on it, like I currently have with the Flexislider Caption please? Thanks

Semicolon Web · Answer

Hello,

You can use the same Flex Slider caption on the Placeholder Image. Simply wrap it inside a div Tag with the .position-relative Class. That's it.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.