- This topic has 18 replies, 2 voices, and was last updated 4 years, 1 month ago by
.
Hello
I wanted to ask if you address CLS Score issues in your recent update of jevelin theme:
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.saveatrain.com%2Fblog%2Fapps-download-traveling%2F&tab=desktop
<div class=”lh-audit__description”>These DOM elements contribute most to the CLS of the page.</div>
<div class=”lh-audit__stackpacks”></div>
<table class=”lh-table lh-details”>
<thead>
<tr>
<th class=”lh-table-column–node”>
<div class=”lh-text”>Element</div></th>
<th class=”lh-table-column–numeric”>
<div class=”lh-text”>CLS Contribution</div></th>
</tr>
</thead>
<tbody>
<tr class=”lh-row–even”>
<td class=”lh-table-column–node”>
<div>23 Apps You Need To Download Before Traveling by Carissa Rawson TRAIN FINANCE,…</div>
<div class=”lh-node__snippet”><div class=”content-container sh-page-layout-default”></div></td>
<td class=”lh-table-column–numeric”>
<div class=”lh-numeric”>0.81</div></td>
</tr>
<tr class=”lh-row–odd”>
<td class=”lh-table-column–node”>
<div>Blog Homepage Time Zone Carbon Currency Convert About Buy Train Tickets Trave…</div>
<div class=”lh-node__snippet”><div id=”page-container” class=””></div></td>
<td class=”lh-table-column–numeric”>
<div class=”lh-numeric”>0.257</div></td>
</tr>
<tr class=”lh-row–even”>
<td class=”lh-table-column–node”>
<div>Blog Homepage Time Zone Carbon Currency Convert About Buy Train Tickets Trave…</div>
<div class=”lh-node__snippet”><div class=”sh-table”></div></td>
<td class=”lh-table-column–numeric”>
<div class=”lh-numeric”>0.217</div></td>
</tr>
<tr class=”lh-row–odd”>
<td class=”lh-table-column–node”>
<div>Blog Post Home > Travel Europe > 23 Apps You Need To Download Before Traveling</div>
<div class=”lh-node__snippet”><div class=”sh-titlebar sh-titlebar-mobile-layout-compact sh-titlebar-mobile-title-on”></div></td>
<td class=”lh-table-column–numeric”>
<div class=”lh-numeric”>0.107</div></td>
</tr>
<tr class=”lh-row–even”>
<td class=”lh-table-column–node”>
<div>Reading Time: 12 minutes (Last Updated On: 10/07/2020) Currency appWe recently…</div>
<div class=”lh-node__snippet”><div class=”post-content”></div></td>
<td class=”lh-table-column–numeric”>
<div class=”lh-numeric”>0.097</div></td>
</tr>
</tbody>
</table>Hi @SaveATrain,
I hope you are well today and thank you for your question.
The DOM size is created based on the content of the page and it has nothing to do with the theme.
We recommend you always use the latest version of the theme as below.
Best regards,
Shufflehound teamActually, the issue is the image attached, rounded in RED
so i was wondering if you solved it already or not
I saw your shared screenshot but didn’t understand exactly what is the issue in those DOM elements.
Could you please describe it a bit more?
it seems google is thinking the top bar is moving while the page loads
- also image attached
<div>Blog Homepage Time Zone Carbon Currency Convert About Buy Train Tickets Travel …</div>
<div class=”lh-node__snippet”><ul id=”menu-menu” class=”sh-nav sf-js-enabled” style=”touch-action: pan-y;”></div>In that case, you can deactivate the sticky header in the theme settings as shown in the attached screenshots.
this is actually great, it solved part of the problem
can you tell me what it means sticky header?
can you tell me what does this line do?
<table class=”lh-table lh-details”>
<tbody>
<tr class=”lh-row–odd”>
<td class=”lh-table-column–node”>
<div class=”lh-node__snippet”><ul id=”menu-menu” class=”sh-nav sf-js-enabled” style=”touch-action: pan-y;”></div></td>
<td class=”lh-table-column–numeric”></td>
</tr>
</tbody>
</table>The sticky header means the header that scrolls with the page scroll as displayed on the below demo website.
even without the stick header, google is tagging these options for CLS issues
all of them are div that starts with sh, so this is why i think its under your theme issues and stuff you can test and explore how to fix
Avoid large layout shifts 5 elements found
These DOM elements contribute most to the CLS of the page.
Element
CLS Contribution5 Most Charming Old City Centers In Europe by Paulina Joukov TRAIN TRAVEL AUST…
<div class=”content-container sh-page-layout-default”>
1.034
Blog Homepage Time Zone Carbon Currency Convert About Buy Train Tickets Travel …
<ul id=”menu-menu” class=”sh-nav sf-js-enabled” style=”touch-action: pan-y;”>0.242
Blog Homepage Time Zone Carbon Currency Convert About Buy Train Tickets Trave…
<div class=”sh-table”>0.218
Blog Post Home > Travel Europe > 5 Most Charming Old City Centers In Europe
<div class=”sh-table sh-titlebar-height-small”>
0.111Blog Post Home > Travel Europe > 5 Most Charming Old City Centers In Europe
<div class=”sh-titlebar sh-titlebar-mobile-layout-compact sh-titlebar-mobile-title-on”>
0.107This may be happening because the images and video elements take some time to load.
You can improve your site performance as described in the following pages.
http://www.wpbeginner.com/wordpress-performance-speed/
https://codex.wordpress.org/WordPress_Optimization/WordPress_Performance
https://wpengine.com/blog/page-speed-wordpress-performance/
https://themetrust.com/test-wordpress-site-performance/
To optimize images and load them faster, you can use any of the following plugins.
I Use
autoptimize
wp-optimize
and keycdn
smush
so not sure its the images, can you dig further please
I troubleshoot it but didn’t find anything.
If you don’t find the issue then you can consider hiring a developer to resolve it for you. You can hire a developer from any freelance site.
We will resolve the issue in the theme If it is a theme issue.
can you show me a blog page of yours, that maybe i can run it through page insights,
if it doesn’t have them you are right and its my issue
but can you confirm or deny that this div is related to the theme?
div class=”sh-table
Yes, the div is related to the theme, and please see our below theme demo website.
ok, so you have an issue in your theme that you need to fix,
because your page has the same CLS google issues (https://web.dev/vitals/)
scroll down to: Avoid large layout shifts
Yet we have not updated the theme to the latest version on the demo website but we will troubleshoot the issue.
In the meanwhile, you can fix it as described on the below pages.
https://www.allseobasics.com/seo/fixing-cumulative-layout-shift-cls-in-wordpress/
https://wplift.com/cumulative-layout-shift-wordpress
https://www.namehero.com/startup/how-i-dropped-my-cumulative-layout-shift-cls-to-zero/
please let me know when you fix the cumulative layout shift
does wp-optimize or autoptimize have some settings as you suggested on wp-rocket
Sure, we will notify you here.
I don’t know anything about the setting so please contact the plugin support If you need any help.
