View Issue Details
| ID | Project | Category | View Status | Date Submitted | Last Update |
|---|---|---|---|---|---|
| 0006245 | OXID eShop (all versions) | 4.05. Performance | public | 2015-10-14 18:56 | 2022-02-01 14:51 |
| Reporter | keywan.ghadami | Assigned To | |||
| Priority | low | Severity | feature | Reproducibility | always |
| Status | confirmed | Resolution | open | ||
| Summary | 0006245: Javascript should be loaded async | ||||
| Description | script 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 Reproduce | load 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 Information | In 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. | ||||
| Tags | No tags attached. | ||||
| Theme | Not defined | ||||
| Browser | Not defined | ||||
| PHP Version | Not defined | ||||
| Database Version | Not defined | ||||
