How to reduce the size of the DOM?

Question

I have a page with almost 2,000 DOM elements (nodes), which includes, among other things, a simple table with over 200 links to other subpages:

<div id="tabs">
<ul><li><a href="#tabs-1" >Al-Ar</a></li>
<li><a href="#tabs-2" >Ar-D</a></li>
<li><a href="#tabs-3" >E-Ha</a></li>
<li><a href="#tabs-4" >Ha-J</a></li>
<li><a href="#tabs-5" >K-Mo</a></li>
<li><a href="#tabs-6" >Mo-Ro</a></li>
<li><a href="#tabs-7" >Ro-So</a></li>
<li><a href="#tabs-8" >So-Su</a></li>
<li><a href="#tabs-9" >Su-Z</a></li></ul>
<table class="tablica_hoteli">
<tbody>
<tr class="tr1"><td></td></tr>
<tr class="tr"><td>
<div id="tabs-1">
<table class="pol">
<tbody>
<tr> <td class="td10" colspan="4">Al..Ar</td></tr>
<tr> <td class="td1"><a href="1.html">1</a></td>
<td class="td2">1</td></tr>
<tr> <td class="td1"><a href="2.html">2</a></td>
<td class="td2">2</td></tr>
...
<tr> <td class="td1"><a href="20.html">20</a></td>
<td class="td2">20</td></tr>
</tbody>
</table>
<table class="pol">
<tbody>
<tr> <td class="td1"><a href="21.html">21</a></td>
<td class="td2">21</td></tr>
<tr> <td class="td1"><a href="21.html">21</a></td>
<td class="td2">21</td></tr>
...
<tr> <td class="td1"><a href="30.html">30</a></td>
<td class="td2">30</td></tr>
</tbody>
</table>
</div>
<div id="tabs-2">
<table class="pol">
<tbody>
<tr> <td class="td10" colspan="4">Ar...</td></tr>
<tr> <td class="td1"><a href="31.html">31</a></td>
<td class="td2">31</td></tr>
<tr> <td class="td1"><a href="32.html">32</a></td>
<td class="td2">32</td></tr>
...
<tr> <td class="td1"><a href="51.html">51</a></td>
<td class="td2">51</td></tr>
</tbody>
</table>
<table class="pol">
<tbody>
<tr> <td class="td1"><a href="52.html">52</a></td>
<td class="td2">52</td></tr>
...
<tr> <td class="td1"><a href="205.html">205</a></td>
<td class="td2">205</td></tr>
</tbody>
</table>
</div>
</tr>
<tr class="tr1"><td></td>
</tr>
</tbody>
</table>
</div>

The start page only shows "# tabs-1", and the rest of the pages have to be clicked later to view. So the rest of the content from "# tabs-2" to "# tabs-9" does not need to load. What's the easiest way to optimize the DOM size? How do I get the rest of the # tabs-2 "code to not load on startup? I don't know how to do it and that's why I am asking for help.

Oh, maybe it would be helpful to know that the table is written with jQuery

Answer 1

I was using the code from:

https://jqueryui.com/tabs/#ajax

plus links to jQuery sites:

jquery.min.js,
jquery-ui.min.js,
jquery.lazyload.min.js

And I mean position in Lighthouse where I can see in Diagnostics "Avoid an excessive DOM size" = 1956 nodes. And I would like to reduce this value, this means that only the first page should be loaded