Optimizing a very big DOM page

[emmanuel]

Hi

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.

[KBConcepts]

You may wan to check the post out.

Web Page Performance

I really like your suggestion to store photos are stored on a second URL or subdomain. The is news I had not heard of “Some modern browsers even create up to 6 resources at the same time.” Just curious what Content Delivery Network (CDN) are people using?

[PeteSharp]

@emmanuel

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

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.

[Jerry]

@emmanuel

lapilulerouge.info

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

Your problem is not DOM but your Network Payload:

[emmanuel]

Hi Jerry,

yes I found that and I solved it using video lazyloading → Lazy loading video
<video controls="" preload="none" poster="
Maybe I should do that for each video: they sometimes take up to 3 secs to show the first frame

I also compressed creatively all the pictures, so they look very artsy but are just 8MB whereas they were 24 MB.

Now the site ranks A in gtmetrix.

I’m now at the stage of purging CSS using https://unused-css.com
I think CSS and JS can be purged of at least 95% of their content. I hope so: the site would be fast as light.

Could be great to have options in blocs to get the site using only the needed JS and CSS and purging all useless assets and old references to assets no more in use, basically get the bare bone site structure and content.

Thanks all for your help.