Optimizing a very big DOM page


Basically I’m looking for a tool to optimize the generated HTML file export because I found a few things:

I made a very long webpage (lapilulerouge.info) with dozens videos, images to load and it gets a very bad gtmetrix:

The DOM is gigantic and I’d like to not move blocs around and want to keep all the content on one page.

1- I run pageoptimus extension on chrome and saw that:

→ 95.7% of bootstrap.css is unused
→ 63.5% of jquery.js is unused
→ 63.1% of bootstrap.bundle.js is unused

I’d like to only have the code needed loaded. Do you know any blocs addon to optimize the css and js automatically leaving only the needed parts?

2- I’d like to have the DOM simplified but how can this be done inside blocs? I’d like to have done it one time for all

Any suggestions is welcome.

Thanks in advance.

You may wan to check the post out.

That’s all part of the Bootstrap framework. You could migrate your project to Bootstrap 5 and in doing so it will ditch the jquery dependency.

But to be fair, unless a site is using basic html markup, all sites have some framework overhead.

You can’t overlook hosting as a key variable. Buy cheap over subscribed hosting and you will get poor performance.

It gives me a nice B, so not too bad at all:

Your problem is not DOM but your Network Payload: