I have been given the task of improving the speed of page loading of an website managed using Umbraco. From basic investigation, I found that some render blocking javascript libraries are showing down the website. When I move the reference of javascript libraries from header to the bottom of the page before the end of body tag. I was able to improve the speed of the site.
But it broke all the pages (templates) that had inline javascripts (jQuery) dependant on the library getting loaded. I need to place the page (template) specific javascripts somewhere after the jQuery libabry is loaded.
What is the best approach to solve this problem?
Also has anyone used asynchronous javascript loading that is not render blocking but maintains the sequence of execution and handel page specific javascript? I would really appreciate an article or example that solves the problem.
This issue is more a general thing than it's Umbraco related - Just to be clear that this is an issue no matter the CMS. It comes down to the way you use JavaScript in a project.
So yes, ideally all JavaScript should be loaded before the and not in the header as you say.
If you move jquery to the bottom of the site you'll also need to move the jquery dependant libraries to the bottom of the site, after the line that loads the jquery library. It would also be a good idea to move any inline JavaScript functions into another script filed called main.js for instance and load it after jquery and potentiel jquery dependencies.
It's hard to give you any specific advice since we don't know how your site was build and no Umbraco website is build the same way so it's only possible to provide these general pointers.
An example could be that you have a specific doucument type for a google map, the way I would do it is to include the script for the google map only on the template for the google map, or in the Razor / XSLT file for that renders the google map.
Speed up Umbraco website: How to load page specific javascript at the footer
Hi Experts,
I have been given the task of improving the speed of page loading of an website managed using Umbraco. From basic investigation, I found that some render blocking javascript libraries are showing down the website. When I move the reference of javascript libraries from header to the bottom of the page before the end of body tag. I was able to improve the speed of the site.
But it broke all the pages (templates) that had inline javascripts (jQuery) dependant on the library getting loaded. I need to place the page (template) specific javascripts somewhere after the jQuery libabry is loaded.
What is the best approach to solve this problem?
Also has anyone used asynchronous javascript loading that is not render blocking but maintains the sequence of execution and handel page specific javascript? I would really appreciate an article or example that solves the problem.
Thanks in advance.
Sudipta
Hi Sudipta
This issue is more a general thing than it's Umbraco related - Just to be clear that this is an issue no matter the CMS. It comes down to the way you use JavaScript in a project.
So yes, ideally all JavaScript should be loaded before the and not in the header as you say.
If you move jquery to the bottom of the site you'll also need to move the jquery dependant libraries to the bottom of the site, after the line that loads the jquery library. It would also be a good idea to move any inline JavaScript functions into another script filed called main.js for instance and load it after jquery and potentiel jquery dependencies.
You could also consider using a script loader like require.js or perhaps the loadJs script from filament group here https://github.com/filamentgroup/loadJS
You could also consider using the ClientDependency framework, which is baked directly in the Umbraco code base. You can read more about how to use it here http://our.umbraco.org/wiki/reference/templates/adding-css-and-javascript-using-the-clientdependency and here https://github.com/Shazwazza/ClientDependency/wiki
It's hard to give you any specific advice since we don't know how your site was build and no Umbraco website is build the same way so it's only possible to provide these general pointers.
Hope this helps.
/Jan
Hi Sudpipta,
I think that Jan´s is provides some good pointers, I would like to add something that I think could be a help for you. Try to see this video about using @RenderSection to load scripts on specific page. http://umbraco.tv/videos/umbraco-v7/implementor/fundamentals/templating/advanced-master-templates/, here you also will find the written documentation for the content of the video. http://umbraco.tv/videos/umbraco-v7/implementor/fundamentals/templating/advanced-master-templates/documentation
An example could be that you have a specific doucument type for a google map, the way I would do it is to include the script for the google map only on the template for the google map, or in the Razor / XSLT file for that renders the google map.
Hope these adds are helpfull.
/Dennis
is working on a reply...