[Resolved] Avoid an excessive DOM size (Inline SVG or SVG file tag)?

[MK]

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.

[David]

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.

[MK]

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). =)

[David]

Thats great to hear! Glad to be of help

[Author]

Posts