Which template to base on, for a new template?

[EvanGR]

I would like to ask from the VM dev team to make a few improvements to their default template (+ dashboard settings), because it is getting out of date pretty fast.

1) Remove dependencies on jQuery.

2) Remove dependencies on obsolete libraries (facebox etc)

3) Decouple HTML-JS code... put scripts in separate files.

4) Strive for async JS code.
Currently, you cannot defer or make VM JS code load asynchronously. The template breaks.
But it is essential (for fast load times, UX, pagespeed, SEO) to be able to just load your scripts last, after everything else, after the first page render.
Makes for much faster user experience. And, it's the current and future gold standard.

It's not hard to accomplish, but you need to design your HTML/CSS/JS for this scenario.
i.e. do not depend on an immediately executing script to fix your presentation & functionality.
You may as well put a placeholder in the content, and once/when the script loads (asynchronously, sometime in the future), then present the component.

[AH]

Maybe you have already done this work in your templates?

Yes removing inline JS is a good idea.

Best not to put scripts in separate files - rather combine into a single minified file allowing a single call - which reduces time to load.
Same for CSS.

VM has just introduced capability for use of img attribute loading="lazy"  which can (and does) significantly reduce page load speed on product browse pages

JQuery will be with us for some time.

But it is essential (for fast load times, UX, pagespeed, SEO) to be able to just load your scripts last, after everything else, after the first page render.

Fast load times/pagespeed/SEO - they are all the same point - and how prey does this all help UX?

[EvanGR]

No need to bundle and minify resources, because it hurts editability/customization. There are Joomla plugins that do the bundling just fine.

jQuery may be with us for some time, steps can (must) be taken now to gradually move away from it. It's a dead-end, most are moving away from it.
My joomla website still loads up the 300k+ mootools library because a couple of extensions require it.
Don't let us fall into the same trap, or a couple years from now it will be too late.

Async javascript helps UX, because the user doesn't have to wait as long for the page to appear.
It doesn't have to be 100% functional, but stuff should be shown in the DOM as soon as possible.
It's ok for the "Add to Cart" button to be functional a second or two after the page has loaded.

[pinochico]

It sounds like an e-shop optimization, which I do to the extent (depth) how much the customer pays.
It is not related to Joomla or VirtueMart basic installation.

The administrator does what he can (I do) and then he has much better work results than others, which is why customers order it.
The administrator does not know what the developers is able to modify.

I'm able to leave up to 100 hours for optimization, I'll be happy if VirtueMart solves my problems for me.

jQuery may be with us for some time, steps can (must) be taken now to gradually move away from it. It's a dead-end, most are moving away from it.

I'm not 100% sure.
Yes, there were attempts to replace JQuery with something else. Then it was found that another solution to cover all cases is much more robust and currently I have information that the developers are returning to jQuery back.

My joomla website still loads up the 300k+ mootools library because a couple of extensions require it.

Yes, my too.
Welcome, now you can make optimalization.
Is VirtueMart really responsible for this?

Async javascript helps UX, because the user doesn't have to wait as long for the page to appear.
It doesn't have to be 100% functional, but stuff should be shown in the DOM as soon as possible.
It's ok for the "Add to Cart" button to be functional a second or two after the page has loaded.

Joomla has the ability to load javascripts like async and defer using parameters.

It's up to you whether you fix it (you can't say developer bugs) or not. There are cases when it is not possible to clearly determine that async or defer is needed, and this decision should be up to the e-shop developer and not the extension developer.
It's just up to you to create the e-shops and I think this is the right way - there is a possibility that it is up to you whether to use it (according to your final output).

[AH]

No need to bundle and minify resources, because it hurts editability/customization. There are Joomla plugins that do the bundling just fine.

Your point was speed - you cannot have it both ways - calling less files does have a significant impact on page load times. That does not mean you have to remove the the core unminified versions.

To further help - the latest version of VirtueMart provides a hidden config to load a single CSS "vm-ltr-combined-min.css"  (up to you what it contains) this will replace the two files -site.css and -common.css.
It will also not load the   -reviews.css if reviews and ratings are disabled.

This can be invoked using VMcombinedCssFE=1 in virtuemart.cfg

jQuery may be with us for some time, steps can (must) be taken now to gradually move away from it. It's a dead-end, most are moving away from it.

My joomla website still loads up the 300k+ mootools library because a couple of extensions require it.

Oh dear, I would suggest that such modules are removed or updated - the extra calls for modules and the potential for additional css and js has an even worse hit on page speed.
As google thinks "mobile first" try thinking about what you can prevent from loading (not just loading and hiding!) when viewed on a mobile, people don't hold their phones in landscape mode ;-)

Loading loads of modules and plugins will kills site speed - but try and tell that to the "would be developers" that just look for the ready made solution (usually at the lowest price or free!)

Don't let us fall into the same trap, or a couple years from now it will be too late.

It is never too late but also good to be thinking about such things now.

Async javascript helps UX, because the user doesn't have to wait as long for the page to appear.

For many sites - the lazy loading of images has the potential to massively improve page load speed times - so many are thick with large banners and images that kill site speed, far worse than a couple of js and css files.

I agree in part with pinochio:

Much of a sites overall performance is not down to VM - you have to think holistically and design your total site to take advantage of what you know! VM alone will not sort out the issues of a slow site, my first thought was "put it on a decent host" but of course you probably already do that.

As you may have seen from the options for Lazy loading media and combined CSS - some useful generic things have moved forward in the latest version that may benefit many users.

[pinochico]

Welcome to the world of Open Source

You are a music conductor who has many musicians at his disposal and his only concern is for everyone to play (work) best as one orchestra.

This is your job. Not the work of developers. They are preparing their extension to the default Joomla template and mostly without optimization, which takes another time in longer (I dare say) 100% development.
Nobody will pay for that. Just look at what price, for example, some offer extensions for VirtueMart. (10 EUR and the like). The result also corresponds to this.

[EvanGR]

For those who misunderstood...

My point is simple: VM's default template has some "issues" and I pointed them out, with suggestions.

Why it matters?

1) Because most 3rd party templates I've seen are based on the VM default, and build upon these core issues.

2) Because it makes it really difficult to build truly modern and competitive websites, if you can't squeeze out every bit of performance.

3) Google already complains that the TTI (Time To Interactive) is already too high... (because all the scripts have to be loaded first, before anything is usable).

It matters now, and It will matter a lot more in the future.

[AH]

Yes it is good to keep people thinking.

If you want to see how the paid for guys are performing for Mobile - regarding TTI and page speed just take a peek at some of these in the top 50 : https://www.shopify.com/blog/shopify-stores

[pinochico]

hmm, I tryied generate report from lighthhouse for https://www.tluxe.com/collections/50-under (one site on 3 place in top) and is the same as our eshop without optimalization

Try for example the eshop www.notino.cz. The developers spent 600 hours on it for optimization. The result is also not much.