How can I avoid long id's on elements (and reduce HTML output page size)

Hi,

Can anyone advise me on how to reduce the length of the ID's as rendered in HTML?

We are building a website where performance is important.


Here is my case:

OutSystems uses the hierarchical block names. When nesting blocks (as we need to do I guess)  the whole hierarchy becomes a part of the name. 

For example:

I have a header block, in the header placeholder of the layout ,which has a menu item that opens a custom dropdown menu that contains tabs, and on each tab content there is a gallery of categories and subcategories with links.

Because we use nested lists we have nested web blocks (each represented as a span with an even longer ID).

To give an idea, the subcategories end up with ID's like these (just for reference):

id="XXXXXXX_Theme_wtDetailPage_block_OutSystemsUIWeb_wt15_block_wtHeader_wtHeader_XXXXXXX_WI_wt18_block_wt61_wtMenuContainer_OutSystemsUIWeb_wtCategoriesContent_block_wtTabs_Content_wtListTabContent_ctl00_OutSystemsUIWeb_wt26_block_wtContent_wtsubcatlist_wtListSubCategories_ctl00_wt3_wtListSub_SubCategories"

These ID's will take 50% of the HTML output for that menu. As we have a lot of categories and this menu is on every page this will become a performance penalty.

Any idea's?

I have tried naming the blocks and elements with short names but this only gets the space used to avbout 40%.

 
 

Solution

Hi Arthur,

How are you measuring performance?
How have you notice performance impact with those IDs?

I've stumbled and being concerned with this in the past, however, I came to the conclusion that actually that is not relevant and has no impact in the website performance.

Why?

If your server is well configured, it means it will compressing the content before leaving the server (e.g. using GZIP). And this will reduce your html to a irrelevant size (typically in KB).

There are other things that you should be concern about, much more than that.

Cheers,

RG

Solution

It indeed looks like premature optimization. And in addition to what Ruben says, modern HTML pages are typically pretty large compared to the text of a few identifiers. Think of JavaScript, CSS, cookies, viewstate etc., not all of which you can control.

I would advise you to check the statistics for the page in LifeTime, and you'll probably see that client and server time is much, much larger than network time (as is typical).

I guess I'm used to keeping my HTML output as clean as possible (background in CMS development). 

Indeed there are other things I should perhaps be more concerned about. 

Thanks for the quick replies! 


You're welcome, good luck!