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