J query websites performance analysis based on loading time an overview

  • 166 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
166
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. INTERNATIONALComputer VolumeOF COMPUTER ENGINEERING International Journal of JOURNAL 6367(Print), ISSN 0976 – 6375(Online) Engineering and Technology (IJCET), ISSN 0976- 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 IJCET© IAEME: www.iaeme.com/ijcet.aspJournal Impact Factor (2012): 3.9580 (Calculated by GISI) ©IAEMEwww.jifactor.com 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
  • 2. International Journal of Computer Engineering and Technology (IJCET), ISSN 0976-6367(Print), ISSN 0976 – 6375(Online) Volume 4, Issue 1, January- February (2013), © IAEMEon three different web browsers were obtained using WebPagetest tool. In a similar way theloading time of ten famous Flash websites have been obtained. Finally the Line charts havebeen drawn for these two types of websites.II. jQuery jQuery is a fast and concise JavaScript Library that simplifies HTML documenttraversing, event handling, animating, and Ajax interactions for rapid webdevelopment. 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 forwebsites [2] The following table-1 report shows the historical trends in the usage of client-sidelanguages 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 88.4% 91.1% 92.4% 92.4% Flash 28.5% 25.6% 21.1% 20.8% Silverlight 0.3% 0.3% 0.2% 0.2% Java 0.1% 0.2% 0.2% 0.2% The above table-1 shows there is an increasing tendency in the usage of jQuery(JavaScriptLibraries) . Further it shows the usage of Flash and others were move towards a decreasingtendency.III. METHODOLOGY Website testing is an invincible method which is used to test the speed, usability andperformance of website. A website must be user friendly with good navigation and have crossbrowser 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 oneamong them. This tool provides a waterfall of a given page load performance as well as a 212
  • 3. International Journal of Computer Engineering and Technology (IJCET), ISSN 0976-6367(Print), ISSN 0976 – 6375(Online) Volume 4, Issue 1, January- February (2013), © IAEMEcomparison against an optimization checklist. Most famous jQuery website have been testedusing 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 bytesloaded in KB’s of different websites. A similar test have been conducted for most popularFlash 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 downloadthe relevant software and conduct the test in our system, another way is conduct the testthrough online. Ten online tests were conducted using WebPagetest tool. WebPage testProvide 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, remainingtest 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 upuntil there was 2 seconds of no network activity after Document Complete. This will usuallyinclude 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 theDocument 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 viewalone considered and are shown in table-2. Web Page Performance Test for www.msn.com From: Dulles,VA IE10 FIOS 1/17/2013 10:10:13 AM Document Complete Fully Loaded First Start Bytes BytesLoad Time Time Requests Time Requests Byte Render In InFirst 181 890 1.001s 0.311s 0.841s 1.001s 19 1.672s 99View KB KBRepeat 42 44 0.971s 0.327s 0.654s 0.971s 8 1.257s 12View KB KB Fig-1 Web Page Performance Test using Webpage Test Tool 213
  • 4. International Journal of Computer Engineering and Technology (IJCET), ISSN 0976-6367(Print), ISSN 0976 – 6375(Online) Volume 4, Issue 1, January- February (2013), © IAEME TABLE-2 FIRST VIEW- FULLY LOADED TIME IN SEC AND BYTES IN KB IE10- Chrome- FireFox-Website IE10 KB chrome KB Firefox KBmsn.com 1.672 890 4.74 696 4.236 683Twitter.com 2.413 421 1.743 0 1.388 389Amazon.com 3.445 1,512 4.67 1,537 2.547 1,653Microsoft.com 2.878 935 2.135 944 2.843 944Bondmedia.co.uk 21.583 3041 6.729 2967 7.106 2875Huffingtonpost.com 10.754 2780 9.392 2646 4.545 2663Tumbir.com 5.986 99 2.142 96 2.399 96Answer.com 1.066 98 0.974 98 1.04 98Pinterest.com 3.945 2012 2.435 1991 2.12 2003Ask.com 3.534 865 2.253 565 2.22 825A chart is a graphic representation of data used to deliver a message. A line chart plots pointsand then connects them with a line. A comparison between Loading time in seconds andbytes loaded in KB has been found using MS Excel for the browsers IE 10 , GoogleChrome and FireFox and are shown in Fig-2,Fig-3 and Fig-4 respectively. 3500 25 3000 20 2500 Bytes in KB 2000 15 1500 10 1000 5 500 IE10-KB 0 0 IE10 Websites Fig-2 IE 10 Loading Time in Seconds Vs Bytes Loaded in KB 214
  • 5. International Journal of Computer Engineering and Technology (IJCET), ISSN 0976-6367(Print), ISSN 0976 – 6375(Online) Volume 4, Issue 1, January- February (2013), © IAEME 3500 10 3000 9 8 Bytes in KB 2500 7 2000 6 5 1500 4 1000 3 2 500 1 0 0 Chrome-KB Chrome Websites Fig-3 Google Chrome Loading Time in Seconds Vs Bytes Loaded in KB 3500 8 3000 7 2500 6 Bytes in KB 5 2000 4 1500 3 1000 2 500 1 FireFox-KB 0 0 Firefox Websites Fig-4 Firefox Loading Time in Seconds Vs Bytes Loaded in KBFrom the above table and line charts we find that (i) IE 10 takes a maximum of 21.583seconds to load 3041 bytes (ii)Google chrome takes a maximum of 9.392 secondss to load2646 bytes (iii) Firefox takes a maximum of 7.106 seconds to load 2875 bytes.The totaltime taken by each browser to load these ten websites , the total amount of KB’s loaded byeach browsers has been calculated. The number of bytes loaded per second by each of thesebrowsers are IE10 – 220.912 bytes/sec,Chrome-310.106 bytes/sec and Firefox-401.688bytes/sec. It is evident from above discussion ,table-2 and Fig-2 - Fig-4 FireFox loadsfaster, places chrome at the second place and IE-10 at third place. 215
  • 6. International Journal of Computer Engineering and Technology (IJCET), ISSN 0976-6367(Print), ISSN 0976 – 6375(Online) Volume 4, Issue 1, January- February (2013), © IAEMEV FLASH WEBSITES WEBPAGE LOAD TEST Using WebPagetest tool another set of online tests were conducted for Ten otherpopular Flash based websites. The tests has been conducted with the browser IE-10. Thefully 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 80 70 20,000 60 Bytes in KB 15,000 50 40 10,000 30 5,000 20 10 0 0 Bytes Time Flash Websites Fig-5 Flash Websites- IE 10 Loading Time in Seconds Vs Bytes Loaded in KBFrom the above Table-3 and line chart Fig-5 we find that IE 10 takes a maximum of 69.472seconds to load 20, 98 bytes. The number of bytes loaded per second by the browsers IE10has been found and was – 332.648 bytes/sec. The websites involved in our test are not “Flashonly “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 regularimages and text. The heavier your Flash content is, the longer it will take to load. 216
  • 7. International Journal of Computer Engineering and Technology (IJCET), ISSN 0976-6367(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 searchengines. This means Flash website won’t be able to rank good in search engines.Consequently, there will be less traffic coming to such sites. There are some otherdisadvantages are also exists. From table-1 we observe that there is a decreasing tendencytowards 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 havebeen tested and the results were analyzed using tables and line charts. The same test has beenconducted for ten other popular Flash based website. These tests were conducted using the IE10 browser. The disadvantages of Flash only websites have been discussed. Present trends ofjQuery 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 (O’Reilly 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 O’Reilly 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