Scribd Logo
Upload

Welcome to Scribd!

  • Sandeep Kumar Patel: Web Page Performance

    Uploaded by

    Sandeep Patel
    841 views5 pages
    web page performance based on http protocol.

    Original Title

    Web Page Performance

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    web page performance based on http protocol.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    841 views5 pages

    Sandeep Kumar Patel: Web Page Performance

    Uploaded by

    Sandeep Patel
    web page performance based on http protocol.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    2012

    Sandeep Kumar Patel

    WEB PAGE PERFORMANCE

    Describes some of the handy methods to reduce in number of http calls to improve the web page performance.

    Background 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 performance:affecting web page

    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 mille second to download each file it adds up to 8 mille second in total.

    1. Blocking JavaScript. 2. No of http Calls ___2m__|__2m___|_2m____|__2m__| Blocking Java Script. 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.

    = 8 second

    index.html <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> http & Blocking rendering Engine

    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.

    2. Inside Images. 3. Inside JavaScript

    Inside Css usage:Target:


    page. Number of Css file referred in a

    Javascript injection 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); . Four http calls to server & Blocking to rendering Engine

    Problem space:Consider following HTML file for a page. Where head section is calling four different css files

    index.html <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> Four http calls to server

    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.
    Use of Requier.js plugin <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>

    Four http calls to server & Blocking to rendering Engine

    No of http Calls The main reasons for increasing number of http calls are due to:1. Inside Css usage

    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:
    pom.xml <plugin> <groupId>org.primefaces.extensions</groupId> <artifactId>resources-optimizer-mavenplugin</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}/c ss</inputDir> <includes> <include>**/*.css</include> </includes> <aggregations> <aggregation> <removeIncluded>false</removeIncluded> <outputFile> ${project.resources.home.folder}/css/combine d-style.css </outputFile> </aggregation> </aggregations> </resourcesSet> </resourcesSets> </configuration> </plugin>

    <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> One http call to server

    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
    Abcd-style.css .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"); } Four http calls to server

    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.

    index.html <html> <head> <title>ABCD Company</title> <link rel="stylesheet" type="text/css" href="../css/style-one.css" />

    Abcd-style.css .header-title { background: url("data: image/gif;base64, NSUhEUgA ... ASUVORK5CYII=") !important; } .author-icon { background: url("data: image/gif;base64,fAAANSUhEUgA ... ASUVORK5CYII=") !important; } .scroll-title { background: url("data: image/gif;base64,rVBORw0KGgoAAAANSUhEUgA ... ASUVORK5CYII=") !important; } .content-icon { background: url("data: image/gif;base64, AAANSUhEUgA ... ASUVORK5CYII=") !important; ; } No http calls to server

    <script type="text/javascript" src="../js/common/four-script.js"></script> </body> </html> Four http calls to server

    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:pom.xml <plugin> <groupId>org.primefaces.extensions</groupId> <artifactId>resources-optimizer-mavenplugin</artifactId> <resourcesSets> <resourcesSet> <inputDir>${project.resources.home.folder}/j s/ </inputDir> <includes> <include>one.js</include> <include>two.js</include>

    This one also can be done through maven build using prime faces plugin.

    Inside Java Script usage:Target:


    page. Number of JS file referred in a

    <include>three.js</include> <include>four.js</include> </includes> <aggregations> <aggregation> <removeIncluded>false</removeIncluded> <withoutCompress>false</withoutCompress> <outputFile> ${project.resources.home.folder}/js/cominedscript.js </outputFile> </aggregation> </aggregations> </resourcesSet> </resourcesSets> </configuration> </plugin>

    Problem space:Consider following HTML file for a page, where body section is calling four java script library files.
    index.html <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>

    References:1. http://requirejs.org/docs/optimizati on.html. 2. http://code.google.com/p/primefac es-

    You might also like