diff --git a/libraries/src/Document/Renderer/Html/StylesRenderer.php b/libraries/src/Document/Renderer/Html/StylesRenderer.php
index ae84e1230e5..06cc7bb8692 100644
--- a/libraries/src/Document/Renderer/Html/StylesRenderer.php
+++ b/libraries/src/Document/Renderer/Html/StylesRenderer.php
@@ -191,11 +191,21 @@ class StylesRenderer extends DocumentRenderer
$relation = isset($attribs['rel']) ? $attribs['rel'] : 'stylesheet';
+ if (isset($attribs['rel']))
+ {
+ unset($attribs['rel']);
+ }
+
// Render the element with attributes
$buffer .= 'renderAttributes($attribs);
$buffer .= ' />';
+ if ($relation === 'lazy-stylesheet')
+ {
+ $buffer .= '';
+ }
+
// This is for IE conditional statements support.
if (!\is_null($conditional))
{
diff --git a/modules/mod_menu/tmpl/default.php b/modules/mod_menu/tmpl/default.php
index 58286cbbaee..9f58fd9f75a 100644
--- a/modules/mod_menu/tmpl/default.php
+++ b/modules/mod_menu/tmpl/default.php
@@ -13,7 +13,8 @@ use Joomla\CMS\Helper\ModuleHelper;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
$wa = $app->getDocument()->getWebAssetManager();
-$wa->registerAndUseScript('mod_menu', 'mod_menu/menu.min.js', [], ['defer' => true]);
+$wa->registerAndUseScript('mod_menu', 'mod_menu/menu.min.js', [], ['type' => 'module']);
+$wa->registerAndUseScript('mod_menu', 'mod_menu/menu-es5.min.js', [], ['nomodule' => true, 'defer' => true]);
$id = '';
diff --git a/templates/cassiopeia/component.php b/templates/cassiopeia/component.php
index b3a74d00e39..fe52228409d 100644
--- a/templates/cassiopeia/component.php
+++ b/templates/cassiopeia/component.php
@@ -51,12 +51,16 @@ $this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon.svg', '', [], true, 1)
$this->addHeadLink(HTMLHelper::_('image', 'favicon.ico', '', [], true, 1), 'alternate icon', 'rel', ['type' => 'image/vnd.microsoft.icon']);
$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon-pinned.svg', '', [], true, 1), 'mask-icon', 'rel', ['color' => '#000']);
+// Defer font awesome
+$wa->getAsset('style', 'fontawesome')->setAttribute('rel', 'lazy-stylesheet');
?>
-
-
+
+
+
+
diff --git a/templates/cassiopeia/error.php b/templates/cassiopeia/error.php
index 2db73866d48..66431436e25 100644
--- a/templates/cassiopeia/error.php
+++ b/templates/cassiopeia/error.php
@@ -84,6 +84,9 @@ else
$wrapper = $params->get('fluidContainer') ? 'wrapper-fluid' : 'wrapper-static';
$this->setMetaData('viewport', 'width=device-width, initial-scale=1');
+
+// Defer font awesome
+$wa->getAsset('style', 'fontawesome')->setAttribute('rel', 'lazy-stylesheet');
?>
@@ -188,6 +191,5 @@ $this->setMetaData('viewport', 'width=device-width, initial-scale=1');
-
diff --git a/templates/cassiopeia/html/mod_menu/dropdown-metismenu.php b/templates/cassiopeia/html/mod_menu/dropdown-metismenu.php
index bfb0bf8c14e..6972c360792 100644
--- a/templates/cassiopeia/html/mod_menu/dropdown-metismenu.php
+++ b/templates/cassiopeia/html/mod_menu/dropdown-metismenu.php
@@ -15,7 +15,7 @@ use Joomla\Utilities\ArrayHelper;
/** @var WebAssetManager $wa */
$wa = $app->getDocument()->getWebAssetManager();
-$wa->registerAndUseScript('metismenu', 'media/templates/cassiopeia/js/mod_menu/menu-metismenu.min.js', [], [], ['metismenujs']);
+$wa->registerAndUseScript('metismenu', 'media/templates/cassiopeia/js/mod_menu/menu-metismenu.min.js', [], ['defer' => true], ['metismenujs']);
$attributes = [];
$attributes['class'] = 'mod-menu mod-menu_dropdown-metismenu metismenu mod-list ' . $class_sfx;
diff --git a/templates/cassiopeia/index.php b/templates/cassiopeia/index.php
index 0c967b43f74..a4c81c415f3 100644
--- a/templates/cassiopeia/index.php
+++ b/templates/cassiopeia/index.php
@@ -95,6 +95,9 @@ $wrapper = $this->params->get('fluidContainer') ? 'wrapper-fluid' : 'wrapper-sta
$this->setMetaData('viewport', 'width=device-width, initial-scale=1');
$stickyHeader = $this->params->get('stickyHeader') ? 'position-sticky sticky-top' : '';
+
+// Defer font awesome
+$wa->getAsset('style', 'fontawesome')->setAttribute('rel', 'lazy-stylesheet');
?>
@@ -216,6 +219,5 @@ $stickyHeader = $this->params->get('stickyHeader') ? 'position-sticky sticky-top
-
diff --git a/templates/cassiopeia/joomla.asset.json b/templates/cassiopeia/joomla.asset.json
index 6f4e1fd44f6..0b3367905f9 100644
--- a/templates/cassiopeia/joomla.asset.json
+++ b/templates/cassiopeia/joomla.asset.json
@@ -54,6 +54,9 @@
"description": "The file containing the javascript for this template.",
"type": "script",
"uri": "template.js",
+ "attributes" : {
+ "defer": true
+ },
"dependencies": [
"core"
]
diff --git a/templates/cassiopeia/js/template.es5.js b/templates/cassiopeia/js/template.es5.js
new file mode 100644
index 00000000000..178d4422970
--- /dev/null
+++ b/templates/cassiopeia/js/template.es5.js
@@ -0,0 +1,58 @@
+/**
+ * @package Joomla.Site
+ * @subpackage Templates.Cassiopeia
+ * @copyright (C) 2017 Open Source Matters, Inc.
+ * @license GNU General Public License version 2 or later; see LICENSE.txt
+ * @since 4.0
+ */
+
+Joomla = window.Joomla || {};
+
+(function(Joomla, document) {
+ 'use strict';
+
+ function initTemplate(event) {
+ var target = event && event.target ? event.target : document;
+
+ /**
+ * Prevent clicks on buttons within a disabled fieldset
+ */
+ var fieldsets = target.querySelectorAll('fieldset.btn-group');
+ for (var i = 0; i < fieldsets.length; i++) {
+ var self = fieldsets[i];
+ if (self.getAttribute('disabled') === true) {
+ self.style.pointerEvents = 'none';
+ var btns = self.querySelectorAll('.btn');
+ for (var ib = 0; ib < btns.length; ib++) {
+ btns[ib].classList.add('disabled');
+ }
+ }
+ }
+ }
+
+ document.addEventListener('DOMContentLoaded', function (event) {
+ initTemplate(event);
+
+ /**
+ * Back to top
+ */
+ var backToTop = document.getElementById('back-top');
+ if (backToTop) {
+ backToTop.addEventListener('click', function(event) {
+ event.preventDefault();
+ window.scrollTo(0, 0);
+ });
+ }
+
+ [].slice.call(document.head.querySelectorAll('link[rel="lazy-stylesheet"]'))
+ .forEach(function($link){
+ $link.rel = "stylesheet";
+ });
+ });
+
+ /**
+ * Initialize when a part of the page was updated
+ */
+ document.addEventListener('joomla:updated', initTemplate);
+
+})(Joomla, document);
diff --git a/templates/cassiopeia/js/template.js b/templates/cassiopeia/js/template.js
index 5d059d02862..178d4422970 100644
--- a/templates/cassiopeia/js/template.js
+++ b/templates/cassiopeia/js/template.js
@@ -9,45 +9,50 @@
Joomla = window.Joomla || {};
(function(Joomla, document) {
- 'use strict';
+ 'use strict';
- function initTemplate(event) {
- var target = event && event.target ? event.target : document;
+ function initTemplate(event) {
+ var target = event && event.target ? event.target : document;
- /**
- * Prevent clicks on buttons within a disabled fieldset
- */
- var fieldsets = target.querySelectorAll('fieldset.btn-group');
- for (var i = 0; i < fieldsets.length; i++) {
- var self = fieldsets[i];
- if (self.getAttribute('disabled') === true) {
- self.style.pointerEvents = 'none';
- var btns = self.querySelectorAll('.btn');
- for (var ib = 0; ib < btns.length; ib++) {
- btns[ib].classList.add('disabled');
- }
- }
- }
- }
+ /**
+ * Prevent clicks on buttons within a disabled fieldset
+ */
+ var fieldsets = target.querySelectorAll('fieldset.btn-group');
+ for (var i = 0; i < fieldsets.length; i++) {
+ var self = fieldsets[i];
+ if (self.getAttribute('disabled') === true) {
+ self.style.pointerEvents = 'none';
+ var btns = self.querySelectorAll('.btn');
+ for (var ib = 0; ib < btns.length; ib++) {
+ btns[ib].classList.add('disabled');
+ }
+ }
+ }
+ }
- document.addEventListener('DOMContentLoaded', function (event) {
- initTemplate(event);
+ document.addEventListener('DOMContentLoaded', function (event) {
+ initTemplate(event);
- /**
- * Back to top
- */
- var backToTop = document.getElementById('back-top');
- if (backToTop) {
- backToTop.addEventListener('click', function(event) {
- event.preventDefault();
- window.scrollTo(0, 0);
- });
- }
- });
+ /**
+ * Back to top
+ */
+ var backToTop = document.getElementById('back-top');
+ if (backToTop) {
+ backToTop.addEventListener('click', function(event) {
+ event.preventDefault();
+ window.scrollTo(0, 0);
+ });
+ }
- /**
- * Initialize when a part of the page was updated
- */
- document.addEventListener('joomla:updated', initTemplate);
+ [].slice.call(document.head.querySelectorAll('link[rel="lazy-stylesheet"]'))
+ .forEach(function($link){
+ $link.rel = "stylesheet";
+ });
+ });
+
+ /**
+ * Initialize when a part of the page was updated
+ */
+ document.addEventListener('joomla:updated', initTemplate);
})(Joomla, document);
diff --git a/templates/cassiopeia/js/template.min.js b/templates/cassiopeia/js/template.min.js
index 98c5eaea5f8..fb98a99341b 100644
--- a/templates/cassiopeia/js/template.min.js
+++ b/templates/cassiopeia/js/template.min.js
@@ -1 +1 @@
-Joomla=window.Joomla||{},function(e,t){"use strict";function n(e){for(var n=(e&&e.target?e.target:t).querySelectorAll("fieldset.btn-group"),o=0;o';
}
+// Defer font awesome
+$wa->getAsset('style', 'fontawesome')->setAttribute('rel', 'lazy-stylesheet');
?>
+
-
+
+
diff --git a/templates/cassiopeia/scss/global/fonts-local_roboto.scss b/templates/cassiopeia/scss/global/fonts-local_roboto.scss
index 00799041734..c4218d36c1a 100644
--- a/templates/cassiopeia/scss/global/fonts-local_roboto.scss
+++ b/templates/cassiopeia/scss/global/fonts-local_roboto.scss
@@ -1,5 +1,6 @@
// Fonts
-@import "../../../../media/vendor/roboto-fontface/scss/roboto/roboto-fontface.css";
+$roboto-font-path: "../../../../media/vendor/roboto-fontface/fonts" !default;
+@import "../../../../media/vendor/roboto-fontface/scss/roboto/sass/roboto-fontface";
:root {
--cassiopeia-font-family-body: "Roboto", sans-serif;
diff --git a/templates/cassiopeia/scss/vendor/fontawesome-free/fontawesome.scss b/templates/cassiopeia/scss/vendor/fontawesome-free/fontawesome.scss
index 38e40064141..ffe250f937f 100644
--- a/templates/cassiopeia/scss/vendor/fontawesome-free/fontawesome.scss
+++ b/templates/cassiopeia/scss/vendor/fontawesome-free/fontawesome.scss
@@ -1,5 +1,6 @@
// Override the font path
$fa-font-path: "../../../../../media/vendor/fontawesome-free/webfonts" !default;
+$fa-font-display: block !default;
// Font Awesome 5 Free
@import "../../../../../media/vendor/fontawesome-free/scss/fontawesome";