We're introducing advanced script loading options for JavaScript Client Extensions in Liferay, providing developers more control over how JavaScript is applied to pages. This update allows the specification of async
and defer
attributes directly in the extension's configuration, optimizing the loading process and improving page performance.
Benefits for users:
- Improved Page Load Performance: by setting
async
ordefer
attributes, scripts can be loaded non-blocking, enhancing page responsiveness. - Enhanced Control: developers can pre-set these attributes in the YAML configuration or through the UI, ensuring scripts behave consistently across all pages without further adjustment.
- Streamlined Configuration: once set, these attributes are locked at the extension level, eliminating discrepancies and simplifying script management.
Allow developers to specify additional attributes to the <script>
tag when deploying in with the JS Client Extension.
Example usage in client-extension.yaml
: liferay-portal/workspaces/liferay-sample-workspace/client-extensions/liferay-sample-global-js-2/client-extension.yaml at master · liferay/liferay-portal
scriptElementAttributes:
async: true
data-attribute: "value"
data-senna-track: "permanent"
fetchpriority: "low"
Or, developers can configure the attributes via the create Client Extension UI too:
When configuring a JS CX on a page and async/defer
Boolean attributes are present in the CX (set in the yaml / defined through the UI), the following behaviors apply in regards to the Load type options:
- The attribute set in the CX will be used and the ability to change it when applying it on a page will be disabled.
- When both attributes are set in the CX,
async
will be applied. - When
async
ordefer
is set to false in the CS, the related option will be removed from the Load selector. (e.g. ifdefer: false
the load options available for the user will bedefault
andasync
).