Is there a way to add rel='preload' using addScript/addStyleSheet?

Question

I want to display some of the styles and scripts using rel='preload' to make my pages load faster - referring to the Google Lighthouse.

<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">

Is there any way to do this using addScript/addStyleSheet in Joomla?

$document->addStyleSheet("css/style.css");
$document->addScript("js/us.script.js");

Answer 1

I'll answer this myself too as I've been looking into lazy loading assets recently.

preload may seem like it asynchronously loads files but it doesn't. They're still considered render blocking.

This also applies if you also just add your assets to below the closing </body> tag as there's still remaining HTML to be rendered.

You're best approach will be to add a small snippet of Javascript of code before the closing </body> tag of your template:

<script>
// Lazy load all your CSS and fonts
for (const css of [
  '<?php echo $this->baseurl . '/templates/' . $this->template . '/css/template.css'; ?>',
  // You can define more CSS or font files here in the array
]) {
  const link = document.body.appendChild(document.createElement('link'));
  script.rel = 'stylesheet';
  script.href = css;
}

// Lazy load all your JS
for (const js of [
  '<?php echo $this->baseurl . '/templates/' . $this->template . '/css/template.js'; ?>',
  // You can define more Javascript files here in the array
]) {
  const script = document.body.appendChild(document.createElement('script'));
  script.async = false;
  script.src = js;
}
</script>

Note that I've written this in ES6. You can transpile back to ES5 if you wish to support IE11.

Answer 2

If I understand the usage of preload correctly, in 3.x you can add these links manually with addHeadlink():

// Preload resources
$mediaVersion = $this->mediaVersion ? '?' . $this->mediaVersion : '';
$this->addHeadLink($this->baseurl . '/templates/' . $this->template . '/css/template.css' . $mediaVersion, 'preload', 'rel', array('as' => 'style'));
$this->addHeadLink($this->baseurl . '/templates/' . $this->template . '/js/template.js' . $mediaVersion, 'preload', 'rel', array('as' => 'script'));

// Load resources
JHtml::_('script', 'template.js', array('version' => 'auto', 'relative' => true));
JHtml::_('stylesheet', 'template.css', array('version' => 'auto', 'relative' => true));

Note, document's $mediaVersion property works when added resources have auto value for version. If you're using a different method for generating version, change it on preload links accordingly.

Answer 3

It seems that Joomla 4.0 will have this possibility:

https://github.com/joomla/joomla-cms/pull/15880