More Related Content
Similar to J query websites performance analysis based on loading time an overview
Similar to J query websites performance analysis based on loading time an overview (20)
More from IAEME Publication
More from IAEME Publication (20)
J query websites performance analysis based on loading time an overview
- 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.asp
Journal Impact Factor (2012): 3.9580 (Calculated by GISI) ©IAEME
www.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), © 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 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(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
- 3. International Journal of Computer Engineering and Technology (IJCET), ISSN 0976-
6367(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 KB’s 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 FIOS 1/17/2013 10:10:13 AM
Document Complete Fully Loaded
First Start Bytes Bytes
Load Time Time Requests Time Requests
Byte Render In In
First 181 890
1.001s 0.311s 0.841s 1.001s 19 1.672s 99
View KB KB
Repeat 42 44
0.971s 0.327s 0.654s 0.971s 8 1.257s 12
View 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 KB
msn.com 1.672 890 4.74 696 4.236 683
Twitter.com
2.413 421 1.743 0 1.388 389
Amazon.com
3.445 1,512 4.67 1,537 2.547 1,653
Microsoft.com
2.878 935 2.135 944 2.843 944
Bondmedia.co.uk
21.583 3041 6.729 2967 7.106 2875
Huffingtonpost.com
10.754 2780 9.392 2646 4.545 2663
Tumbir.com
5.986 99 2.142 96 2.399 96
Answer.com
1.066 98 0.974 98 1.04 98
Pinterest.com
3.945 2012 2.435 1991 2.12 2003
Ask.com 3.534 865 2.253 565 2.22 825
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 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 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 KB’s 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
- 6. International Journal of Computer Engineering and Technology (IJCET), ISSN 0976-
6367(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 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 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
- 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 search
engines. 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 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 (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