web-dev-qa-db-fra.com

Existe-t-il un moyen d'ajouter rel = 'précharge' à l'aide de addScript / addStyleSheet?

Je souhaite afficher certains styles et scripts à l'aide de rel='preload' pour que mes pages se chargent plus rapidement - en vous référant à Google Lighthouse .

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

Est-il possible de faire cela en utilisant addScript/addStyleSheet dans Joomla?

$document->addStyleSheet("css/style.css");
$document->addScript("js/us.script.js");
joomla-3.xjoomla-api
4
Frostbourn

Je vais également répondre à cette question, car j’ai beaucoup d’expérience avec les actifs de chargement paresseux.

preload peut sembler charger des fichiers de manière asynchrone, mais ce n'est pas le cas. Ils sont toujours considérés comme bloquant le rendu.

Cela s'applique également si vous ajoutez simplement vos ressources sous la balise de fermeture </body>, Car il reste du code HTML à restituer.

La meilleure approche consiste à ajouter un petit extrait de code Javascript avant la balise de fermeture </body> De votre modèle:

<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>

Notez que j'ai écrit ceci dans ES6. Vous pouvez transpiler à nouveau vers ES5 si vous souhaitez prendre en charge IE11.

3
Lodder

Si je comprends bien l'utilisation de preload, vous pouvez ajouter ces liens manuellement en 3.x avec 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));

Remarque, le document $mediaVersion La propriété fonctionne lorsque les ressources ajoutées ont la valeur auto pour version. Si vous utilisez une méthode différente pour générer la version, modifiez-la en conséquence sur les liens preload.

3
Sharky

Il semble que Joomla 4.0 aura cette possibilité:

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

0
Frostbourn