Virtuemart 3 Blocked core virtuemart JS and CSS script

[nortkele]

Hello ,
we using Joomla! 3.4.0 ; Virtuemart VirtueMart 3.0.14 . Web site is hosted on own server xampp with php 5.6. Template - core joomla template Protostar.
Virtuemart works . Score in Pagespeed insight : Mobile 82/100 ; Desktop 92/100
Issue 1 : after publishing Virtuemart core module - Future products, and checking in Pagespeed insight : Mobile 66/100 ; Desktop 87/100
Issue 2 : Blocked scripts:
                   http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js?vmver=1.9.2-please pay attention that blocked java script is provoked by vmver=1.9.2
                   /components/com_virtuemart/assets/css/vm-ltr-common.css?vmver=9194
                   /components/com_virtuemart/assets/css/vm-ltr-site.css?vmver=9194
                   /components/com_virtuemart/assets/css/vm-ltr-reviews.css?vmver=9194

Above described test was made also with different templates - same results as issues 2

Question: Could you please share with me your experience - how to eliminate all issues with blocking scripts.

Thank you in advance for your collaboration.

[nortkele]

in addition,
with core module Future products set on front page, after checking with w3c validator,
the above described module causes 6 Warnings: The border attribute is obsolete. Consider specifying img { border: 0; } in CSS instead.
Any ideas how to avoid this issue?

[jenkinhill]

I wonder why you are not using the current Joomla version J3.5.1  (J3.6 is due for release next week) and the current stable VM3.0.16 - or for experienced users, VM3.17.2 ?

[StefanSTS]

the above described module causes 6 Warnings: The border attribute is obsolete. Consider specifying img { border: 0; } in CSS instead.
Any ideas how to avoid this issue?

Hi nortkele,

thanks for reporting this issue, I will suggest changing that in the next release. Always good to have a few pairs of eyes extra for checking these kind of issues that might be relics from early versions.

Thanks
Stefan

[StefanSTS]

Just in short for now on the CSS in VirtueMart.

There is a lot of discussion about making it smaller and more effective, but that cannot be done in a rush since VM has to keep some backward compatibility.

On the other hand you can disable the VirtueMart CSS in the configuration and add it to your own file, if you like.

Be aware that most of the CSS is always "render blocking" since HTML and CSS have to be loaded first before the page can be displayed. The fine tuning is only in which CSS is loaded before rendering and which one you can load after rendering the page.

There are some templates out that help with the above mentioned and you can use compression tools too to get a faster rendering of the page.
But still CSS is always "render blocking", you should not get too disturbed by the term.

Stefan

[nortkele]

Hello All ,
jenkinhill - thank you very much for answers but suggested Joomla version J3.5.1  (J3.6 is due for release next week) and the current stable VM3.0.16 has bugs - but this is subject for another topic. I have checked them and i have full list with the bugs - especially for virutemart VM3.0.16 installed on J3.5.

For me is important elimination of render blocking java and css script in new versions.
     So abaut sugestion of Stefan -
    1. I'm wondering why we have to  disable the VirtueMart CSS if this function is core function developed and implemented for use?. (Plese understand me well - we love 
         virtuemart and i work and develope for myself Virtuemart since virtuemart 1.1.6 is born. ).
    2.Also secuance for Async and Defer for java and css....please acept my apologies but it is not good way. Not work at 100 % and not help at all if you want to be "friend" with Google! On page SEO is broken.
    3. Please permit me to discuss my question for help- i'm talking abaout core module Latest/Futured products developed for Virtuemart. This module render blocking scripts and drop down seo and speed picture. And not only this module - If you enable on first page, core module - Virtuemart search - the picture for SEO(Page speed and w3c validator) is worst than explained in my original post.

Is there another way or new virtuemart free of render blocking( Async or Defer for java and css) assumptions? Please advice.
P.S. Maybe is good time FOR new topic/s - Best practicess for each version of Virtuemart - how to avoid "bottlenecks" -errors and how to implement them in new version in relation with SEO and Google?
   

[jenkinhill]

FYI Joomla 3.6 was released yesterday. VM3.17.2 runs just fine under J3.6.

[Studio 42]

The choosen way by the team to add the javascript don't help for SEO, because this are not part of Joomla scripts.
So yes in last VM, it's very hard to Have a good google pagespeed.
The only way is to disable javascript in VM and load it yourself. But the problem is with some plugin too and can break, so you need to rewrite this part too.

So yes it was a good idea to use ajax for loading, but Google currently give very bad Pagespeed for VM 3 pages, so i mean that adding all script inside the body because Ajax, was not so good at end.
And versioning system as mentioned in first post, is bad too. Not only because Google, but because if you have cache and need to change some VM javascript,
browser cache get not updated.
The only (always) working versionning system is to change the path or the filename when you change the script.
So the versionning should be a setting and not a VM release value so you can fix this. ANd the best is that this should be configurable using
filename.xxx
or adding ?v=xxx to end of file.
I have some suggestion for this, but i think Team don't want change this. Or ?

[StefanSTS]

Hi nortkele,

if you have a list of bugs, please feel free to share it in the appropriate section of the forum and paste a URL here, if you like. There are always bugs or missing features, and sharing your view on that can only help working on that.

1. You don't have to disable VirtueMart CSS, but you can do that if you like. (Feature, not a bug ;-) If your template has optimized CSS that works with VM and the template together, it will be always more compact which results in faster loading. That is why a good template is always recommended. VM CSS is quite old for backward compatibility reason and there is work going on for new CSS, but that will only be exchanged if there is jump to a new major version (3.2 or so).

2. Every shop is different, different extensions, different versions, so it is anyway on the shop builder to arrange the files properly. You can do that manually or with software like JCH or similar.
There is no deferring of CSS, if I am not mistaken, the CSSOM has to be loaded fully before rendering can happen. For the JS, see above, the basic behaviour is not 100% perfect.

3. I am not sure about the modules, if you could post a url and describe the problems in detail, that would help a lot, I guess. I might have a look into that if my time permits anyway.

I have work coming up to optimise a shop because the customer wants the 100% too, so if there will be any results from this thread (or another) I would be happy to suggest that for the core to make it better right from the beginning. But these suggestions need to be well prepared so that the dev doesn't have to do the work all over again.

A guide for best practices for Google and SEO might be a good idea, only somebody has to start and maintain it.

[StefanSTS]

So the versionning should be a setting and not a VM release value so you can fix this. ANd the best is that this should be configurable using
filename.xxx
or adding ?v=xxx to end of file.
I have some suggestion for this, but i think Team don't want change this. Or ?

Hi Patrick,

for updating a shop I came across the same problem, the scripts were cached. Changing the version worked. Versioning worked well in all cases that I have come up to. In what cases is it not working? If you have a suggestion to improve that, why should the VM team not be interested? I had the same idea, just no time to follow up on that.

(On a personal note without knowing you in person, just from what you write; if the devs are not interested, it might have to do something with the way you write/talk. If your posts make the impression, that you say, the developers are bad, what they do is bad, everything is bad, it might happen, that noone even reads to the end. People generally don't write bugs into code on purpose. Not you, not others, but it happens. And some features are just not implemented yet.)

So I don't see any problem, if you have a suggestion to make VirtueMart better and find the appropriate ways to express it.

Stefan

[Studio 42]

So the versionning should be a setting and not a VM release value so you can fix this. ANd the best is that this should be configurable using
filename.xxx
or adding ?v=xxx to end of file.
I have some suggestion for this, but i think Team don't want change this. Or ?

Hi Patrick,

for updating a shop I came across the same problem, the scripts were cached. Changing the version worked. Versioning worked well in all cases that I have come up to. In what cases is it not working? If you have a suggestion to improve that, why should the VM team not be interested? I had the same idea, just no time to follow up on that.

(On a personal note without knowing you in person, just from what you write; if the devs are not interested, it might have to do something with the way you write/talk. If your posts make the impression, that you say, the developers are bad, what they do is bad, everything is bad, it might happen, that noone even reads to the end. People generally don't write bugs into code on purpose. Not you, not others, but it happens. And some features are just not implemented yet.)

So I don't see any problem, if you have a suggestion to make VirtueMart better and find the appropriate ways to express it.

Stefan

I don't say that anything is bad, but some thinks have to change.
Currently i don't see a way to discute about the features to include and priority, because each time, max say become a member.
But i cannot do my customer pay a virtuemart subscription, when i fix it(i cannot wait each time 7 days or more that the team add the fix in the core).
I try to use the core always, but sometime it's simply impossible to use in some situation.
Eg the javascript inclusion in the body.
I use a minifier to get better pagespeed for user and google. So i have to rewite/copy completly the javascript code since VM3.
If you dont do this, you loose 10 to 20% pagespeed in google.
If you use versionning from VM, then when you have to change a JS code or CSS, this get not updated when you use apache cache for JS and CSS.
And if you remove caching, then the page loading si slower for your users.

I already discuted with max, about last changes in the forum and in skype. But he find that this is not exact and that the current system is OK.
Simply check the demo shop pagespeed : https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fdemo.virtuemart.net%2Fproduct-variants&tab=mobile
You can check any page and in any shop that it not optimised. The result is same.
Here the optimisation are 90% for VM only : https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.linelabox.com%2Fvirtuemart-templates%2Findex.php%2Fvirtuemart-3%3Fproductsublayout%3D0&tab=desktop

[nortkele]

Hello All,
it is great pleasure discussing with you StefanSTS and jenkinhill, because you care about this great product. In relation with  Studio 42' post , have some parts of new Virtuemart code that isn't work and we have to jump from one version of Virtuemart to another version of Virtuemart or Joomla versions WITH HOPE that new version will be bether than previous. From my point of view - my suggestion to you developers - please  stop creating new versions, analyze what's happen in relation with our (forum peoples feedbacks and topics) with Virtuemart and create PATCH for one stable version. If we continue jumping we loose money(for payied extentions and templates ) time to folow you  guys . There isn't too much problems which have to be covered. Just ask us .

   @jenkinhill - thank you very much for information. I will test it on our test server this weekend or next.

   @ StefanSTS please accept my comments
           -  1and 2: I use protostar core joomla 3.4 template because it has results  greather than 80 percents of comercial templates. The score in Gmetrix is : Page speed score - 95 ; Yslow score : 90. In Google (page speed insight)- Mobile test 83% User experiance - 100%, Desktop - 93%. Why i give you examples for tests- because this results are made for Virtuemart 3.0.14 and 3000 products inside of online shop without any paid extentions for speed up . W3C validator - Green - no errors. This means that the Virtuemart team has done an excellent job. This test was made on front page
                                                                http://www.1001avtochasti.com/
  But we have to have 100 % score including all core modules .
          - 3 . The URL where search module and futured modules are set on is
                         http://www.1001avtochasti.com/авточасти-по-моSPAMели
Please review if you have the time.
If you do page speed insight  and W3c tests you will see where the problems are ( and you will compare  the speed and on page seo).
StefanSTS,  please advise how to avoid issues for core modules - Last/Features and Search.

Last important thing for Google, Yahoo, Bing SEO index of products and images of virtuemart 3.0.14 - I have more indexed products and images in Virtuemart 1.1.6. rather than with Virtuemart 3.0.14. Something is wrong with picture SEO in virtuemart 3 and Google don't want to index pictures. Curently this issue is under my investigation -  The Problem is in Unique Filename of the picture. Not in Displayed image subtitle or  Image Alt-Text. Image map is already created and submited to Google.Result - 6000 pictures - indexed only 30...

P.S. About the best practices for Google and SEO - i can start this topic and maintain it but here we have huge range of different versions for Virtuemart and Joomla . This will involve chaos. We depend from your choise related to increased volume of produced versions of Virtuemart... I can open the topick for version 3.0.14 - On page SEO .

[Studio 42]

Hi nortkele, you fake Google about the javascript server side ?
Because, he dont see any of VM scripts and the biggest problem is this part.

[nortkele]

Hello Studio 42,
sorry but i couldn't understand your question....

So in result - on page url http://www.1001avtochasti.com/авточасти-по-моSPAMели
Virtuemart core modules : Futured/Latest module and Search are ON.
After testing with pagespeed insight, Google show me all blocked java scripts and CSS . They  are:

1.Java
http://ajax.googleapis.com/...eryui/1.9.2/jquery-ui.min.js?vmver=1.9.2 - this is part of Virtuemart 3 core
2. CSS
http://www.1001avtochasti.com/components/com_virtuemart/assets/css/vm-ltr-common.css?vmver=9194 - this is part of Virtuemart 3 core
http://www.1001avtochasti.com/components/com_virtuemart/assets/css/vm-ltr-site.css?vmver=9194 - this is part of Virtuemart 3 core
http://www.1001avtochasti.com/components/com_virtuemart/assets/css/vm-ltr-reviews.css?vmver=9194 - this is part of Virtuemart 3 core
In relation with above described 1 and 2 we have no chance to unblock these scripts using normal techniques - secuance for Async and Defer for java and css
3. V3C validator - involved 6 Warning and 2 errors(from searrh module)

For this reason i'm asking for help developers or somebody who had chance to eliminate these blocking scripts .
p.s. As we known it is very important for onpage SEO - valid : 1. HTML andon second place valid CSS. Both valid this will be perfect SEO result.

[Studio 42]

2. CSS
http://www.1001avtochasti.com/components/com_virtuemart/assets/css/vm-ltr-common.css?vmver=9194 - this is part of Virtuemart 3 core
http://www.1001avtochasti.com/components/com_virtuemart/assets/css/vm-ltr-site.css?vmver=9194 - this is part of Virtuemart 3 core
http://www.1001avtochasti.com/components/com_virtuemart/assets/css/vm-ltr-reviews.css?vmver=9194 - this is part of Virtuemart 3 core

Why you don't use a minifier to include this in the main CSS and remove this from loaded CSS ?
I do it in some sites and use own versioning using file name, so you can safe update after.

For jquery-ui.min.js, i can't remember if this have some utility front side?
So perhaps you can disable loading of jquery ui too