Home › Forums › All Other Themes › cls problem
- This topic has 11 replies, 2 voices, and was last updated 2 years, 11 months ago by Sonl Sinha.
-
AuthorPosts
-
January 13, 2022 at 11:24 am #189395
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!January 13, 2022 at 6:55 pm #189413Hi,
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,
ChrisJanuary 13, 2022 at 7:50 pm #189414Dear 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!January 14, 2022 at 11:10 am #189428Hi,
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,
ChrisJanuary 14, 2022 at 11:26 am #189432I copied it to the custom css, cleared cache but nothing changed unfortunately.
January 14, 2022 at 11:44 am #189435Hi,
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,
ChrisJanuary 14, 2022 at 11:49 am #189437If 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.
January 14, 2022 at 11:54 am #189438Hi,
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,
ChrisJanuary 14, 2022 at 3:52 pm #189446Thanks 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,
January 14, 2022 at 7:14 pm #189456Hi,
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,
ChrisJanuary 14, 2022 at 8:28 pm #189457I copied but nothing changed. NOt cache problem
I also tried
.skt-builder-image-text-block-198 {
padding-top: 80px !important;
}January 17, 2022 at 10:48 am #189486Hi,
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 -
AuthorPosts
- You must be logged in to reply to this topic.