Web Page Performance -Tutorial Savvy

Why web Page Performance?
In the present time of IT industries business, performance of a particular application is so much important. As performance is directly proportional to the number of user using that application.Main factors affecting web page performance:-

Blocking JavaScript.
No of http Calls

What is Blocking JavaScript?

For Every Browser we have a rendering engine. A rendering engine is an application which implemented the ECMA script and W3C recommendation for display html and running scripts. Some of the rendering engines are Trident (IE), Gecko (Mozilla), and Web Kit (Safari) .The speed of the web page depends on this rendering engine. Though we have many advance rendering engine at present still it is not enough as the blocking feature of JavaScript. Whenever this rendering engine sees a script tag in the html it stops all its parallel work and starts downloading that JavaScript, during this time the rendering engine are Idle. This hampers the web page performance. After the downloading immediately the engine start running the JavaScript files.This identifies that the rendering engine become synchronous.

Target : “rendering engine become synchronous on script tag.“

Problem Space: If you see the down index.html we have 4 JavaScript file referred through script tag. Suppose for a rendering engine it takes 2 milli second to
download each file it adds up to 8 milli second in total.

___2m__|__2m___|_2m____|__2m__| = 8 second

<html>
<head>
<title>ABCD Company</title>
</head>
<body>

<script type="text/javascript" src="../js/common/one-script.js"></script>
<script type="text/javascript" src="../js/common/two-script.js"></script>
<script type="text/javascript" src="../js/common/three-script.js"></script>
<script type="text/javascript" src="../js/common/four-script.js"></script>

</body>
</html>

If we can download these scripts in parallel then it will save lot of time .The total time come around 4 mille second which greater than average .Still we saved lot of time.

Solution by Dynamic Script Injection:-

This is done by creating dynamic script element.

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "one.js";
document.body.appendChild(script);

script = document.createElement("script");
script.type = "text/javascript";
script.src = "two.js";
document.body.appendChild(script);

……….

But this can give some error in different browse. To overcome this issue we can use Requier.js. This will make all the script file download asynchronously.

<html>
    <head>
        <title> ABCD Company </title>
        <script data-main="scripts/main" src="scripts/require.js"></script>
    <script>
    require(["one", "two","three"]); 
         </script>
    </head>
    <body>
    </body>
</html>

The main reasons for increasing number of http calls are due to:-

Inside Css usage
Inside Images.
Inside JavaScript

Inside Css usage:-
Target: Number of Css file referred in a page.
Problem space:-
Consider following HTML file for a page. Where head section is calling four different css files

<html>
<head>
<title>ABCD Company</title>

<link rel="stylesheet" type="text/css" href="../css/style-one.css" />
<link rel="stylesheet" type="text/css" href="../css/style-two.css" />
<link rel="stylesheet" type="text/css" href="../css/style-three.css" />
<link rel="stylesheet" type="text/css" href="../css/style-four.css" />

</head>
<body>
</body>
</html>

If we look into the head section of the html file is referring multiple css files. So the browser will make four different http calls for downloading these file, however Browser will make these download parallel. Still the count of no of http call is increased.

Solution by Maven Build:-
During the maven build we can mention in the pom.xml to concatenate these css file in to a single css file then we can call these css file in the page. This requires a plugin called prime faces.
This can be done as follows:

<plugin>
      <groupId>org.primefaces.extensions</groupId>
      <artifactId>resources-optimizer-maven-plugin</artifactId>
      <version>0.5</version>
      <executions>
         <execution>
             <id>optimize</id>
             <phase>prepare-package</phase>
             <goals>
                  <goal>optimize</goal>
             </goals>
          </execution>
      </executions>
      <configuration>
         <suffix>-min</suffix>
         <failOnWarning>false</failOnWarning>
         <resourcesSets>

           <resourcesSet>
           <inputDir>${project.resources.home.folder}/css</inputDir>
           <includes>
             <include>**/*.css</include>
           </includes>
        <aggregations>
           <aggregation>
             <removeIncluded>false</removeIncluded>
             <outputFile>
             ${project.resources.home.folder}/css/combined-style.css
             </outputFile>
           </aggregation>
       </aggregations>
     </resourcesSet>

    </resourcesSets>

   </configuration>
</plugin>

Inside Image usage:-
Target: Number of images/icons referred from a page
Problem space:-
Consider following css file for a page, where the class files have different background referring to images present in the server

.header-title {
   background: url("../../images/abcd.gif");
   }
.author-icon {
   background: url("../../images/defg.gif");
   }
.scroll-title {
   background: url("../../images/hijk.gif");
   }
.content-icon {
   background: url("../../images/lmno.gif");
   }

Instead of specifying http image path in css file we can convert these small pngs to base64 format and then we can mention it inside the css file.
This one also can be done through maven build using prime faces plugin.

Inside Java Script usage:-
Target: Number of JS file referred in a page.
Problem space:Consider following HTML file for a page, where body section is calling four java script library files.

<html>
<head>
<title>ABCD Company</title>
</head>
<body>

<script type="text/javascript" src="../js/common/one-script.js"></script>
<script type="text/javascript" src="../js/common/two-script.js"></script>
<script type="text/javascript" src="../js/common/three-script.js"></script>
<script type="text/javascript" src="../js/common/four-script.js"></script>

</body>
</html>

The problem with this java script library is similar to those css files. These can also be solved by maven build.

Solution by Maven Build:-

<plugin>
      <groupId>org.primefaces.extensions</groupId>
      <artifactId>resources-optimizer-maven-plugin</artifactId>
         <resourcesSets>
            <resourcesSet>
              <inputDir>${project.resources.home.folder}/js/ </inputDir>
               <includes>
                 <include>one.js</include>               
       <include>two.js</include>
       <include>three.js</include>
                 <include>four.js</include>
               </includes>
              <aggregations>
                 <aggregation>
                   <removeIncluded>false</removeIncluded>
                   <withoutCompress>false</withoutCompress>
                    <outputFile>
${project.resources.home.folder}/js/comined-script.js
                     </outputFile>
                  </aggregation>
              </aggregations>
           </resourcesSet>
    </resourcesSets>
   </configuration>
</plugin>

it can be downloaded from this link.

Oct 25, 2012Sandeep

Web Page Performance

Related

Sandeep