Archived topic
Code Causing DOM Issues
5 replies · Started by Monkeys and Mountains on April 10, 2021
I added the following code on all my posts (sample: https://monkeysandmountains.com/tour-du-mont-blanc-trek/) to get rid of the affiliate disclosure plugin I was using under functions.php
/* Add Affiliate Disclosure To All Posts */
function disclosure_the_content( $content ) {
if (is_singular(‘post’)) {
$custom_content = ‘<p class=”disclosure”><font size=”1″>This post may include affiliate links, including Amazon Associate links. I may earn money if you click on one at no extra cost to you.</font></p>’;
$custom_content .= $content;
return $custom_content;
} else {
return $content;
}
}
add_filter( ‘the_content’, ‘disclosure_the_content’ );
but it’s now causing the following issue in Google Speed Report under Excessive DOM Size
Maximum Child Elements
This post may include affiliate links, including Amazon Associate links. I may …
Value 156
How do I fix this?
Thank you
Hi there,
odd that disclosure element would tip you over the Excess DOM element threshold - and i am not sure thats the issue.
But lets try this instead:
1. Remove that PHP Snippet.
2. Create a new Hook Element.
2.1 Add you disclosure HTML to the content.
2.2 Select the generate_after_entry_title hook
2.3 Set the Priority to 30
2.4 Set the Display Rules to Post > All Posts.
That will place the disclosure after the title but outside of the entry-content container which is being flagged for excessive DOM elements.
I also thought it was strange.
Your suggestion worked, so thank you for that, but then it created the issue below which is the first text in the article. I checked and the same issue is now showing on each post.
Maximum Child Elements
The Tour du Mont Blanc Trek (TMB) is not only one of the most popular hikes in …
Please advise.
Thank you
The issue comes down to the amount of content in your posts - every paragraph, image, etc you add to the post content counts as a Child Node of the: <div class="entry-content"> parent element.
If thats greater than 60 then Google flags it as an issue. It only really becomes an issue if you have a large amount of CSS loading that cause performance issues on lower spec devices. Note: recall from previous topics the Thrive plugin is adding a shed load of CSS and something they should address ( by not loading all the CSS where its no required ).
Unfortunately today - the only way of eliminating the issue is to reduce the amount of content, or break the posts up into multiple pages.
The future which is kinda here today is to use the new Content Visibility CSS options - see here:
https://web.dev/content-visibility/
But that effectively means editing every post and breaking the content into 'sections' that are only loaded when there about to be scrolled into view.
Ultimately if you're not seeing an issue with layouts or styling then it is something that can be ignored as it doesn't directly affect the PSI scores.
Hi David, very useful, thank you as always for your great support. I really appreciate it. Still looking into an alternative for Thrive Leads to address the CSS issue.
Thank you again.
You're welcome - glad we can be of help!
