VirtueMart Forum

VirtueMart 2 + 3 + 4 => Security (https) / Performance / SEO, SEF, URLs => Topic started by: Kuubs on January 05, 2023, 16:22:58 PM

Title: Defer/async css and js files from Virtuemart
Post by: Kuubs on January 05, 2023, 16:22:58 PM
Hello,

I'd like to speed up my website and be more compliant to Google in using their best practices. I used JCH optimize in the past but that gave a couple of weird issues and I was advised to not use it anymore and do these things manually to have more control.

How can i defer and async load the css/js files from Virtuemart. Because it loads all of the assets while most of them on the homepage at least are not really used above the fold.
Title: Re: Defer/async css and js files from Virtuemart
Post by: sirius on January 06, 2023, 13:43:07 PM
Hi,
but I will recommend a plugin to do this, there's so much hazardous points that needs to be carefully checked.
JCH needs to be carefully tuned, but it's very fine, I use it since 7 years.

Do not forget also the options sometimes available on this subject in certain templates.

This apart you can use mod_pagespeed from google
https://developers.google.com/speed/pagespeed/module?hl=en

Or with apache you can also achieve this like so for example:
# ----------------------------------------------------------------------
# | File concatenation                                                 |
# ----------------------------------------------------------------------

# Allow concatenation from within specific files.
#
# If you have the following lines in a file called, for example,
# `main.combined.js`:
#
#     <!--#include file="js/jquery.js" -->
#     <!--#include file="js/jquery.timer.js" -->
#
# Apache will replace those lines with the content of the specified files.

# <IfModule mod_include.c>

#     <FilesMatch "\.combined\.js$">
#         Options +Includes
#         AddOutputFilterByType INCLUDES application/javascript \
#                                        application/x-javascript \
#                                        text/javascript
#         SetOutputFilter INCLUDES
#     </FilesMatch>

#     <FilesMatch "\.combined\.css$">
#         Options +Includes
#         AddOutputFilterByType INCLUDES text/css
#         SetOutputFilter INCLUDES
#     </FilesMatch>

# </IfModule>
Title: Re: Defer/async css and js files from Virtuemart
Post by: pinochico on January 06, 2023, 23:17:26 PM
QuoteJCH needs to be carefully tuned, but it's very fine, I use it since 7 years.

I have bad expirience 10 years.
Now we don't use JCH, don't use cache, don't use defer or async, but eshop load after 1,5-1,8 sec.
Thanks Rupostel and me :)
Title: Re: Defer/async css and js files from Virtuemart
Post by: Kuubs on January 10, 2023, 18:14:44 PM
Quote from: pinochico on January 06, 2023, 23:17:26 PM
QuoteJCH needs to be carefully tuned, but it's very fine, I use it since 7 years.

I have bad expirience 10 years.
Now we don't use JCH, don't use cache, don't use defer or async, but eshop load after 1,5-1,8 sec.
Thanks Rupostel and me :)

I have indeed also bad experience with JCH. Where are files loaded? I just want to add the defer options and minimise these files.
Title: Re: Defer/async css and js files from Virtuemart
Post by: GJC Web Design on January 10, 2023, 19:04:20 PM
administrator\components\com_virtuemart\helpers\vmjsapi.php

there are already function parameters to defer/async

e.g.

function addJScript($name, $script = false, $defer = false, $async = false, $inline = false, $ver = 0)

Title: Re: Defer/async css and js files from Virtuemart
Post by: Kuubs on January 12, 2023, 15:31:01 PM
Quote from: GJC Web Design on January 10, 2023, 19:04:20 PM
administrator\components\com_virtuemart\helpers\vmjsapi.php

there are already function parameters to defer/async

e.g.

function addJScript($name, $script = false, $defer = false, $async = false, $inline = false, $ver = 0)

Ok awesome. Now I just need to know where exactly these scripts get added, becaue I need to add the defer/async in these function calls.
Title: Re: Defer/async css and js files from Virtuemart
Post by: GJC Web Design on January 13, 2023, 19:09:48 PM
good luck  - that function is in these FE files

Name                                            Location

shopfunctionsf.php                              \components\com_virtuemart\helpers
askrecomjs.php                                  \components\com_virtuemart\sublayouts
customfield.php                                 \components\com_virtuemart\sublayouts
login.php                                       \components\com_virtuemart\sublayouts
form.php                                        \components\com_virtuemart\views\askquestion\tmpl
view.html.php                                   \components\com_virtuemart\views\cart
default.php                                     \components\com_virtuemart\views\cart\tmpl
default_pricelist.php                           \components\com_virtuemart\views\cart\tmpl
default.php                                     \components\com_virtuemart\views\category\tmpl
list.php                                        \components\com_virtuemart\views\orders\tmpl
default.php                                     \components\com_virtuemart\views\productdetails\tmpl
default_images.php                              \components\com_virtuemart\views\productdetails\tmpl
default_reviews.php                             \components\com_virtuemart\views\productdetails\tmpl
multiadd.php                                    \components\com_virtuemart\views\productdetails\tmpl
form.php                                        \components\com_virtuemart\views\recommend\tmpl
view.html.php                                   \components\com_virtuemart\views\user
contact.php                                     \components\com_virtuemart\views\vendor\tmpl

and of course in the over rides of your template and your 3rd party OPC if using  -- and be aware deferring could break the render