Change the order of JS and CSS resources
The branch https://github.com/nuxeo/nuxeo-jsf/tree/feature-NXP-14714-optimizeWebpageDisplay has been created and a commit has been done in nuxeo-theme-jsf in order to change the loading order of JS and CSS resources :
https://github.com/nuxeo/nuxeo-jsf/commit/54d264c036529de74b35034a2e36dbab96d28d38
A gain of a few hundredth of a second has been obtained (see attached screenshot).
Performance audit
A chrome extension allows to do performance audit on a web page, the result can give us some hints to improve the performance of our application. Here some leads that could be interesting to follow.
Specify image dimensions
26 images do not have any width and height specified. A width and height should be specified for all images in order to speed up page display.
For example, the image "big_loading.gif" in the template "serverRestart.ftl"
<img src="${Context.getServerURL().toString()}${contextPath}/img/big_loading.gif" />
The complete list of images is attached to the ticket.
Leverage browser caching
The following resources are missing a cache expiration. Resources that do not specify an expiration may not be cached by browsers:
framework.pack.js.xhtml
ui.pack.js.xhtml
tinymce.js
tinymce_init.js
jquery.nuxeo.tipsy.js
custom-css.css
Put CSS in document header
CSS in the document body adversely impacts rendering performance. The CSS file "custom-css.css" in include.xhtml should be moved to the document head.
More links
http://stevesouders.com/hpws/rules.php gives 14 rules for faster-loading web sites and a lot of examples allowing to see the gain of each improvement.
https://developer.yahoo.com/performance/rules.html
Topics on stackoverflow :
Change the order of JS and CSS resources
The branch https://github.com/nuxeo/nuxeo-jsf/tree/feature-NXP-14714-optimizeWebpageDisplay has been created and a commit has been done in nuxeo-theme-jsf in order to change the loading order of JS and CSS resources :
https://github.com/nuxeo/nuxeo-jsf/commit/54d264c036529de74b35034a2e36dbab96d28d38
A gain of a few hundredth of a second has been obtained (see attached screenshot).
Performance audit
A chrome extension allows to do performance audit on a web page, the result can give us some hints to improve the performance of our application. Here some leads that could be interesting to follow.
Specify image dimensions
26 images do not have any width and height specified. A width and height should be specified for all images in order to speed up page display.
For example, the image "big_loading.gif" in the template "serverRestart.ftl"
<img src="${Context.getServerURL().toString()}${contextPath}/img/big_loading.gif" />
The complete list of images is attached to the ticket.
Leverage browser caching
The following resources are missing a cache expiration. Resources that do not specify an expiration may not be cached by browsers:
framework.pack.js.xhtml
ui.pack.js.xhtml
tinymce.js
tinymce_init.js
jquery.nuxeo.tipsy.js
custom-css.css
Put CSS in document header
CSS in the document body adversely impacts rendering performance. The CSS file "custom-css.css" in include.xhtml should be moved to the document head.
More links
http://stevesouders.com/hpws/rules.php gives 14 rules for faster-loading web sites and a lot of examples allowing to see the gain of each improvement.
https://developer.yahoo.com/performance/rules.html
Topics on stackoverflow :