How to achieve a runtime DOM optimization?

Often I find on GTMetrix that sites have too many DOM elements on the page and of course GTMetrix is very kind to suggest that we should simplify our code to make sure there is a very contained number of the same.
However in cases where you part-develop a site and part-integrate commercial software, not to mention self-generated dynamic code, in large projects this has managed to get a bit of of control in one of my existing projects. Now, if I had known about this before I would have started to pay attention to it since the start. However, I have only found out too late.

What I am not looking for, instead of rewriting and optimizing several thosand lines of code (tens of thousands?) is a "magical solution" - something like a RUNTIME DOM OPTIMIZER in php - that might save my skin and lighten the page and get a better GTMetrix and Google Pagespeed rating. Is there anything at all that might help? Any tricks, clever ideas, commercial software, freeware, custom scripts... basically anything is welcome as long as it helps.

In future I will be a good boy and try to do my homework but this once I need a quick fix...

thanks

P.S. By the way my site is in Opencart and Wordpress
badwolfffAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Shalom CarmelCTOCommented:
The closest thing is google's mod_pagespeed and related commercial services.
While it will not rewrite your DOM, it will lighten the page load time and rendering.
Its most prominent features are:
* Remove whitespace
* Minify JS and CSS
* Preload JS and CSS
* Optimize images

See this documentation for a more comprehensive list
http://modpagespeed.com/

If you cannot work with it (IIS) or do not want to mess around with builds and with installations, you can use commercial services that do similar things PLUS cache your content in edge servers close to the audience.
Page speed is affected by 2 roughly 2 attributes: Load time and Render time. These services improve both. Try Instart Logic, Akamai, Edgecast, or Limelight. Instart Logic prices are relatively sane.
badwolfffAuthor Commented:
Thanks. But I DO want to rewrite DOM
Your solution is something I am already doing.
This problem is separate
Shalom CarmelCTOCommented:
mod_pagespeed does some DOM optimizations, but does not make it simpler.

Rewriting the DOM at runtime means having inline a full DOM parser that has to correctly render the page, find redundant (???)  elements and change the DOM into a simpler version.
All this without hurting performance, and without breaking the page.

I doubt whether this magic exists, but if it does I will be delighted to test it out.
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

badwolfffAuthor Commented:
Does mod_pagespeed work with Varnish? I use Unixy Varnish?
I use this plugin
https://www.unixy.net/advanced-hosting/varnish-nginx-cpanel/
on cPanel right now.
thanks
badwolfffAuthor Commented:
Is there something that does Dom optimization on source code?
badwolfffAuthor Commented:
There must be some way out there to analyze using some tool the dom structure of a php doc from which my html is generated and help me reduce the number of DOM elements at the source. I am hoping someone here must know...
BigRatCommented:
First I'd run a number of different tools to test the site. GTMetrix is not the only one, there's pingdom, WebpageTest, YSlow and a host of others. They will probably all use the same metrics but you might find somebody shows up something which you can do simply and quickly. There is also the F12 key and Audit in Google Chrome (which I have just run on this page and gave two loading errors, and suggests Minimize cookie size, specify image dimensions (18), optimise styles and scripts(6), remove unused CSS rules (2238) and use normal CSS property names instead of vendor-prefixed ones (27).

Actually the number of DOM elements is just an indication of the page complexity not of it's run-time load. For examples TABLEs create a large number of DOM elements, but since they are all static once rendered there's an end to it. Run-time is effected primarily by scripts. So these need to be profiled. There is one again in Chrome and I'm sure you can find others on the web. One example of the sort of thing that goes slow is :-

for(i=0; i<10000; i++) {
   document.getElementIdId('myid').value = <someexpression>;
}
where document.getElementById() is executed many times in a loop. Setting up a var to the element would remove the getElementById() which is known to be slow in IE.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.