cls problem

[Attila Nagy]

Hi,

Ia have problem with one of my pages loading time. https://www.doctorhouse.hu/laptop-szerviz-arak/
The CLS (Cumulative Layout shift) is huge when loading desktop site (0.645)
I use wp-rocket which helps with most of my pages but this one is still not good.
Can you please help me with that?
Thank you!

[Sonnal S Sinha]

Hi,

Kindly use compressjpeg.com or tinypng.com to reduce sizes and compress all your images and reupload them.

Lastly kindly use WP Fastest Cache plugin and ask hosting to have Zend Op Cache and PHP Server cache applied to your site or if they have NGINX available get them to use that.

With all the above steps i am sure your site will be faster. Theme is just part of the entire WordPress website ecosystem and our themes are coded to be faster.

Rest are all generic points i mentioned here.

Regards,
Chris

[Attila Nagy]

Dear Chris!

I already have done everything you wrote (caching, minifing pictures) and the site is fast in general.
I only have problem with this one page https://www.doctorhouse.hu/laptop-szerviz-arak/
The porblem itself is that the whole element with the prices loads in to the left side of the screen first
then it shifts to the middle. That is causing the large cls number.
Is it possible to load it directly to the middle?
I do not mind paying for you to do some programming if needed.
thanks!

[Sonnal S Sinha]

Hi,

Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

.skt-builder-container { box-sizing: border-box; margin: 0 auto; max-width: 1170px; padding-left: 15px; padding-right: 15px;}
.skt-builder-columns-row-2column .skt-builder-column { width: 50%;}
.skt-builder-column { box-sizing: border-box; float: left; margin-bottom: 30px; padding-left: 15px; padding-right: 15px;}
.skt-builder-menu-column .skt-builder-menu-column-info { margin-bottom: 20px; position: relative; padding-right: 100px;}
.skt-builder-menu-column .skt-builder-menu-column-price { position: absolute; right: 0; top: 0; font-size: 22px; font-weight: bold; z-index: 9;}
.skt-builder-menu-column .skt-builder-menu-column-image { border-radius: 5px; float: left; margin-right: 30px; margin-bottom: 20px; max-width: 32%;}

Regards,
Chris

[Attila Nagy]

I copied it to the custom css, cleared cache but nothing changed unfortunately.

[Sonnal S Sinha]

Hi,

Can you send us the screenshot of your issues after adding CSS? Upload your screenshot on https://imgbb.com/ and paste the share url here.

Regards,
Chris

[Attila Nagy]

If you visit the site https://www.doctorhouse.hu/laptop-szerviz-arak/ in any browser you will see that content is loaded to the left side of the screen then it moves to the middle. I cannot take a screenshot of this, rather a video, but you can see any time if you load the page.

[Sonnal S Sinha]

Hi,

This is done.

Kindly delete cache and do a forced refresh.

To do a forced refresh kindly follow below instructions:

Windows/Linux:
1. Hold down Ctrl and click the Reload button.
2. Or, Hold down Ctrl and press F5.

Mac:
1. Hold Shift and click the Reload button.
2. Or, hold down Cmd and Shift key and then press R.

Regards,
Chris

[Attila Nagy]

Thanks now loading time for CLS is perfect.

I have a new little problem now: the top-padding is missing now at the start page at the sections: Szolgáltatásaink, Márkafüggetlen notebook szerviz, Műhelytitkok, Fejlesztésünk a címlapon.
AND on the site https://www.doctorhouse.hu/laptopszerviz/ top-padding is also missing and padding between the first and second and third section (3rd is the google map) is too big.

THanks,

[Sonnal S Sinha]

Hi,

Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

#skt-builder-image-text-block-198 {
  padding-top: 80px !important;
}

Regards,
Chris

[Attila Nagy]

I copied but nothing changed. NOt cache problem
I also tried
.skt-builder-image-text-block-198 {
padding-top: 80px !important;
}

[Sonnal S Sinha]

Hi,

We checked, this is working fine.

Can you send us the screenshot of your issues after adding CSS? Upload your screenshot on https://imgbb.com/ and paste the share url here.

Regards,
Chris

[Author]

Posts