I need to add a third party js and CSS to my template head.

I'm getting Leverage browser caching and someone advised me to load the files locally.

created a directory in root: assets/third-party/ and setup a cron job that get the files from their site and store them in that directory.

What is the best way to add them to the head in Joomla 3.x? I've tried these ones

<script type="text/javascript" src="<?php echo JURI::base(); ?>assets/third-party/float.js">

<?php JHtml::script(Juri::base() . 'assets/third-party/float.js');?>

<link href="<?php echo JURI::base(); ?>assets/third-party/float.css" rel="stylesheet" />

thanks in advance

  • I'm using JCH Optimize Pro for optimizations.
    – NLA
    Mar 7 '17 at 15:06

Personally, I'd much rather deliver CSS and JS files via a CDN than using something like JCH optimise to combine them all into 1 file. With HTTP/2, files are delivered much quicker, so a couple more http requests won't make any difference.

If there is a CDN version, then simply use:

JHtml::_('script', '//cdnjs.cloudflare.com/ajax/libs/FOO/BAR/file.js');

JHtml::_('stylesheet', '//cdnjs.cloudflare.com/ajax/libs/FOO/BAR/file.css');


JHtml::_('script', JUri::base() . 'assets/third-party/float.js');

JHtml::_('stylesheet', JUri::base() . 'assets/third-party/float.css');
  • Thanks, and is the CSS one correct: JHtml::_('stylesheet', JUri::base() . 'assets/third-party/float.css');
    – NLA
    Mar 7 '17 at 17:42
  • The errors I get are mainly for those 2 files and also I use comodo for SSL and have their trust logo on the footer and Google gives Leverage browser caching error for these URLs: secure.comodo.com/trustlogo/images/popup/seal_bg.gif (6 hours) secure.comodo.com…rustlogo/images/popup/warranty_level.gif (6 hours) and ask to Compressing secure.comodo.com/trustlogo/javascript/trustlogo.js could save 12.3KiB (70% reduction). I tried to do the same with trust logo script and load it locally but it doesn't work, any idea on how to fix that?
    – NLA
    Mar 7 '17 at 17:49
  • here is what they asked me to ad to the head: <script type="text/javascript">//<![CDATA[ var tlJsHost = ((window.location.protocol == "https:") ? "secure.comodo.com" : "trustlogo.com/"); document.write(unescape("%3Cscript src='" + tlJsHost + "trustlogo/javascript/trustlogo.js' type='text/javascript'%3E%3C/script%3E")); //]]> </script>
    – NLA
    Mar 7 '17 at 17:50

Go with JHtml::script and JHtml::stylesheet - it is by the cleanest way of including CSS and JS in Joomla.

  • is this the correct syntax? also how can I add the defer and async attributes? <?php JHtml::script(Juri::base() . 'assets/third-party/float.js');?>
    – NLA
    Mar 7 '17 at 17:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.