International Journal of JOURNAL Engineering and Technology (IJCET), ISSN 0976INTERNATIONALComputer VolumeOF COMPUTER ENGINEERING 6367(Print), ISSN 0976

6375(Online) 4, Issue 1, January- February (2013), IAEME & TECHNOLOGY (IJCET)

ISSN 0976 6367(Print) ISSN 0976 6375(Online) Volume 4, Issue 1, January- February (2013), pp. 211-217 IAEME: www.iaeme.com/ijcet.asp Journal Impact Factor (2012): 3.9580 (Calculated by GISI) www.jifactor.com

IJCET
IAEME

jQuery WEBSITES PERFORMANCE ANALYSIS BASED ON LOADING TIME: AN OVERVIEW

Asokan M PG and Research department of Computer Science, Nehru Memorial College, India

ABSTRACT Internet is a more powerful web media. It provides a lot of important and effective services to our day-to-day life. Every one is particular about loading time of a web page. There are many softwares available to build a website. A website is a collection of Web pages, images, videos or other digital assets that is hosted on one or several Web server(s), usually accessible via the Internet, cell phone or a LAN. No one likes any slow-loading websites. jQuery is an open source JavaScript library that simplifies the interactions between an HTML document, or more precisely the Document Object Model, and JavaScript. jQuery is used to build faster loading websites.[1] This paper discuss about the loading time of jQuery websites on three different popular browsers and the loading time of Flash websites on Internet Explorer -10. The results were tabulated and analyzed. Keywords: Fully Loaded, jQuery, Load Time, web browser, WebPagetest tool I. INTRODUCTION Information on the Internet is a collection of documents from all over the world linked together by computer networks. In order to access the Internet, one needs a special computer software called web browser. A web browser is a special software program /application used to retrieve files from remote web servers. All web browsers are application programs that are developed to access information on WWW. Browsers differ from each other in more than one aspect. The distinguishing areas are: (i)Platform: Linux, Windows, Mac,Unix, etc. (ii) Protocols: FTP, SFTP, SAMBA, HTTP, IMAP, etc. (iii)Graphical User Interface (GUI) (iv)Layout Engine: Amaya, Gecko, Trident, KHTML, WebKit (v) Mobile Compatibility (vi) HTML5 Support (vii) Open Source (viii) Proprietary. Most popular browsers are (a) Google Chrome (b) Internet Explorer (c) Mozilla Firefox (d) Safari (e) Opera (f) Netscape Navigator (g) Lynx and many more. The website/ web page loading time of ten popular jQuery websites
211

International Journal of Computer Engineering and Technology (IJCET), ISSN 09766367(Print), ISSN 0976 6375(Online) Volume 4, Issue 1, January- February (2013), IAEME

on three different web browsers were obtained using WebPagetest tool. In a similar way the loading time of ten famous Flash websites have been obtained. Finally the Line charts have been drawn for these two types of websites. II. jQuery jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that we write JavaScript. (a) jQuery ADVANTAGES. jQuery has many advantages some of them are listed below: (i) Relatively small file size. A compressed version of the library is only around 90 k. (ii) jQuery plugins are plenty in number and are constantly updated (iii) It is currently tested and optimized for development on modern browsers (iv) jQuery Mobile is compatible with most major mobile platforms, such as iOS, BlackBerry,Windows Mobile, Symbian and Android . etc... (b)Historical yearly trends in the usage of client-side programming languages for websites [2] The following table-1 report shows the historical trends in the usage of client-side languages since January 2011. TABLE-1 USAGE STATISTICS OF CLIENT-SIDE LANGUAGES 2011 2012 2013 2013 1 Jan 1 Jan 1 Jan 18 Jan None 11.0% 8.6% 7.4% 7.4% JavaScript Flash Silverlight Java 88.4% 28.5% 0.3% 0.1% 91.1% 25.6% 0.3% 0.2% 92.4% 21.1% 0.2% 0.2% 92.4% 20.8% 0.2% 0.2%

The above table-1 shows there is an increasing tendency in the usage of jQuery(JavaScript Libraries) . Further it shows the usage of Flash and others were move towards a decreasing tendency. III. METHODOLOGY Website testing is an invincible method which is used to test the speed, usability and performance of website. A website must be user friendly with good navigation and have cross browser compatibility. Fast and optimized pages lead to higher visitor engagement, retention, and conversions. There are many web page analysis tools available. Web Page test is one among them. This tool provides a waterfall of a given page load performance as well as a
212

International Journal of Computer Engineering and Technology (IJCET), ISSN 09766367(Print), ISSN 0976 6375(Online) Volume 4, Issue 1, January- February (2013), IAEME

comparison against an optimization checklist. Most famous jQuery website have been tested using Web Page test tool for the browsers IE10,Chrome and Firefox. The data were tabulated. Three line charts have been drawn to visualize the page loading time in seconds Vs bytes loaded in KBs of different websites. A similar test have been conducted for most popular Flash based websites and the results were included. IV. jQuery WEBSITES WEBPAGE LOAD TEST There are two ways available to test the website performance. One way is download the relevant software and conduct the test in our system, another way is conduct the test through online. Ten online tests were conducted using WebPagetest tool. WebPage test Provide options for (i) Enter The Page URL (ii) Select a Location (iii) Select a Browser. After entering the correct information the test result will be displayed within few minutes. One such sample result for one of the popular jQuery website is shown in Fig-1, remaining test results for some other popular jQuery websites have been recorded. (a)Fully Loaded: The metrics grouped together under the Fully Loaded heading are the metrics collected up until there was 2 seconds of no network activity after Document Complete. This will usually include any activity that is triggered by javascript after the main page loads. (b) Load Time: The Load Time is the time from when the user started navigating to the page until the Document Complete event (usually when all of the page content has loaded). For this web performance test, fully loaded time and fully loaded bytes in KB of First view alone considered and are shown in table-2.

Web Page Performance Test for www.msn.com From: Dulles,VA IE10 Document Complete Load Time First View First Byte Start Time Render Requests FIOS 1/17/2013 10:10:13 AM Fully Loaded Bytes Time In 181 KB 42 KB Requests Bytes In 890 KB 44 KB

1.001s 0.311s 0.841s

1.001s 19 0.971s 8

1.672s 99 1.257s 12

Repeat 0.971s 0.327s 0.654s View

Fig-1 Web Page Performance Test using Webpage Test Tool

213

International Journal of Computer Engineering and Technology (IJCET), ISSN 09766367(Print), ISSN 0976 6375(Online) Volume 4, Issue 1, January- February (2013), IAEME

TABLE-2 Website msn.com Twitter.com Amazon.com Microsoft.com

FIRST VIEW- FULLY LOADED TIME IN SEC AND BYTES IN KB IE10 1.672 2.413 3.445 2.878 21.583 10.754 5.986 1.066 3.945 3.534 IE10KB 890 421 1,512 935 3041 2780 99 98 2012 865 chrome 4.74 1.743 4.67 2.135 6.729 9.392 2.142 0.974 2.435 2.253 ChromeKB Firefox 696 0 1,537 944 2967 2646 96 98 1991 565 4.236 1.388 2.547 2.843 7.106 4.545 2.399 1.04 2.12 2.22 FireFoxKB 683 389 1,653 944 2875 2663 96 98 2003 825

Bondmedia.co.uk Huffingtonpost.com Tumbir.com Answer.com Pinterest.com Ask.com

A chart is a graphic representation of data used to deliver a message. A line chart plots points and then connects them with a line. A comparison between Loading time in seconds and bytes loaded in KB has been found using MS Excel for the browsers IE 10 , Google Chrome and FireFox and are shown in Fig-2,Fig-3 and Fig-4 respectively.

3500 3000 2500 2000 1500 1000 500 0

25 20 15 10 5 0 IE10-KB IE10

Bytes in KB

Websites

Fig-2 IE 10 Loading Time in Seconds Vs Bytes Loaded in KB

214

International Journal of Computer Engineering and Technology (IJCET), ISSN 09766367(Print), ISSN 0976 6375(Online) Volume 4, Issue 1, January- February (2013), IAEME

3500 3000 2500 2000 1500 1000 500 0

10 9 8 7 6 5 4 3 2 1 0

Bytes in KB

Chrome-KB Chrome

Websites

Fig-3 Google Chrome Loading Time in Seconds Vs Bytes Loaded in KB

3500 3000 2500 2000 1500 1000 500 0

8 7 6 5 4 3 2 1 0

Bytes in KB

FireFox-KB Firefox

Websites

Fig-4 Firefox Loading Time in Seconds Vs Bytes Loaded in KB From the above table and line charts we find that (i) IE 10 takes a maximum of 21.583 seconds to load 3041 bytes (ii)Google chrome takes a maximum of 9.392 secondss to load 2646 bytes (iii) Firefox takes a maximum of 7.106 seconds to load 2875 bytes.The total time taken by each browser to load these ten websites , the total amount of KBs loaded by each browsers has been calculated. The number of bytes loaded per second by each of these browsers are IE10 220.912 bytes/sec,Chrome-310.106 bytes/sec and Firefox-401.688 bytes/sec. It is evident from above discussion ,table-2 and Fig-2 - Fig-4 FireFox loads faster, places chrome at the second place and IE-10 at third place.
215

International Journal of Computer Engineering and Technology (IJCET), ISSN 09766367(Print), ISSN 0976 6375(Online) Volume 4, Issue 1, January- February (2013), IAEME

V FLASH WEBSITES WEBPAGE LOAD TEST Using WebPagetest tool another set of online tests were conducted for Ten other popular Flash based websites. The tests has been conducted with the browser IE-10. The fully loaded time of First view have been recorded and are shown in Table-3. TABLE-3 IE-10 FIRST VIEW- FULLY LOADED TIME IN SEC AND BYTES IN KB Website Time KB mercedes-benz.com 6.127 2,960 skodayeti.pl/en 69.472 20,982 theoleg.com 2.151 3,473 theprofiler.be 9.289 1,366 kasulo.ws 6.981 2,465 2advanced.com 8.65 4,137 the951.com 5.571 1,396 morganstanley.com 3.735 1,168 sciencemuseum.org.uk 3.289 1,125 testsoldatsjoman.forsvarsmakten.se 5.394 1,065

25,000 Bytes in KB 20,000 15,000 10,000 5,000 0

80 70 60 50 40 30 20 10 0 Bytes Time

Flash Websites

Fig-5 Flash Websites- IE 10 Loading Time in Seconds Vs Bytes Loaded in KB From the above Table-3 and line chart Fig-5 we find that IE 10 takes a maximum of 69.472 seconds to load 20, 98 bytes. The number of bytes loaded per second by the browsers IE10 has been found and was 332.648 bytes/sec. The websites involved in our test are not Flash only websites. There are certain disadvantages related to use the of Flash only websites. They are (i) Loading time. Flash content takes longer than usual to load compared to regular images and text. The heavier your Flash content is, the longer it will take to load.
216

International Journal of Computer Engineering and Technology (IJCET), ISSN 09766367(Print), ISSN 0976 6375(Online) Volume 4, Issue 1, January- February (2013), IAEME

(ii) Website Traffic. A website having Flash content would not be indexed by most search engines. This means Flash website wont be able to rank good in search engines. Consequently, there will be less traffic coming to such sites. There are some other disadvantages are also exists. From table-1 we observe that there is a decreasing tendency towards the usage of Flash based and other types of (non jQuery based) websites. VI. CONCLUSION The websites loading time for ten different websites on three popular browsers have been tested and the results were analyzed using tables and line charts. The same test has been conducted for ten other popular Flash based website. These tests were conducted using the IE 10 browser. The disadvantages of Flash only websites have been discussed. Present trends of jQuery says, it is the winner and our findings favour the same. And it is time to include the write less do more jQuery in our curriculum. REFERENCES 1. jQuery Community Experts, jQuery Cookbook (OReilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472) 2. http://w3techs.com/technologies/overview/client_side_language/all 3. http://www.webpagetest.org/ 4. www.upsdell.com/BrowserNews/ 5. JavaScript & jQuery: The Missing Manual, Copyright 2012 David Sawyer McFarland David Sawyer McFarland. 6. Ryan Benedetti and Ronan Cranley, Head First jQuery ( Copyright 2011 OReilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472) 7. L. Chandra Sekaran and Dr. S. Balasubramanian, Website Based Patent Information Searching Mechanism International journal of Computer Engineering & Technology (IJCET), Volume 1, Issue 2, 2010, pp. 180 - 191, Published by IAEME. 8. Ms. A. Suganthy, G.S.Sumithra, J.Hindusha, A.Gayathri and S.Girija, Semantic Web Services And Its Challenges International journal of Computer Engineering & Technology (IJCET), Volume 1, Issue 2, 2010, pp. 26 - 37, Published by IAEME.

217