(Joomla 4) Disable unwanted scripts in Frontend

[coolcat-creations]

I think it should be possible to disable fontawesome and whatever in the frontend.
I have a clean Joomla 4 installation and it loads tons of unwanted and unneeded css and js.
(FontAwesome, Joomla alert, core.system.min.js, jquery,.... and and and)

How can this be changed in core to have a more performant initial setup?

[brianteeman]

It's all down to your template and the components etc being displayed. You can see an example at HTTPS://learnjoomla4.com of what can be done.

[coolcat-creations]

Thank you but your site also loads the scripts I mentioned. How can this be disabled? I also tried with chlodders lightning template but still all those css and js is loaded. Example: https://das-ist-nicht-mein-job.de/
(core.system.min, fontawesome, Joomla Alert)

[brianteeman]

It is not loading fontawesome or jquery. (If you find those please let me know)

In J4 its really a case of deciding what you want to load instead of removing things. For example

joomla-cms/templates/cassiopeia/joomla.asset.json

Lines 9 to 14 in 9ca4e56

	"name": "template.cassiopeia.ltr",
	"description": "The css file to be used when the site is left to right (LTR).",
	"type": "style",
	"uri": "template.min.css",
	"dependencies": [
	"fontawesome"

Here you can see that the template is saying that fontawesome is a dependency of the main template css.

If you dont want to use fontawesome then you simply dont tell your template to load it.

Other elements are loaded because you are using a component/module etc that requires them

Here you can see that by using the metismenu mod_menu override you are introducing a metismenu javascript file.

joomla-cms/templates/cassiopeia/html/mod_menu/dropdown-metismenu.php

Lines 16 to 18 in 9ca4e56

	/** @var WebAssetManager $wa */
	$wa = $app->getDocument()->getWebAssetManager();
	$wa->registerAndUseScript('metismenu', 'media/templates/cassiopeia/js/mod_menu/menu-metismenu.min.js', [], [], ['metismenujs']);

BUT because its in the mod_menu override it is only loaded on a page that uses the module. If you dont want that script then you dont register it in the module.

Also you need to look at the size of the files that are loaded and not the quantity. Again using https://learnjoomla4.com as an example you will see how by simply selecting to include the files correctly you can achieve impressive performance.

gtmetrix report

There are no places on this site that I am disabling any asset and there isnt even any cache enabled

[Chacapamac]

I know this is old @brianteeman, but I still don’t understand exactly what you need to do to unload “Awesome”
I think I understand the role of the “joomla.asset.json” when place in the template or other component, but how you actually realize de override?

[Fedik]

All assets loaded via Joomla AssetManager, can be disabled via AssetManager https://docs.joomla.org/J4.x:Web_Assets

Example for fontawesome style: $wa->disableStyle('fontawesome')
For core script : $wa->disableScript('core'), however there a high chance that it will be re-enabled by one of core feature, example if the document have a script options, translations, etc.

[coolcat-creations]

Thank you Fedik, I added now

$wa = $this->getWebAssetManager();
$wa->disableStyle('fontawesome');
$wa->disableScript('core');

to the lighting template and in cassiopeia but it's still loaded. Seems to be a bug then?

when i add
$wa->disableScript('joomla-alert');

I have the error: 0 There is no "joomla-alert" asset of a "script" type in the registry.

[Fedik]

I just showing a general way. Much depend from active template and extensions.

The "core" can be re-enabled somewhere else 😉
And "fontawesome" is dependency for template.cassiopeia.ltr(.rtl) so it also will be re-enabled for cassiopeia template .

0 There is no "joomla-alert" asset of a "script" type in the registry

It a webcomponent, called webcomponent.joomla-alert, so $wa->disableScript('webcomponent.joomla-alert');
But this may be re-enabled from joomla.system.message layout.
Here you better make a layout override.

[coolcat-creations]

Thank you... It's quite not the user friendly approach I hoped to find but I try to create a template with just one style loaded and hope I will succeed somehow.

[migors]

@coolcat-creations Hi, have you managed disabling message.min.js and other files?
Thanks

[drmenzelit]

The fontawesome in Lightning is being loaded by the template itself, the css comes from "Joomla" (media/vendor/.../fontawesome.css), because it is in core and the template doesn't need to deliver an own css for fontawesome.
It is possible to use Joomla without fontawesome, but only if you don't need frontend editing...

[brianteeman]

frontend editing should register fontawesome as an asset

[drmenzelit]

As far as I can see, it is not as asset at the moment... when you edit or create an article in the frontend and you use the editor-xtd buttons that open an iframe (e.g. CMS Content -> Article), the content doesn't look good if you haven't fontawesome loaded...

[brianteeman]

Sorry - lost in translation. I should have said

We should make frontend editing register fontawesome as an asset

[Fedik]

I just checked, it not only about a content editing,
there many other places where the icons is used, example:

The fontawesome in Lightning is being loaded by the template itself

Technically we can do the same, however to disable it you still need to edit templates files. That the same if you just edit cassiopeia/joomla.asset.json.