Archived topic
Minimizing DOM elements in archive page
5 replies · Started by Prabakaran on February 1, 2022
Hello,
On my website, the elements of DOM contribute to a huge CLS. Could you please review the site content and container elements and suggest me how to minimize the CLS on the https://nviewscareer.com/job/ page.
Hi there,
the CLS is mainly coming from the late loading of the WP Facet search elements and their CSS styles. If you look closely at the Film Strip on a Google Page Speed test you can see it:
https://www.screencast.com/t/JrzwaLGu
This may be related to:
a) how WP Facet loads its content
b) how WP Rocket is optimizing the CSS loading.
The size of the DOM only compounds the issue, as that element expands/shrinks in height it pushes the main container down the page.
Thank you very much for your brief explanation. I am working on optimizing wp-facet and wp-rocket to improve performance.
You're welcome!
Hello, I disabled lazy loading which causes page content shift. Now CLS has dropped from 0.843 to 0.343.
When testing the page (https://nviewscareer.com/job/) without cache (disable cache option) it shows the following elements with high CLS.
1. div#content.site-content (0.143).
2. aside.gb-container.gb-container-e39d3e11 (0.123)
3. div.gb-grid-wrapper.gb-grid-wrapper-0ead8400 (0.039)
4. div.wpgb-sort-facet (0.016)
and max child elements for the following class 1. body.archive.post-type-archive.post-type-archive-job.wp-embed-responsive.post-image-below-header.post-image-aligned-center.sticky-menu-fade.right-sidebar.nav-float-right.separate-containers.header-aligned-left.dropdown-hover
Apart from that, LCP for the element "h2.gb-headline.gb-headline-bc229748.gb-headline-text".
Similarly, on the other page (https://nviewscareer.com/emp/lund-college/), the image was optimized to the right size avoided the lazyload for the featured image, but it occupied high LCP. And the element "section class="gb-container gb-container-22f4bd9b"" caused high CLS (0.108).
Please help me to solve this.
I ran a test on that page and i only see CLS in the sidebar
https://www.screencast.com/t/UgmXybCkX
And looking at the film strip:
https://www.screencast.com/t/T0J3hZSO
You can see that the Facet Filters and search field are again loaded late, which is causing that shift.
This page: https://nviewscareer.com/emp/lund-college/ is 404 ing.
