Asset loading
Permalink
Hi,
In Concrete5 the JavaScript in the blocks are some times placed in the view (inline in the HTML). Mostly jQuery is a dependency. For this reason jQuery must be loaded in the head of the document. Other wise an error will occur: jQuery is not defined.
This problem can be solved by adding the inline JavaScript to a queue. A script will check the que and its dependencies. If the dependencies are loaded the inline script will be executed.
An array needs to be placed in the head of the document
In the view.php we need to wrap our code in a function and add it to the que.
In the footer an async script can be loaded that triggers and checks the scripts
I have created an examplehttps://github.com/Rgeelen/inline-script-loader... . The example is to display the idea.
The goal is that loading assets can be done in such a way that Google will not complain about the block rendering scripts and help to get a faster first view.
Maybe we can come up with more ideas and best practises about asset loading and theme performance.
Cheers,
Rge
In Concrete5 the JavaScript in the blocks are some times placed in the view (inline in the HTML). Mostly jQuery is a dependency. For this reason jQuery must be loaded in the head of the document. Other wise an error will occur: jQuery is not defined.
This problem can be solved by adding the inline JavaScript to a queue. A script will check the que and its dependencies. If the dependencies are loaded the inline script will be executed.
An array needs to be placed in the head of the document
var ccm_script_que = ccm_script_que || [];
In the view.php we need to wrap our code in a function and add it to the que.
// When it is a function the array should contain //[function, ['dependicies']] ccm_script_que.push([alerter, ['jQuery']]); //when it is an object the array should contain //[object, object trigger function, ['dependecies']] ccm_script_que.push([myCode, 'init']);
In the footer an async script can be loaded that triggers and checks the scripts
new ScriptLoader(ccm_script_que);
I have created an examplehttps://github.com/Rgeelen/inline-script-loader... . The example is to display the idea.
The goal is that loading assets can be done in such a way that Google will not complain about the block rendering scripts and help to get a faster first view.
Maybe we can come up with more ideas and best practises about asset loading and theme performance.
Cheers,
Rge
Automating the critical css generation would be a nice thing. I geus the best moment to generate the critical css is when the page is saved. I am not sure what options the less parser gives us.
Beside that there are some other issues. When caching is enabled the block assets are combined but the js and css of the theme is not.
This results in two css blocking scripts. The theme css and the combined block assets css. When loading the theme css async (loadCss) it is not possible to overwrite the block styles. It is possible to make sure the blocks css is provided by theme theme. But there is still a chance that the use installs another block.
Beside that there are some other issues. When caching is enabled the block assets are combined but the js and css of the theme is not.
This results in two css blocking scripts. The theme css and the combined block assets css. When loading the theme css async (loadCss) it is not possible to overwrite the block styles. It is possible to make sure the blocks css is provided by theme theme. But there is still a chance that the use installs another block.
$this->providesAsset (‘css’, ‘blocks/image_slider’);
I like the idea of finding ways to increase performance.
Dealing with loading jQuery in the head is something I've spent a lot of time thinking about.
This was a result of reading this articlehttps://www.filamentgroup.com/lab/performance-rwd.html... and then this bookhttp://abookapart.com/products/responsible-responsive-design... . Both of which are excellent.
Here is a talk by the author that I believe covers the topics:
http://youtu.be/W3pyMbGNOas
One of the goals is "Basically, we want to fit the HTML, CSS, and JavaScript that’s necessary for Start Render in that first 14kb round trip.". A part of this goal is inlining the "critical CSS" for the page to render. Doing this in a CMS is not a simple task. I would be very interested in knowing if we can somehow automate it.
On slow connections and large sites, it is supposed to offer a substantial performance increase.
I am excited for HTTP2, but it is still a ways away from mainstream adoption.