View Issue Details

IDProjectCategoryView StatusLast Update
0006245OXID eShop (all versions)4.05. Performancepublic2022-02-01 14:51
Reporterkeywan.ghadami Assigned To 
PrioritylowSeverityfeatureReproducibilityalways
Status confirmedResolutionopen 
Summary0006245: Javascript should be loaded async
Descriptionscript tags are at the bottom of the page and javascript is loaded synchronously
after the page was transfered to the browser

what i expected

at least a option to to render the script tag in the header with the async attribute so the page and the javascript are loaded in parallel
Steps To Reproduceload the oxid demo shop
see the source code, and search for <script> tags with src attribute. They are at the bottom of the page.

Additional InformationIn a project i used grunt to minify and merge some javascripts, but performance was still not optimal.

I wrote a module to replace the oxscript function, so it was able to merge and load javascript async. Because the page output is chunked, the browser was able to download the javascript file while still loading the rest of the page - and so i got about 100% performance boost compared to the already minified and merged version.


Async loading of javascript is not perfect for every webshop and a little bit complex because it has to handle dependencies from the inline javascript, so it should be optional. But if you are interested feel free to contact me, a can provide the modified oxscript function. To summarize what the modified oxscript does when it sees the new async attribute:

It inject a little inline helper function at the top of the page:
 
var OxAsyncJavascript=function(){function n(n){r=n,i&&c()}function t(){i=!0,c()}function c(){r&&r()}var r,i=!1;return{then:n,resolve:t}}();

together with:
OxAsyncJavascript.resolve();
at the end of the async loaded javascript
an enclosed the rest of the inlinded javascript with:
OxAsyncJavascript.then( function() {

}
to be able to
start the rest of the inline Javascript when the async loading is completed.

TagsNo tags attached.
ThemeNot defined
BrowserNot defined
PHP VersionNot defined
Database VersionNot defined

Activities

There are no notes attached to this issue.