Defer JavaScript in Joomla

PageSpeed Insights keeps telling you to eliminate render-blocking resources, and most of the offenders are JavaScript files that your template and extensions load in the head. Each one delays first paint while the browser stops parsing HTML to fetch and run it. Deferring JavaScript in Joomla fixes that without touching a single template file, and it doesn't require a full optimization extension. Hopefully, you don't need an extra plugin. You can do it with Tassos Code Snippets using a simple PHP snippet.

The PHP Snippet Code

Set Code Type to PHP, then use this snippet. It runs right before Joomla compiles the document head, walks through every script registered with the Web Asset Manager, and adds the defer attribute to it. Deferred scripts still download in parallel, but they execute after the HTML is parsed, so they stop blocking the render. Anything you list in $exclude is skipped, which is where you put scripts that must run immediately.

use Joomla\CMS\Factory;
use Joomla\CMS\Document\HtmlDocument;

// Scripts whose name contains any of these fragments will NOT be deferred.
// Matching is case-insensitive and matches anywhere in the asset name.
$exclude = [
    'core',
    'keepalive',
];

// Do not edit below.

$app = Factory::getApplication();

$app->registerEvent('onBeforeCompileHead', function () use ($app, $exclude)
{
    $document = $app->getDocument();

    if (!($document instanceof HtmlDocument))
    {
        return;
    }

    $needles = array_filter(array_map('strtolower', array_map('trim', $exclude)));
    $wa      = $document->getWebAssetManager();

    foreach ($wa->getAssets('script', true) as $asset)
    {
        $name = strtolower($asset->getName());

        foreach ($needles as $needle)
        {
            if (strpos($name, $needle) !== false)
            {
                continue 2;
            }
        }

        // Module scripts are deferred by the browser already.
        if ($asset->getAttribute('type') === 'module')
        {
            continue;
        }

        $asset->setAttribute('defer', true);
    }
});

Tip: Deferring changes execution order, so test your site after publishing. If a slider, gallery, or form stops working, find the script's asset name and add a distinctive fragment of it to $exclude rather than removing the snippet. Inline scripts are not touched by this snippet, only registered script files.

How to add this snippet

1. Install Tassos Code Snippets if it is not installed already.
2. Go to your Joomla Administrator area.
3. Open Components → Tassos Code Snippets.
4. Click New.
5. Select PHP as the snippet type.
6. Paste the code to defer JavaScript above.
7. Select Insertion Method → Page Load.
8. Publish the snippet.
9. Optionally, open the Conditional Logic tab to restrict which pages or users the snippet runs on. Leave it empty to run it site-wide. Learn more in Using Conditional Logic.

Congrats! You've just added JavaScript deferring functionality to Joomla without installing another plugin or adding unnecessary bloat to your site.

For instance, to learn more about how the PHP Snippet works, visit our documentation: https://www.tassos.gr/docs/tassos-code-snippets/types/php