22389 Characters added to DOM

Hi @ellasbubbles

These attributes are present on the slides of your sliders, and according to the warning the content of your first slide is 26936 characters long.

Normally, if you don’t have any content added to a slide, then that element and its children should consist of 400-500 characters approximately. Which means you have around ~26400 characters long content in that particular slide.

If you want to get rid of that warning, then consider reducing the length of the content that you display in the slides of your slider, as most likely they are too long.

Tip: even if you hide elements, their HTML will still contribute to DOM size, so please make sure you check the elements that you hid with the “Hide On” setting as well:

• https://smartslider.helpscoutdocs.com/article/1812-layer-style#responsive

Best regards,
Laszlo.

• This reply was modified 2 months ago by Laszlo.
• This reply was modified 2 months ago by Laszlo.

Thank you for the reply. This is just an image slider, in our first slide, we only have a single image. How does this amount to 26,400 characters?

View post on imgur.com

@ellasbubbles

Unfortunately it is not possible to tell this from only screenshots. So please send us a link of the page where you see this problem, and we will take a look.

If you don’t want to share the URL of your site on this public forum, then feel free to open a support ticket here:

• https://smartslider3.com/contact-us/support/

and we will continue this topic there.

https://ellasbubbles.com/accessible-showers/ella-roll-in-wheelchair-accessible-shower-base-48×37-center-drain/

Hi @ellasbubbles

I tried to check the link that you provided above, but it returns a “404 – PAGE NOT FOUND!” error.

Could you check the link, please?

Here is a new link: https://ellasbubbles.com/accessible-showers/ella-roll-in-wheelchair-accessible-shower-base-60×30-left-right-drain/

@ellasbubbles

I checked the linked page, and the HTML element of the first slide ( the one with the data-id=”1016″ attribute ) – that I marked in my screenshot – consists of 2129 characters. So the tool that you used calculated the character count wrong.

I also checked the character count of your entire slider, and that consists of ~28000 characters, but I need to mention that your slider has 12 slides, each with layers on them and the more slides you use, the bigger the character count will be. So if you want to reduce the character count, you should reduce the number of slides.

Also if you added the images as Slide background images:

• https://smartslider.helpscoutdocs.com/article/1724-slide#image

instead of layers, maybe you could save some extra characters with that too.

Edit:

Your slides also have long titles, and that further increases the character count. Consider minimizing the length of both the Slide Title and Slide Descriptions:

https://smartslider.helpscoutdocs.com/article/1724-slide#content

• This reply was modified 2 months ago by Laszlo.

We understand there are adjustments we can make to minify this amount, although 90% of the code/HTML is still attributed to the default configuration/wrapping of SS Slider. This may be a consideration worth addressing in future versions as the web leans to a more efficiency standard; and that your plugin is currently flagged as a top attribute for Code/Content Ratio: https://i.imgur.com/YraAxTt.png

@ellasbubbles

I am sorry, but there is nothing on our end that we could do with your “text to HTML” ratio, as it depends entirely on how your build the content of the page where you display the slider and the way your built the content of your slider.

As you told me earlier you built a slider that displays only images, and by doing so you are just decreasing the text ratio compared to the HTML ratio even further. To understand it better, this is the HTML of a single Image layer in one of your slides

<div class="n2-ss-layer n2-ow n-uc-F0D76uPgBX97 n2-ss-layer--need-height" data-pm="normal" data-sstype="layer"><picture class="n2-ow-all skip-lazy" data-skip-lazy="1"><source srcset="https://ellasbubbles.com/wp-content/uploads/slider/cache/83dae84ca825ed4dd573cac136c151ff/intallation-collapsible-dam-shower-base-ellas-bubbles-.webp" type="image/webp" class="skip-lazy" data-skip-lazy="1"><img decoding="async" alt="intallation-collapsible-dam-shower-base-ellas-bubbles-" class="n2-ss-item-content  n2-ss-item-image-area skip-lazy" style="object-fit:cover;object-position:43% 78%;" loading="eager" width="800" height="800" data-skip-lazy="1" src="https://ellasbubbles.com/wp-content/uploads/2024/06/intallation-collapsible-dam-shower-base-ellas-bubbles-.webp" title="Ella Roll-in Wheelchair Shower Base 60x30 - Left/Right Drain - intallation collapsible dam shower base ellas bubbles |"></picture></div>

on its own this single image results in 891 generated characters, of course you have other images as well with larger and lower character counts.

We need to use a container around the picture so you can apply styles over the image layer, the picture and img tags inside also have various must have attributes, some of them are necessary for general image specific styles, others are compatibility reasons, e.g. to fix problems caused by optimizer plugins ( lazy load ) that could make your images missing from the site.

On the other hand your image paths are already quite long, you have long titles, and these depend entirely on your site and on what you set as values.

As you can see, we can not simply remove elements just to reduce the generated HTML, as by doing so we had to remove the features as well that gives you the option to customize the elements. We already try to use as little HTML elements to generate the results but the slider has a fix structure where we run different features on the different levels.

So if your actual goal was not to reduce the character count of the slider, but to increase the text to HTML ratio, then you should build a slider that has actual text content, and not only images.

On the other hand if you check the full character count of your site ( excluding the scripts coming from external files ) then it is 359998, the 26~28000 characters that Smart Slider 3 adds to the page is around 7% of your total character count if we consider that you have a slider with 12 slides.

E.g. if I compare your Smart Slider 3 slider to the WooCommerce product gallery, where you have only 5 slides with more basic animations, that also generates 12488 characters of HTML.

Sure, as mentioned we will accommodate HTML to Text ratio on our end. As a corporate entity with eyes on the shifting expectations of the web, we recommend you do so as well. We understand the purpose of wrapping our content with your tags; however those tags can clearly be more efficient/shorter