Resolve "Specific Async Script Loading by using a Page Variable"
What does this MR do?
It makes it possible to set script loading on a specific page to defer. Simply set @page_defer_javascript
to true
and all scripts will get the defer="defer" attribute.
Why was this MR needed?
To boost performance already on specific pages. Later on we can reuse the javascript_tag overwrite exactly in the opposite way so all scripts are defer except specific ones.
Does this MR meet the acceptance criteria?
-
Changelog entry added, if necessary -
Documentation created/updated -
API support added - Tests
-
Added for this feature/bug -
All builds are passing
-
-
Conform by the merge request performance guides -
Conform by the style guides -
Branch has no merge conflicts with master
(if it does - rebase it please) -
Squashed related commits together
What are the relevant issue numbers?
Closes #34904 (closed)
Merge request reports
Activity
assigned to @timzallmann
added 1 commit
- f8499c1a - Renamed from async to defer script tag helper
mentioned in issue #34903 (closed)
@mikegreiling It works :-) We now have
@page_defer_javascript
for specifc defer script loading.I think we can easily reuse that later to deliver then everything with defer loading as soon as we have removed the inline script.
Please take a look, i will add also a test on Monday.
added 2 commits
assigned to @iamphill
assigned to @timzallmann
@iamphill on which page ? or on all ? will check
@timzallmann dashboard/projects
@iamphill Its really strange I tried it now multiple times, only happened once. Looks like a racing condition. Do you have it always ?
@timzallmann Yeah it happens all the time to me.
I'm taking a look at the performance changes in Chrome devtools for some of the effected pages. Sadly, much of the performance impact is blocked by the 1.7 Mb stylesheet which is now the lowest common denominator. We're going to need to break this up before much of these improvements will be visible.
I'm compiling my production assets to get a more accurate test.
One other nice side effect of
<script defer>
is that we can assume that the DOM is already available by the time our scripts get executed, so once we are usingdefer
on every page we can stop assigning callbacks to theDOMContentLoaded
eventI just spent some time playing around with this and I've noticed something odd. Even though all of the scripts are deferred, it looks like a few of them are still evaluated before the first paint. I'm not quite sure why this is, because at this point the HTML and CSS are ready. It shouldn't need to evaluate these before rendering. Perhaps there is some internal optimization at work here?
I also noticed that the first paint doesn't happen until after the fontawesome
woff
font file is fully downloaded, so maybe that was holding it up as well, and it tried to evaluate some javascript while waiting?@mikegreiling Hm, i only see a 122KB (gzipped) on .com ? Maybe we seperate the bootstrap + our customisations , so the bootstrap part (which will change way less) is cached hard and our css, not sure if that improves anything ?! We also need a deep look at cache headers, i think there is also quite an improvement possible.
added 358 commits
-
169622e7...fe0c3b79 - 351 commits from branch
master
- d737bfec - Overwriting the standard JS Include Tag
- 0b149b8d - Defer script loading by setting page variable -@page_defer_javascript
- 8f261894 - Renamed from async to defer script tag helper
- 7d30617d - Removed Trailing Space
- 86501cd1 - Added Bootlint Exclusion for that file
- f37d9e7e - Added Test for deferred script loading
- c897a911 - Fixed test for script tag
Toggle commit list-
169622e7...fe0c3b79 - 351 commits from branch
added 1 commit
- 2263e561 - Restructure multiple $.ready setups to work with deferred loading
added 366 commits
-
69279059...d964816b - 356 commits from branch
master
- 2742b3e2 - Overwriting the standard JS Include Tag
- b8e8a07b - Defer script loading by setting page variable -@page_defer_javascript
- 2507de6d - Renamed from async to defer script tag helper
- bd0effa4 - Removed Trailing Space
- 5eedd42a - Added Bootlint Exclusion for that file
- b30a4250 - Added Test for deferred script loading
- 4fd90a64 - Fixed test for script tag
- c1245889 - Fix for underscore undefined problem
- 442ce155 - Restructure multiple $.ready setups to work with deferred loading
- 8ac2502b - Fix for linting error
Toggle commit list-
69279059...d964816b - 356 commits from branch
added 134 commits
-
8ac2502b...1a2b92f7 - 124 commits from branch
master
- 2bd4604d - Overwriting the standard JS Include Tag
- 8de67d03 - Defer script loading by setting page variable -@page_defer_javascript
- 7c205c6e - Renamed from async to defer script tag helper
- 4ebf5228 - Removed Trailing Space
- 668b48f1 - Added Bootlint Exclusion for that file
- 59bb759b - Added Test for deferred script loading
- c11be8f7 - Fixed test for script tag
- ee7793db - Fix for underscore undefined problem
- f98d2eec - Restructure multiple $.ready setups to work with deferred loading
- db1ff511 - Fix for linting error
Toggle commit list-
8ac2502b...1a2b92f7 - 124 commits from branch
added 92 commits
-
6afc2245...4eebd8e1 - 79 commits from branch
master
- a466b26f - Overwriting the standard JS Include Tag
- 74c90c6c - Defer script loading by setting page variable -@page_defer_javascript
- f95b8c89 - Renamed from async to defer script tag helper
- 3f2167c2 - Removed Trailing Space
- cf5e3f6c - Added Bootlint Exclusion for that file
- 16e6031f - Added Test for deferred script loading
- 7edbe917 - Fixed test for script tag
- a719a2e3 - Fix for underscore undefined problem
- 660927a9 - Restructure multiple $.ready setups to work with deferred loading
- e0432811 - Fix for linting error
- f59d8803 - Fixed the todo done buttons redirect
- 59a315fc - Fixed a problem with the select2 box on the project edit, as with the current…
- 51f13d4e - Fixing Event Handlers on the ToDo Page
Toggle commit list-
6afc2245...4eebd8e1 - 79 commits from branch
We might use https://api.jquery.com/jquery.holdready/ to fix some of those loading errors due to the
$.ready
on a global scale.I had to fix now an error cause suddenly
e.preventDefault
is not enough any more it also needse.stopPropagation
, no clue why so far. Might be better to get rid of these false links anyhow in the next step.changed milestone to %9.5
added 166 commits
-
51f13d4e...27df74ad - 153 commits from branch
master
- 1fb2e319 - Overwriting the standard JS Include Tag
- e431dda6 - Defer script loading by setting page variable -@page_defer_javascript
- 9ba4164e - Renamed from async to defer script tag helper
- 16aa6b9a - Removed Trailing Space
- 1a2e3252 - Added Bootlint Exclusion for that file
- 81f82374 - Added Test for deferred script loading
- e14de9dc - Fixed test for script tag
- 4973731b - Fix for underscore undefined problem
- 8534a0bf - Restructure multiple $.ready setups to work with deferred loading
- 8cc423cf - Fix for linting error
- 9b4d7413 - Fixed the todo done buttons redirect
- 29887a71 - Fixed a problem with the select2 box on the project edit, as with the current…
- 40c389a0 - Fixing Event Handlers on the ToDo Page
Toggle commit list-
51f13d4e...27df74ad - 153 commits from branch
added 142 commits
-
40c389a0...9a3b2834 - 129 commits from branch
master
- b72aa8f6 - Overwriting the standard JS Include Tag
- a9186a6b - Defer script loading by setting page variable -@page_defer_javascript
- 2ea637d6 - Renamed from async to defer script tag helper
- 06f2b68a - Removed Trailing Space
- 57c5dd62 - Added Bootlint Exclusion for that file
- 6852e3c6 - Added Test for deferred script loading
- e1cd7e3e - Fixed test for script tag
- 3b1168a0 - Fix for underscore undefined problem
- 5ff3721c - Restructure multiple $.ready setups to work with deferred loading
- 9aa55e14 - Fix for linting error
- b309001d - Fixed the todo done buttons redirect
- 548019b7 - Fixed a problem with the select2 box on the project edit, as with the current…
- 1e7fee55 - Fixing Event Handlers on the ToDo Page
Toggle commit list-
40c389a0...9a3b2834 - 129 commits from branch
added 56 commits
-
1e7fee55...a9f56ae1 - 43 commits from branch
master
- 22b9203d - Overwriting the standard JS Include Tag
- 906aae17 - Defer script loading by setting page variable -@page_defer_javascript
- 0ae74df9 - Renamed from async to defer script tag helper
- 1f5af235 - Removed Trailing Space
- f2ccb8ca - Added Bootlint Exclusion for that file
- 11c449c3 - Added Test for deferred script loading
- 570124a1 - Fixed test for script tag
- 99118c50 - Fix for underscore undefined problem
- e063b41b - Restructure multiple $.ready setups to work with deferred loading
- b520a591 - Fix for linting error
- 9ecac0a7 - Fixed the todo done buttons redirect
- d0266d3b - Fixed a problem with the select2 box on the project edit, as with the current…
- e9b9f8ca - Fixing Event Handlers on the ToDo Page
Toggle commit list-
1e7fee55...a9f56ae1 - 43 commits from branch
added 1 commit
- 5ab1de46 - Setting jquery ready on hold for deferred JS loading
added 1 commit
- a368fcc7 - Putting startgl.js on a testing coverage exemption like main.js
assigned to @iamphill
@iamphill I found the secret ingredient for activating deferred loading stable with all our
$.ready
handlers, it is$.holdReady(true);
So what I did is now in the jquery bundle I set it to false and created a startgl.js which should always be loaded last and then it will set it to ready. This works then with pages where we still load in the classic way and the ones where we have now deferred loading./cc @jschatz1 , @mikegreiling
I wonder if instead of doing the
holdReady
thing we just enable this globally. All the inline JS is gone now so we should be safe to that right? @timzallmannUnfortunately not, the
holdReady
is not about having it globally or not. The problem is that due to the defer=true we are still loading the JS bundles in the correct order, but we have multiple of those and they have $.ready listeners and they fire immediately but in reality, not everything is loaded at that moment.Abstract Example :
- File 2 of 4 is loaded
- Has $.ready -> which is fired immediately as the document reached ready state (except our JS)
- That Handler has a dependency which is part of File 3 of 4
- Kabooooommmm
You can mitigate that with
setTimeout
and no timing (which I tried in my first commits) but this leads to endless patching.$.holdReady
simply stops all $.ready until we tell jquery to fire, but then it would only fire if ready actually happened. So this makes it safe for deferring and non-deferred pages.added 85 commits
-
a368fcc7...90cb2aab - 68 commits from branch
master
- c20f324b - Overwriting the standard JS Include Tag
- 5ea4ea44 - Defer script loading by setting page variable -@page_defer_javascript
- ae63e566 - Renamed from async to defer script tag helper
- e34cd8e6 - Removed Trailing Space
- a432951c - Added Bootlint Exclusion for that file
- bba42486 - Added Test for deferred script loading
- 09fa4d86 - Fixed test for script tag
- ff518297 - Fix for underscore undefined problem
- c2e2b588 - Restructure multiple $.ready setups to work with deferred loading
- 894d7803 - Fix for linting error
- bc92a0fc - Fixed the todo done buttons redirect
- 7a279cff - Fixed a problem with the select2 box on the project edit, as with the current…
- 92495e22 - Fixing Event Handlers on the ToDo Page
- 0aa4c2fc - Fixing Loading Order
- aa18cc56 - Setting jquery ready on hold for deferred JS loading
- 7fe4a9f1 - Putting startgl.js on a testing coverage exemption like main.js
- 74c1d556 - enabled defer globally
Toggle commit list-
a368fcc7...90cb2aab - 68 commits from branch