Can I delay loading a css file until a user is logged in?

Question

I have a CSS file on a Joomla 4 site using a custom template, that has code that only applies to special views for logged-in registered (manager level) users on the front end that styles list displays and other items when they add and edit articles, along with some styling in 'how to' articles I've written for them. This file is called front.css.

I have run a site performance test on https://www.webpagetest.org and the report says that "3 externally-referenced CSS files are blocking page rendering." (the other two are JCE Editor and GDPR cookie consent files, so out of my control).

So, I'd like to only load this file when one of the users actually logs in to do some work. I can use vanilla JavaScript if necessary.

Answer 1

Very interesting and good question in my opinion.

For this task I would use the 'joomla_user_state' cookie which is available from your template index.php file. (otherwise you can do this form a custom plugin or from a custom module). If you maintain your own custom template then you can insert a few lines in index.php that will load the css file if the User is logged in.

use Joomla\CMS\Factory;

/** @var Joomla\CMS\Document\HtmlDocument $this */

$app = Factory::getApplication();
$wa  = $this->getWebAssetManager();

$input = $app->getInput();  
$loggedIn = $input->cookie->get('joomla_user_state');

if ($loggedIn) {
    $wa->registerAndUseStyle('template.mytemplate.front', 'front.css');
}

Of course your front.css file is in media/templates/site/mytemplate/css folder.

But if not and your css file is in your template's css folder then you have to change this line and just use:

$wa->registerAndUseStyle('template.front', 'templates/mytemplate/css/front.css');

As an important additional note, since a lot of people have a hard time to load the custom templates/themes' css or script assets with the Joomla WebAsset Manager. My example above is used when you have a child theme as your theme, but if you do not use child themes then you can register and load the css file easier in many cases, if you explicitely give the full path to the file to media folder or to your template's css folder (as I gave above too) :

$wa->registerAndUseStyle('front', 'media/templates/site/mytemplate/css/front.css');

OTHER APPROACH

Just with a nuance a more reliable approach for long term could be if we'd identify the User/visitor at server side:

use Joomla\CMS\Factory;

/** @var Joomla\CMS\Document\HtmlDocument $this */

$app = Factory::getApplication();
$wa  = $this->getWebAssetManager();

$guest = $app->getIdentity()->guest;

if (!$guest) {

    $wa->registerAndUseStyle('template.front', 'templates/mytemplate/css/front.css');

}

Well, I just spot in your question, the small but important detail that you want to load the css only for managers (default Joomla user group ID = 6), so finally:

$app = Factory::getApplication();
$wa  = $this->getWebAssetManager();

$user_groups = $app->getIdentity()->groups;

if ( in_array(6, $user_groups) ) {

    $wa->registerAndUseStyle('template.front', 'templates/mytemplate/css/front.css');

}

Thus the appropriate title of this question would be: How to load a stylesheet only for a specific User Group in Joomla