web-dev-qa-db-ja.com

addScript / addStyleSheetを使用してrel = 'preload'を追加する方法はありますか？

Google Lighthouse を参照して、rel='preload'を使用していくつかのスタイルとスクリプトを表示し、ページの読み込みを高速化したいと思います。

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

JoomlaでaddScript/addStyleSheetを使用してこれを行う方法はありますか？

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

アセットの遅延読み込みの経験が多いので、私もこれに答えます。

preloadはファイルを非同期でロードするように見えますが、そうではありません。それらはまだレンダーブロッキングと見なされます。

これは、レンダリングするHTMLがまだ残っているため、アセットを終了</body>タグの下にも追加した場合にも当てはまります。

テンプレートの</body>終了タグの前に、コードのJavascriptの小さなスニペットを追加するのが最善の方法です。

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

これはES6で記述したことに注意してください。 IE11をサポートする場合は、ES5にトランスパイルできます。

3
Lodder

preloadの使用法を正しく理解していれば、3.xでは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));

注、ドキュメントの$mediaVersionプロパティは、追加されたリソースにautoのversion値がある場合に機能します。バージョンの生成に別の方法を使用している場合は、preloadリンクでそれに応じて変更してください。

3
Sharky

Joomla 4.0にはこの可能性があるようです：

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

0
Frostbourn