what is the best way to defer loading the JavaScript libraries (Richfaces, Primefaces, own stuff) with JSF to speed up page loading?
As Google PageSpeed plugins says it is recommend to parse JavaScript when the site is loaded completely. One way to achieve this is to put the JavaScripts loads at the end of the <body>
tag. An other way is to put the "defer" attribute to <script>
tag, which can not be done with JSF's <h:outputScript>
Tag as I saw.
So, how would you do this?
Use <h:outputScript target="body">
. It will then end up in the very end of <h:body>
. It namely defaults to "current" location in the view (another target
value is head
which will then make the script to end up in the <h:head>
, even when the script is specified somewhere in the <h:body>
).
<h:outputScript name="js/foo.js" target="body" />
If you want to apply this for 3rd party scripts as well, you'd need to create a custom SystemEventListener
hooking on PreRenderViewEvent
which does exactly that with help of UIViewRoot#getComponentResources()
and UIViewRoot#addComponentResource()
.
Don't know if that counts (you can call it a workaround),
But you can always include some js files in external xhtml page wich will be included in your main page with ui:include
which will be wrapped by <h:panelGroup id="externalPageWrapper" render="#{myBean.renderExternalPage}"
and with little help of js/jquery you can execute .click()
on some hidden h:commandButton
with f:ajax
that will change the renderExternalPage
to true and render the externalPageWrapper
that will load that xhtml page and all the js files that were included inside it...