it-swarm.com.de

Gibt es eine Möglichkeit, rel = 'preload' mit addScript / addStyleSheet hinzuzufügen?

Ich möchte einige der Stile und Skripte mit rel='preload' Anzeigen, damit meine Seiten schneller geladen werden - siehe Google Lighthouse .

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

Gibt es eine Möglichkeit, dies mit addScript/addStyleSheet in Joomla zu tun?

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

Ich werde dies auch selbst beantworten, da ich viel Erfahrung mit dem Laden von faulen Assets habe.

preload scheint Dateien asynchron zu laden, tut es aber nicht. Sie gelten immer noch als Renderblocker.

Dies gilt auch, wenn Sie Ihre Assets nur unterhalb des schließenden Tags </body> Hinzufügen, da noch HTML-Code zu rendern ist.

Am besten fügen Sie vor dem schließenden </body> - Tag Ihrer Vorlage einen kleinen Ausschnitt aus Javascript-Code hinzu:

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

Beachten Sie, dass ich dies in ES6 geschrieben habe. Sie können wieder auf ES5 umsteigen, wenn Sie IE11 unterstützen möchten.

3
Lodder

Wenn ich die Verwendung von preload richtig verstehe, können Sie in 3.x diese Links manuell mit addHeadlink() hinzufügen:

// 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));

Beachten Sie, dass die Eigenschaft $mediaVersion Des Dokuments funktioniert, wenn hinzugefügte Ressourcen den Wert auto für version haben. Wenn Sie eine andere Methode zum Generieren der Version verwenden, ändern Sie diese in preload Links entsprechend.

3
Sharky

Es scheint, dass Joomla 4.0 diese Möglichkeit haben wird:

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

0
Frostbourn