Uploaded image for project: 'Nuxeo Platform'
  1. Nuxeo Platform
  2. NXP-14714

Try to optimize webapp page display by working on resources loading order

    Details

    • Type: Task
    • Status: Resolved
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 5.9.5
    • Component/s: Style & CSS

      Description

      Loading first css then scripts should improve the feeling of the application browsing.

        Attachments

          Issue Links

            Activity

            Hide
            glefevre Gildas Lefevre added a comment - - edited

            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 :

            Show
            glefevre Gildas Lefevre added a comment - - edited 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 : http://stackoverflow.com/questions/4198624/order-of-loading-external-css-and-javascript-files http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page
            Hide
            atchertchian Anahide Tchertchian added a comment -

            With NXP-15365, the order to theme resources has been applied.
            There are still a lot of ways of contributing resources to the page, and different strategies applied by different layers (jsf/richfaces/themes/widgets), let's review this to benefit from same minimizing/caching features.

            Show
            atchertchian Anahide Tchertchian added a comment - With NXP-15365 , the order to theme resources has been applied. There are still a lot of ways of contributing resources to the page, and different strategies applied by different layers (jsf/richfaces/themes/widgets), let's review this to benefit from same minimizing/caching features.
            Hide
            atchertchian Anahide Tchertchian added a comment -

            see also NXP-7083

            Show
            atchertchian Anahide Tchertchian added a comment - see also NXP-7083

              People

              • Votes:
                0 Vote for this issue
                Watchers:
                3 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Time Tracking

                  Estimated:
                  Original Estimate - 4 hours
                  4h
                  Remaining:
                  Remaining Estimate - 4 hours
                  4h
                  Logged:
                  Time Spent - Not Specified
                  Not Specified