Archived topic
Avoid an excessive DOM size (Inline SVG or SVG file tag)?
3 replies · Started by MK on November 10, 2020
Hi, Google PageSpeed Insights recommends me to "Avoid an excessive DOM size" because my homepage https://wpmeow.com have a lot of Inline SVG icons/images, some are from Flaticon website.
If some of Flaticon icons/images use with SVG file <img> tag instead of Inline SVG, the problem will be solved.
But actually when should we use Inline SVG and SVG file <img> tag? I have a little bit confused about it.
Hi there,
i wouldn't be overly concerned about that Diagnostic. It becomes an issue when the DOM has over a total of 1500 nodes, a greater Depth of 32 nodes and a parent element has over 60 child nodes.
However to answer your question. The case for inline SVGs:
1. They are contextual ie. a button icon or a prefix to a headline.
2. They have a small number of child nodes e.g paths. I rarely use SVGs with more that 15 paths. So maybe a ceiling of 30 would be a good cap.
I think at least one of these rules should apply before using them.
The main culprit on your site is the WP_Maintenance_Security icon which is being flagged as having 56 child elements. Considering that it is neither a button or a supplement to a headline but a standalone image, i would add this as an <img>
This site is good for optimizing SVGS:
https://jakearchibald.github.io/svgomg/
Its not going to magically reduce a large number of nodes but it will remove some of the 'fluff' that gets added to SVGs.
Hi David,
Thank you for the reply and advice. I will follow it.
Thank you for the SVG optimization tool you recommended. I just optimized WP_Maintenance_Security icon and all others SVG icons. Really very nice and good.
After optimized WP_Maintenance_Security icons, the Diagnostic no longer has this recommendation (Avoid an excessive DOM size). =)
Thats great to hear! Glad to be of help
