JSF 2 Improving page loading performance

Question

I'm trying to tune jsf 2 pages loading performance. Here are some trace for performance measurement : - First Time page loading : Global page time loading 1404ms especially spent on "render rsponse" phase

+++++ ++++++ +++++ [PHASE LISTENER] START PHASE RESTORE_VIEW 1 +++ ++++++ +++++ +++++ ++++++ +++++ [PHASE LISTENER] END PHASE RESTORE_VIEW 1 with execution time = 21ms +++ ++++++ +++++ +++++ ++++++ +++++ [PHASE LISTENER] START PHASE APPLY_REQUEST_VALUES 2 +++ ++++++ +++++ +++++ ++++++ +++++ [PHASE LISTENER] END PHASE APPLY_REQUEST_VALUES 2 with execution time = 1ms +++ ++++++ +++++ +++++ ++++++ +++++ [PHASE LISTENER] START PHASE PROCESS_VALIDATIONS 3 +++ ++++++ +++++ 2013-02-02 14:25:13,205 [http-bio-8083-exec-4] DEBUG com.azone.web.form.CarCaracteristicForm - Check avnSearchParamsBoImpl DI: OK +++++ ++++++ +++++ [PHASE LISTENER] END PHASE PROCESS_VALIDATIONS 3 with execution time = 60ms +++ ++++++ +++++ +++++ ++++++ +++++ [PHASE LISTENER] START PHASE UPDATE_MODEL_VALUES 4 +++ ++++++ +++++ +++++ ++++++ +++++ [PHASE LISTENER] END PHASE UPDATE_MODEL_VALUES 4 with execution time = 0ms +++ ++++++ +++++ +++++ ++++++ +++++ [PHASE LISTENER] START PHASE INVOKE_APPLICATION 5 +++ ++++++ +++++ +++++ ++++++ +++++ [PHASE LISTENER] END PHASE INVOKE_APPLICATION 5 with execution time = 0ms +++ ++++++ +++++ +++++ ++++++ +++++ [PHASE LISTENER] START PHASE RENDER_RESPONSE 6 +++ ++++++ +++++ 2013-02-02 14:25:13,909 [http-bio-8083-exec-4] INFO com.azone.web.UserSessionBean - TIME TAKEN BY SecurityContextHolder.getContext().getAuthentication 0 ms 2013-02-02 14:25:13,914 [http-bio-8083-exec-4] INFO com.azone.web.UserSessionBean - Anonymous user : Guest !! user is set to new one +++++ ++++++ +++++ [PHASE LISTENER] END PHASE RENDER_RESPONSE 6 with execution time = 1318ms +++ ++++++ +++++ Global Page Execution Time = 1404ms

Second Time page loading : Global page time loading 656ms especially spent on "render rsponse" phase

+++++ ++++++ +++++ [PHASE LISTENER] START PHASE RESTORE_VIEW 1 +++ ++++++ +++++ +++++ ++++++ +++++ [PHASE LISTENER] END PHASE RESTORE_VIEW 1 with execution time = 37ms +++ ++++++ +++++ +++++ ++++++ +++++ [PHASE LISTENER] START PHASE APPLY_REQUEST_VALUES 2 +++ ++++++ +++++ +++++ ++++++ +++++ [PHASE LISTENER] END PHASE APPLY_REQUEST_VALUES 2 with execution time = 0ms +++ ++++++ +++++ +++++ ++++++ +++++ [PHASE LISTENER] START PHASE PROCESS_VALIDATIONS 3 +++ ++++++ +++++ +++++ ++++++ +++++ [PHASE LISTENER] END PHASE PROCESS_VALIDATIONS 3 with execution time = 0ms +++ ++++++ +++++ +++++ ++++++ +++++ [PHASE LISTENER] START PHASE UPDATE_MODEL_VALUES 4 +++ ++++++ +++++ +++++ ++++++ +++++ [PHASE LISTENER] END PHASE UPDATE_MODEL_VALUES 4 with execution time = 0ms +++ ++++++ +++++ +++++ ++++++ +++++ [PHASE LISTENER] START PHASE INVOKE_APPLICATION 5 +++ ++++++ +++++ +++++ ++++++ +++++ [PHASE LISTENER] END PHASE INVOKE_APPLICATION 5 with execution time = 0ms +++ ++++++ +++++ +++++ ++++++ +++++ [PHASE LISTENER] START PHASE RENDER_RESPONSE 6 +++ ++++++ +++++ 2013-02-02 14:28:16,535 [http-bio-8083-exec-3] INFO com.azone.web.UserSessionBean - TIME TAKEN BY SecurityContextHolder.getContext().getAuthentication 0 ms 2013-02-02 14:28:16,536 [http-bio-8083-exec-3] INFO com.azone.web.UserSessionBean - Anonymous user : Guest !! user is set to new one +++++ ++++++ +++++ [PHASE LISTENER] END PHASE RENDER_RESPONSE 6 with execution time = 614ms +++ ++++++ +++++ Global Page Execution Time = 656ms

Here is my page Source :

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">

<ui:composition template="../templates/template.xhtml">

    <ui:define name="contentWrapper">   

<f:metadata>
    <f:viewParam name="itemFamily" value="#{newItemAdd.itemFamily}" />  
    <f:event     type="preRenderView"     listener="#{newItemAdd.initFamily}" />
</f:metadata>

    <h:form>
        <rich:panel id="mainFilters">

            <h:outputText value="property 1" />

            <h:panelGrid columns="2" cellspacing="6" width="600">

                <h:panelGrid columns="3" cellspacing="6" width="300">

                    <h:outputText value="First name: " />
                    <h:inputText id="fname" value="#{newItemAdd.userForm.user.firstName}">
                        <f:validateRequired />
                        <rich:validator />
                    </h:inputText>
                    <rich:message for="fname" />

                    <h:outputText value="Tel:" />
                    <h:inputText id="tel" value="#{newItemAdd.userForm.currentPhone}">
                        <f:validateRequired />
                        <rich:validator />
                    </h:inputText>
                    <rich:message for="tel" />

                    <h:outputText value="Email:" />
                    <h:inputText id="email" value="#{newItemAdd.userForm.user.email}">
                        <f:validateRequired />
                        <rich:validator />
                    </h:inputText>
                    <rich:message for="email" />

                </h:panelGrid>

                <h:panelGrid columns="2" cellspacing="6" width="300">


                    <h:outputText value="Governorate" />
                    <h:selectOneMenu id="govList"
                        value="#{newItemAdd.itemForm.region.governorate.governorateId}"
                        valueChangeListener="#{newItemAdd.itemForm.processGovernoratesChange}">
                        <f:selectItem id="govdefitm" itemValue="0"
                            itemLabel="All Governorates" />
                        <f:selectItems id="governoratesList"
                            value="#{newItemAdd.itemForm.governoratesList}" />
                        <f:ajax event="change" execute="@this" render="munList" />
                    </h:selectOneMenu>

                    <h:outputText value="Municipality" />
                    <h:selectOneMenu id="munList"
                        value="#{newItemAdd.itemForm.region.municipality.municipalityId}">
                        <f:selectItem id="mundefitm" itemValue=""
                            itemLabel="All Municipalities" />
                        <f:selectItems id="municipalitiesList"
                            value="#{newItemAdd.itemForm.municipalitiesList}" />
                    </h:selectOneMenu>

                </h:panelGrid>
            </h:panelGrid>

            <h:panelGrid columns="2" cellspacing="6" width="600">

                <h:panelGrid columns="3" cellspacing="6" width="300">

                    <h:outputText value="Property 2" />                 
                    <h:inputText id="property2" value="#{newItemAdd.itemForm.property2}" />
                    <rich:message for="property2" />

                    <h:outputText value="Property 3" />
                    <h:selectOneMenu id="propList"
                        value="#{newItemAdd.itemForm.property3}"
                        valueChangeListener="#{newItemAdd.itemForm.processProperty3Change}">
                        <f:selectItem id="mandefitm" itemValue="0" itemLabel="All porperties" />
                        <f:selectItems id="propList"
                            value="#{newItemAdd.itemForm.property3List}" />
                        <f:ajax event="change" execute="@this" render="modList" />
                    </h:selectOneMenu>
                    <rich:message for="propList" />
                </h:panelGrid>

                <h:panelGrid columns="3" cellspacing="6" width="300">
                    <h:outputText value="property 4" />
                    <h:inputText id="prop4" value="#{newItemAdd.itemForm.property4}" />
                    <rich:message for="prop4" />

                    <h:outputText value="Property 4" />
                    <h:selectOneMenu id="prop4List"
                        value="#{newItemAdd.itemForm.model}">
                        <f:selectItem id="moddefitm" itemValue="" itemLabel="All Properties" />
                        <f:selectItems id="prop41List" value="#{newItemAdd.itemForm.properties4List}" />
                    </h:selectOneMenu>
                    <rich:message for="prop4List" />
                </h:panelGrid>

            </h:panelGrid>
        </rich:panel>

        <!-- -->

        <rich:panel id="optionalFilters">

            <h:panelGrid columns="2" cellspacing="6" width="600">

                <h:panelGrid columns="2" cellspacing="6" width="400">
                    <h:outputText value="Property 5" rendered="#{!newItemAdd.type1}"/>
                    <h:selectOneMenu id="property5" rendered="#{!newItemAdd.type1}"
                        value="#{newItemAdd.itemForm.property5}"
                        layout="pageDirection">
                        <f:selectItem id="propId" itemValue="0"
                            itemLabel="Any property" />
                        <f:selectItems value="#{newItemAdd.itemForm.properties5List}" var="item"
                            itemLabel="#{item.label}" itemValue="#{item.value}" />
                    </h:selectOneMenu>

                    <h:outputText value="Property 7 " rendered="#{newItemAdd.type2}"/>
                    <h:selectOneMenu id="property7" rendered="#{newItemAdd.type2}"
                        value="#{newItemAdd.itemForm.family1.property7.property7Id}">
                        <f:selectItem id="trmdefitm" itemValue="0"
                            itemLabel="Any property" />
                        <f:selectItems id="property7List"
                            value="#{newItemAdd.itemForm.property7List}" />
                    </h:selectOneMenu>

                    <h:outputText value="Property 8" />
                    <h:selectOneMenu id="property8List"
                        value="#{newItemAdd.itemForm.property8}">
                        <f:selectItem id="bdydefitm" itemValue=""
                            itemLabel="All properties" />
                        <f:selectItems id="propList" value="#{newItemAdd.itemForm.property8List}" />
                    </h:selectOneMenu>

                    <h:outputText value="Property 9 " rendered="#{newItemAdd.type2}"/>
                    <h:selectOneMenu id="property9" rendered="#{newItemAdd.type2}"
                        value="#{newItemAdd.itemForm.family1.property9.property9Id}">
                        <f:selectItem id="trndefitm" itemValue="0"
                            itemLabel="Any Property" />
                        <f:selectItems id="prop9List"
                            value="#{newItemAdd.itemForm.property9List}" />
                    </h:selectOneMenu>

                    <h:outputText value="Property 10 " />
                    <h:selectOneMenu id="prop10"
                        value="#{newItemAdd.itemForm.property10}">
                        <f:selectItem id="minprcdefitm" itemValue="" itemLabel="Any Property" />
                        <f:selectItems id="prop10List"
                            value="#{newItemAdd.itemForm.property10List}" />
                    </h:selectOneMenu>
                    <h:outputText value=" ?? " />

                    <h:outputText value="property" />
                    <h:outputText value="property ??" />
                    <h:outputText value="property ? property ? property ?" />
                    <h:outputText value="property ? property ? property ?" />
                    <h:outputText value="property ??" />

                </h:panelGrid>


                <h:outputText value="property" />

            </h:panelGrid>

            <h:panelGrid id="property11">
                <h:outputText value="property 11" />
                <h:inputTextarea value="#{newItemAdd.itemForm.property11}" cols="50"
                    rows="10" />
            </h:panelGrid>

            <h:panelGrid columns="2" columnClasses="top,top">
                <rich:fileUpload fileUploadListener="#{newItemAdd.picsManager.listener}"
                    id="upload" acceptedTypes="jpg, gif, png, bmp"
                    ontyperejected="alert('Only JPG, GIF, PNG and BMP files are accepted');"
                    maxFilesQuantity="3">
                    <a4j:ajax event="uploadcomplete" execute="@none" render="info" />
                </rich:fileUpload>

                <h:panelGroup id="info" layout="block">
                    <rich:panel bodyClass="info">
                        <f:facet name="header">
                            <h:outputText value="Uploaded Files Info" />
                        </f:facet>
                        <h:outputText value="No files currently uploaded"
                            rendered="#{newItemAdd.picsManager.size==0}" />
                        <rich:dataGrid columns="1" value="#{newItemAdd.picsManager.files}" var="file"
                            rowKeyVar="row">
                            <rich:panel bodyClass="rich-laguna-panel-no-header">
                                <h:panelGrid columns="2">                               

                                    <a4j:mediaOutput element="img" mimeType="image/jpeg"
                                        createContent="#{newItemAdd.picsManager.paint}" value="#{row}"
                                        style="width:100px; height:100px;" cacheable="false">
                                        <f:param value="#{fileUploadBean.timeStamp}" name="time" />
                                        <a4j:ajax event="click" execute="newItemAdd.picsManager.paint" ></a4j:ajax>

                                    </a4j:mediaOutput>

                                    <h:panelGrid columns="2">
                                        <h:outputText value="File Name:" />
                                        <h:outputText value="#{file.name}" />
                                        <h:outputText value="File Length(bytes):" />
                                        <h:outputText value="#{file.length}" />
                                    </h:panelGrid>
                                </h:panelGrid>
                            </rich:panel>
                        </rich:dataGrid>
                    </rich:panel>
                    <br />
                    <a4j:commandButton action="#{newItemAdd.picsManager.clearUploadData}"
                        render="info, upload" value="Clear Uploaded Data"
                        rendered="#{newItemAdd.picsManager.size>0}" />
                </h:panelGroup>
            </h:panelGrid>

        </rich:panel>
        <rich:messages />
        <a4j:commandButton value="Go!"
            action="#{newItemAdd.testCheck}" />
    </h:form>

    </ui:define>
</ui:composition>

</html>

THANKS IN ADVANCE FOR YOUR HELP.

UPDATE : i've split my form into 2 forms like described below but it doesn't seem to help :(

    <h:form>   


        <ui:include src="file_test_part_1.xhtml"/>
        <!-- -->
        <ui:include src="file_test_part_2.xhtml"/>

        <rich:messages />
        <a4j:commandButton value="Go!"
            action="#{newCarAdd.testCheck}" />
    </h:form>

You have a gigantic form with too many components. Section your components into smaller chunks within multiple forms — kolossus, Feb 02 '13 at 17:10
I've split it into two parts like described in my update but it doesn't seem to help :(. — neo, Feb 02 '13 at 23:36

score 0 · Answer 1 · edited May 23 '17 at 12:07

There are a couple of things you can do to improve performance of your screens

GZIP filter will reduce the initial load time significantly. It compresses the page contents (dynamic as well as static contents) while transferring to client browser. Refer to https://stackoverflow.com/a/35567295/5076414
You can additionally implement a cacheFilter to bring performance of your screens at par with JavaScript based UI. This will cache the static content of your screen such as icons, images, stylesheets, javascripts etc. You can control what to cache and what to exclude. Refer to https://stackoverflow.com/a/35567540/5076414
For client side UI components, you can use Primefaces which is JQuery based UI.

How to verify if my screen is using gzip and cache

To see if your contents are already usign gzip and cache, In your Google Chrome Browser -> right click on your screen -> inspect -> click network tab -> refresh your screen. Click on the images, icons, stylesheets and see if you see following in response header

Cache-Control:max-age=2592000 if the status of element is 304 (coming from cache)

Content-Encoding:gzip if the status of element is 200

JSF 2 Improving page loading performance

1 Answers1

How to verify if my screen is using gzip and cache