AALTO UNIVERSITY SCHOOL OF ELECTRICAL ENGINEERING. Page Load Performance Evaluation for Mobile Browser on a Cloud Computing Platform

(1)

AALTO UNIVERSITY SCHOOL OF ELECTRICAL ENGINEERING

Department of Communications and Networking

Shuang Gu

Page Load Performance Evaluation for Mobile Browser on a Cloud

Computing Platform

Master’s Thesis submitted for the degree of Master of Science in Technology. Espoo, 26 May, 2011

Supervisor: Adjunct Professor Timo O. Korhonen

(2)

AALTO UNIVERSITY

SCHOOL OF ELECTRICAL ENGINEERING Abstract of the Master’s Thesis Author: Shuang Gu

Name of the thesis: Page Load Performance Evaluation for Mobile Browser on a Cloud Computing Platform

Date: 26 May, 2011

Number of pages: 12 + 81

Faculty: Faculty of Electronics, Communications and Automation Professorship: S-72 Communications

Supervisor: Adjunct Professor Timo O. Korhonen Instructor: Adjunct Professor Timo O. Korhonen Abstract text:

More and more network data flows of the Internet are nowadays contributed by wireless access which is initiated from mobile devices, such as smartphones and tablets. As a result, the performance of mobile browser applications integrated in software stacks of these portable devices draws more and more attentions. In order to meet the needs of software engineering and benchmarking among various device vendors particularly, it is getting increasingly important to evaluate the performance of mobile browser accurately and efficiently. However, due to the distinct hardware and software characteristics, conventional measurement methods which are widely deployed in desktop browsing are not so applicable for mobile browsers.

This study tries to solve this problem by finding out a practical approach to evaluate the

page load performance of mobile browsers without additional software and hardware measurement investments. Several measurement models are therefore introduced, discussed and evaluated in order to point out the accurate and efficient one. As a benchmarking tool, an online measurement application is designed and implemented in the experimental part of this study. Verification data are then analyzed and discussed.

The implementation of such a web application and its context of the evaluation model provide an outline of an ideal approach to benchmark page load performance of mobile browsers. This optimized approach not only reduces the complexity of configuring a measurement environment for mobile devices, but also provides relatively accurate measurement results for continuous evaluation of mobile browsers’ page loading speed, which is useful for developers to increase mobile browser’s performance incrementally. The collected measurement results using such a measurement model are also useful as a reference for benchmarking various mobile browsers from different manufacturers.

Our research found out also possible factors which may influence to the performance of mobile browsers. The practice targeting of these factors, such as the design of web pages, will help users of mobile devices to achieve better user experience when surfing the Internet.

Keywords:

Mobile browser, Page load performance, Page loading speed, Cloud computing, JavaScript, Ajax, Google App Engine

(3)

Preface

I started to be interested in investigating on an easier method to measure the page loading speed of mobile browsers since one and half years ago when I was working as a consulting software tester in Nokia’s Maemo browser team which was working on a customized version of Mozilla Firefox Mobile. The efforts on the development of ideas and practical codes and finally summarized into this literature as my Master’s thesis in Helsinki University of Technology.

I need to thank my current employer, HiQ, on providing me an opportunity to work together with the Maemo Browser team in Nokia, so that I can get familiar with the concepts of performance evaluation of mobile browsers to generate the idea of this study. And thanks to Google to provide its App engine platform, without its ease to use, I would not be able to finish coding and deployment of such a kind of coding work.

I want to thank my supervisor Timo O. Korhonen, who helped me a lot for turning my code into this study paper, and Martin William, who helped me with the language checking of the final thesis manuscript.

I would like to thank my parents who are living in my home city in China now. Without their support, both financially and spiritually, I would not have managed to complete this study. Special thanks to my husband, Hengzhi Liu, for always believing in and encouraging me, and for having the patience to take care of our baby daughter when I had to steal time to work on completing this Master’s thesis.

And also, best wishes to Cindy, my beautiful angle.

Espoo, 26 May, 2011 Shuang Gu

(4)

List of Figures

Figure 1-1: The infrastructure of mobile access to the Internet (Ye, 2010) ... 14

Figure 1-2: Scope of the study ... 20

Figure 2-1: High level structure of web browsers ... 24

Figure 2-2: Cloud computing visual diagram ... 32

Figure 3-1: The Waterfall model of software engineering process ... 35

Figure 3-2: The agile model of software engineering process applied in this study ... 35

Figure 3-3: The Projects Management Triangle ... 38

Figure 3-4: Modular components of automatic measurement environment ... 40

Figure 3-5: UI draft on view of new execution ... 42

Figure 3-6: UI draft on view of running execution ... 42

Figure 3-7: UI draft on view of execution results ... 43

Figure 3-8: A measurement model, web page serving on device ... 44

Figure 3-9: A measurement model, web page serving in local environment ... 45

Figure 3-10: A measurement model, web page serving distributed ... 46

Figure 3-11: A measurement model, web page serving in cloud ... 47

Figure 3-12: Top 35 of Global Top Sites retrieved from Alexa.com ... 52

Figure 4-1: Screenshot of Main page, captured by using Nokia N900 ... 56

Figure 4-2: Screenshot of Run page, captured by using Nokia N900 ... 57

Figure 4-3: Screenshot of Result page, captured by using Nokia N900 ... 57

Figure 4-4: Mobile browsers within devices in measurement ... 58

Figure 4-5: Page loading speed across browsers ... 59

Figure 4-6: Average page loading speed ... 61

(8)

List of Abbreviations

Ajax Asynchronous JavaScript and XML API Application Programming Interface CSS Cascading Style Sheets

CPU Central Processing Unit

CRUD Create, Read, Update, and Delete DOM Document Object Model

DRAM Dynamic Random-Access Memory DRY Don’t Repeat Yourself

EC2 Elastic Compute Cloud FTP File Transfer Protocol GUI Graphical User Interface HCI Human-Computer Interaction HTML Hypertext Markup Language HTTP Hypertext Transfer Protocol IIS Internet Information Services IO Input and Output

JSON JavaScript Object Notation JVM Java Virtual Machine

LAMP Linux, Apache, MySQL, and PHP MTV Model-Template-View

(9)

ORM Object-Relational Mapping OS Operating System

REST Representational State Transfer RIA Rich Internet Application

RSS Really Simple Syndication / Rich Site Summary SDK Software Development Kit

SQA Software Quality Assurance SQL Structured Query Language

SWOT Strengths, Weaknesses, Opportunities, and Threats UI User Interface

URI Uniform Resource Identifier URL Uniform Resource Locator USB Universal Serial Bus UX User Experience

WLAN Wireless Local Area Network YAML YAML Ain’t Markup Language

XHTML Extensible HyperText Markup Language XML Extensible Markup Language

(10)

List of Concepts

Ajax refers to a group of interrelated web development techniques used on the client-side to create interactive web applications. [Section 2.3.1]

Cloud computing refers to Internet-based development and use of computer technology. Instead of traditional client-server structure, cloud computing abstracts the details of control over technology infrastructure from users and sets up a new supplement, consumption, and delivery model based on the Internet. It typically involves the provision of dynamically scalable and often virtualized resources as a service over the Internet. [Section 2.4.1] Convention over configuration

refers to a software design philosophy and technique with a strategy of defaults over explicit configuration. (Miller, 2009) DOM events refer to Document Object Model (DOM) events which allow

JavaScript language to listen and handle inside a HTML document being manipulated by a web browser.

Don’t Repeat Yourself refers to a principle of software development to reduce repetition of source code and all related information of software engineering. (Hunt, 2010)

Facebook refers to the most popular social networking application. It enables e.g. creating your own profile, contacting friends, and sharing photos. (Facebook, 2010)

Google App Engine refers to a development environment for web applications and a hosting service provided by Google. It consists of a Python-based web framework and an un-relational data base, which is called Bigtable. For personal usage, it is free of charge to register and use with CPU and storage limitations. [Section 2.4.2]

(11)

applications, especially for Ajax and other web-centric technologies. [Section 2.3.2]

jQuery refers to a fast and concise JavaScript library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. [Section 2.3.2] jQuery is designed to change the way that you write JavaScript. (jQuery, 2006)

Language runtime refers to one of the standard web infrastructures on server side which explains and executes computer language scripts or binary executables. This includes, for instance, PHP’s runtime, Python’s, Ruby’s, JVM (Java Virtual Machine), and so on.

Mobile browser refers to a web browsing software application designed for use on various mobile devices, such as smartphones or tablet computers. [Section 2.1.1]

Model-View-Controller refers to a software architectural pattern widely accepted in structural design of web application frameworks.

Object-relational mapping refers to a programming technique for converting data between incompatible type systems in relational databases and object-oriented programming languages.

Operating system refers to one of the standard web infrastructures on server side which provides an interface between the hardware and other software. This includes for instance Unix, Linux, FreeBSD, Microsoft Windows, and so on.

Page load performance refers to one of the most important performance metrics for a mobile browser to specify the browser application’s abilities in general, and thus to acknowledge the hardware and software appearances of the running mobile device. [Section 2.2.1]

Page loading speed refers to the average time period spent for a mobile browser on one single web page, or the sum of all time periods spent for a bunch of web pages. The page loading speed of a mobile browser

(12)

such as parsers and engines, can parse, interpret and render web contents to the browser’s user interface when responding to user requests for web addresses. [Section 2.2.1]

Python refers to a general-purpose high-level programming language. Its design philosophy emphasizes code readability. (Python Software Foundation, 1990-2010)

Representational State Transfer (REST)

refers to a style of software architecture for web applications and other distributed hypermedia systems. A web application framework is RESTful by providing convenience to the application development following REST style. (Fielding & Taylor, 2002) Rich internet application refers to an online application working more like a desktop

application than a traditional web application, e.g. webmail. RIAs are enabled by rich technologies such as Ajax which lead into faster response times and more interactive graphical user interface (GUI) elements, e.g. always visible floating menus, and controls, e.g. the dragging of GUI elements.

Social networking refers to online communities which are formed with social networking applications, which offer ways of finding people with similar interests, communicating with others, and expressing the user himself. Facebook is the most popular application worldwide. Usability refers to a part of user experience that measures how easy and

pleasurable a product or service is to use.

User experience refers to experience from a user which is positively achieved when service’s features and design meet user’s needs and expectations in a usable and pleasurable way.

Web 1.0 refers to a concept in order to present traditional web technologies being used before Web 2.0 concept appearing. The web technologies of Web 1.0 include for instance HTML, XHTML and CSS.

(13)

Web 2.0 refers to a concept for a collection of new technologies, applications, concepts, ideas, business strategies, and social trends in the web. Web 2.0 is more dynamic and more interactive than Web 1.0.

webapp refers to a simple web application framework provided by Google App Engine by default. [Section 2.4.2]

Web application framework refers to a software framework that is designed to support the development of dynamic websites, web applications and web services. These include, for instance, Rails, Django, Spring, etc. [Section 2.3.3]

Web server refers to one of the standard web infrastructures on server side which delivers contents using kinds of data transferring protocols over network. This includes for instance Apache, Microsoft IIS, Lighttpd, and so on.

Wiki refers to a web-based tool for creating, modifying, and deleting web content collaboratively. Web-based encyclopedia Wikipedia is the best known online wiki application worldwide.

(14)

1. Introduction

With the explosive growth on personal usage of smartphones and handheld computing devices in recent years, especially after the launch of the revolutionary mobile device,

iPhone (iPhone, 2011) introduced by Apple Incorporation (Apple, 2011) to public in early 2007, the proportion of mobile access to the Internet [Figure 1-1] keeps increasing dramatically compared to the traditional web access initiated from desktop computers and laptops. Consequently, people pay more and more attention to the software performance of mobile browser applications which are used most frequently (Gardner, 2010) on their handheld devices. However, instead of variously convenient software measurement tools to evaluate performance of web browser applications running on desktop computing environment, there are seldom such kinds of performance measurement tools available which are optimized specifically for those web browser applications integrated in mobile computing devices.

Different than running in capable hardware and software environments on desktop computers and laptops, the performance of web browser applications running on handheld devices is deeply affected by limited hardware capacities, restricted software execution environment, slow and unstable wireless connection, and shrunken interfaces for HCI (Human-Computer Interaction). Furthermore, it is difficult to completely execute a comprehensive performance evaluation for a mobile browser because there are a huge amount of performance metrics to be measured for comparison and benchmarking. Depending on various intentions of device manufacturers, vendors, network operators, technology media agencies and end users, a large number of human resources and computing resources are committed to measure and benchmark the performance of various brands and editions of mobile browsers together with hosted devices in the market in their own way. Increasing amounts of measurement facilities and environments are therefore established and served privately or in public all over the world although many of them are actually, as a matter of fact, redundant and unsustainable.

(15)

3G

Wi-Fi

The Internet Mobile device WLAN AP Cell site Web server

Figure 1-1: The infrastructure of mobile access to the Internet (Ye, 2010) Explanation of the terms in the figure above:

Mobile device refers to smartphone or other handheld computing devices which is used to access the Internet via wireless connection. 3G refers to the third generation of mobile telecommunication

standards for wide-area wireless voice telephone, mobile Internet access, and other application services.

Wi-Fi refers to a narrow range of connectivity technologies including WLAN (Wireless Local Area Network) based on the IEEE 802.11 standards and etc.

Cell site refers to a base station consists of antennas and electronic communication equipment to create a cell in a cellular 3G network.

WLAN AP refers to an access point of WLAN connecting to a wired network.

Web server refers to both hardware and software help on delivering content to access through the Internet.

(16)

The page load performance of a mobile browser is defined as the time period spent by a browser application to completely present the contents on a web page to the browser’s display area immediately after acknowledging a new request submitted by user. The average time period spent for a mobile browser on one single web page, or the sum of all time periods spent for a bunch of web pages, is called page loading speed. The page loading speed of a mobile browser is a measure to tell how fast the mobile browser’s infrastructure, such as parsers and engines, can parse, interpret and render web contents to the browser’s user interface when responding to user requests for web addresses. Compared to some other performance metrics of a mobile browser, such as initial start-up speed or JavaScript

execution speed, page loading speed is more convenient and more frequent to be observed by users, who used to access the Internet and switch back and forth within a bunch of hyperlinks to web sites. Consequently, the page load performance of a mobile browser is more intuitive and relevant to the user experience of the browser.

However, like with the evaluation of other performance metrics of mobile browsers, there are no conventions for the measurement of page loading speed which are available in public documentation. For example, the usage of stopwatches to manually measure the page loading time of a web page is simple but lacks reliability and scalability for large-scale and continuous performance evaluation. Meanwhile some development and testing teams of mobile browsers working for mobile device manufacturers, such as Nokia’s Maemo Browser teams, utilize high level SQA (Software Quality Assurance) process and more standardized practices to evaluate the page load performance than individuals, which makes the measurement process and data storage automatic. The teams had to commit a lot of hardware and human resources at the beginning to establish a specific measurement environment. However, the established environment consisting of valuable hardware and software commitments would not be portable to fit the performance evaluation demand on any other mobile device than the one in investment.

1.1. Purpose of the Study

In order to help the current situation of performance evaluation of mobile browsers, this study focuses on finding out an efficient and accurate measurement process to determine the page loading speed of mobile browsers while avoiding unnecessary manual intervention and dependencies to the measurement environment. The purpose of this study is to identify a relatively accurate and efficient process to evaluate the execution performance of a mobile browser, and to implement a measurement application

(17)

accordingly in the experimental part. The study concentrates on one of the critical performance metrics, the page loading speed, instead of trying to cover every possible performance metric of a mobile browser, because page load performance of a mobile browser is more intuitive and significant than other metrics relevant to the browser user’s experience.

Furthermore, as a part of the implementation of the measurement application in the experimental part, this study tries to eliminate the complexity of setting up the measurement environment by introducing cloud computing services as the hosting platform and transferring the execution environment to the measurement application which is thus publicly accessible anytime anywhere from the Internet as most modern web 2.0 applications are.

In order to measure the page loading speed of mobile browsers, a set of web pages should be defined beforehand as the standard responding data for browser’s page loading requests. In the experimental part of the study, the category of web pages which are used in the measurement process as the basis for detecting page loading speed of mobile browsers is collected from a well-known Internet traffic and page ranking service provider, Alexa.com, which provides a reliable list of global top sites based on their traffics.

There is no standard data of absolute values available to judge a browser’s page load performance. Instead, continuous measurement of page loading time and data collecting is used to provide reliable reference to determine possible performance advancement or regression after changes have been made to the application implementation or execution dependencies of the mobile browser. This recorded data on page loading time is also useful for weighing up the performance gap between various mobile browsers from different manufacturers.

The engineering process for design and implementation of such an online measurement model for mobile browsers’ page loading speed is similar as to create web 2.0 applications which are more and more popular on the Internet. The UI (User Interface) design specific for mobile devices and some Web 2.0 techniques, such as Ajax, are also beneficial for the implementation to improve the online experience of mobile users.

(18)

1.2. Research Questions

The research questions of this study mainly focus on finding out a measurement process for the page loading speed and according practices to ease the evaluation on the page load performance of mobile browsers in an accurate and efficient way. The research also focuses on the benefits and defects brought by using the cloud computing services as the implementation environment and hosting platform of the experimental work. Through the observation on practical usage of the implemented online application in the experimental part of the study, this research tries also to find out possible factors which affect the page load performance of a mobile browser. The research questions are presented here in an order of importance.

1st Question: How to evaluate page load performance of mobile browsers accurately and efficiently?

This study concentrates on identifying an optimized measurement model and according operational process to determine the page loading speed of a mobile browser, which should not only be easy to operate by measurement tool users, and proper on collected results, but also widely applicable to most kinds of mobile browsers on various mobile devices available in the market no matter on their manufactures or vendors.

The structure of a mobile browser will be introduced and discussed from part to part in order to understand the procedure for a mobile browser to execute a page loading operation to a web page and find out possible measurement approaches. Both advantages and disadvantages of these approaches will be presented and discussed during the study. By selecting the measurement model as a fundamental part of the results of our research, [Section 4.1.1] which is based on web 2.0 concepts and techniques, an according operational process of the measurement is specified and described in detail. The main objectives are to indicate:

 What should be considered for a common measurement process that would determine the page loading speed of a mobile browser?

 How to identify a practical measurement model from alternatives?

Looking through the factors which influence measurement accuracy and efficiency in page loading speed of mobile browsers helps in improving other performance evaluation

(19)

2nd Question: What are the benefits and drawbacks of implementing the measurement model on a cloud computing platform?

In the experimental part of this study, a software application is designed, implemented, tested and deployed to examine and verify the usability of the measurement model which is determined as the answer of previous question. Different from traditional software engineering practices, the experimental work is implemented and deployed on a cloud computing platform. There are many cloud computing services available on the Internet served by various providers, such as EC2 (Elastic Compute Cloud) from Amazon, and App Engine from Google. The selection of the cloud computing platform in the experimental work is Google’s App Engine, as it is the only cloud service which is free of charge to get started without limitation on time of usage, and its data traffic restriction is sufficient to sustain all of the data flows generated from the measurement practices in the experimental work.

Compared to software applications running in local environment, online applications based on cloud computing services are similar as modern web 2.0 applications popular on the Internet nowadays, which is accessible online all the time and ready to be used from anywhere in the world. As the experimental part of the study achieved the design and implementation of the measurement application within cloud computing services, this study tries to determine the influences brought by this kind of practices. Therefore, this thesis focuses also on the following topics:

 What are the benefits and drawbacks of introducing a cloud computing platform into the experimental work?

 What are the drawbacks of deploying the measurement tool onto a cloud computing platform?

Determining the benefits and drawbacks of implementing and deploying the performance management tool on a cloud computing platform may help to find out more possibilities on the design and development of a more practical measurement environment for device manufacturers and end users of mobile browsers.

3rd Question: How to improve the page load performance of a mobile browser?

After discussing the factors that influence the measurement process and the practical implementation of a measurement application, there will be some related observation on

(20)

come from the content of the web pages visited on page loading operation while others come from the specific features or components of the mobile browser, and yet more from the adopted measurement process and practical environment and software tool chains. The factors observed from the operation practices by using the implemented online management application in the experimental part of the study would be part of the answer of this question. The purpose is to find out:

 How does the design of a web page influence its page loading time in a mobile browser?

 What features or components of a mobile browser may influence its page load performance?

Determining the factors that affect the page load performance of a mobile browser is beneficial not only for the web page designers and developers to create faster web sites for mobile access, but also for end users to achieve a better user experience when using mobile devices to surf the Internet in daily occasions.

1.3. Structure of the Thesis

The structure of this Master’s thesis is the following: the literature overview concentrates on determining the concepts of mobile browser [Section 2.1], page load performance [Section 2.2] and cloud computing [Section 2.4], as well as the characteristics and features provided by the practical development environment and hosting platform, Google App Engine [Section 2.4.2]. The research chapter describes the research methods using in the experimental part of the study, and lists issues found, as well as considerations and possible solutions which emerged during the research. [Section 3] The results of the research [Section 4.1] and practical measurement results for verification on the experimental part [Section 4.2] are located in the results chapter. In the discussion chapter, the predetermined research questions are answered [Section 5.1] with benchmarks to several popular performance measurement applications [Section 5.2]. In the last chapter of the thesis, the conclusions of the research, defects and possible directions of future research are discussed. [Section 6] The developed source code of the implementation in the experimental part of the study is presented in the appendices.

(21)

Web UI engineering

Ajax JavaScript library HTML & CSS

Mobile browser Device context

Performance metrics

Cloud computing Web application framework

Google App Engine

Mobile web browsing Browser structure

Mobile online UX

Internet as a platform

Browser evaluation Page load performance

Measurement practice

DOM events

Figure 1-2: Scope of the study

Explanation of the terms in the figure above, from top to bottom and left to right:

Mobile browser refers to a web browsing software application designed for use on various mobile devices, such as smartphones or tablet computers. [Section 2.1.1]

Browser structure refers to the software architectural structure of a modern mobile browser clarified in high level. [Section 2.1.2]

Device context refers to systematic contexts to interact with the executing browser on a mobile device, which may include hardware capacities, software system, network connections and etc. Performance metrics refer to possible performance indicators being able to be

measured and compared for performance evaluation across various mobile browsers. [Section 2.1.3]

Page load performance refers to the performance of a mobile browser to respond to page loading requests, which is commonly indicated by the page loading speed of specified web pages as references. [Section 2.2.1]

(22)

Measurement practice refers to the measuring process and practical operational steps when doing the performance measurement of a mobile browser. [Section 2.2.2]

HTML & CSS refer to acronyms for HyperText Markup Language and Cascading Style Sheets, which are two basic construction components of web pages.

DOM events refer to an acronym for Document Object Model events, which allow JavaScript language to listen and handle inside a HTML document being manipulated by a web browser.

Ajax refers to an acronym for Asynchronous JavaScript and XML, which is a group of inter-related web development techniques used to create interactive web applications on the client side. [Section 2.3.1]

JavaScript library refers to a set of pre-written JavaScript controls which provides convenience to the development of JavaScript-based applications. [Section 2.3.2]

Web application framework refers to a software framework that is designed to support the development of dynamic websites, web applications and web services. [Section 2.3.3]

Mobile online UX refers to user experience of an online application for users of mobile browsers.

Cloud computing refers to a computing capability that provides an abstraction between the computing resource and its underlying technical architecture, enabling convenient, on-demand network access to a shared pool of configurable computing resources that can be rapidly provisioned and released with minimal management effort or service provider interaction. [Section 2.4.1]

Google App Engine refers to a set of Internet services consisting of web application development environment and hosting platform

(23)

2. Literature Overview

The page load performance of a mobile browser is related to performance and modularity of both software and hardware components. Additionally, bandwidth of the wireless network connection and performance measuring approaches may also affect obtained measurement results. In this chapter some general definitions of mobile browser are discussed. Several commonly used measurement approaches for performance evaluation on mobile browsers are then described in brief. In the last part the concept of cloud computing services and the selected instance in the experimental part of the study, Google App Engine, are also introduced.

2.1. Mobile Browser

In this section the concept of mobile browser is defined and explained in detail. In order to identify the possible factors in the components of the software structure of a mobile browser which could affect the page load performance of the application, the general structure of a mobile browser is introduced in high level. And in the final part several performance metrics popularly used in public measurement practice are introduced and discussed.

2.1.1.Definition of Mobile Browser

A mobile browser, also called a micro-browser, mini-browser or wireless Internet browser, is a web browsing software application designed for use on a mobile device, such as a mobile phone, PDA, tablet computer or one of any other kinds of wireless handheld devices. (Ari Jaaksi, 2002) Mobile browsers are commonly optimized depending on the hardware capabilities of hosting handheld devices, which considerably means weak computing power, limited memory capacity, insufficient electric power provided by batteries, low and unstable bandwidth of wireless connection, restricted HCI (Human-Computer Interaction) interface, and compact display area, to present web content quickly and properly in best efforts.

In order to achieve the similar user experience as traditional web browser applications running on desktop computing environment, a number of mobile browsers developed in early ages had to restrict some useful functionalities and storage consumption, thus stripped away some non-trivial features, such as advanced CSS (Cascading Style Sheets) support, JavaScript interpretation, and allowance of multimedia plugins which are playing critical roles in modern social network services supported by Web 2.0 technologies.

(24)

Gradually, these features are implemented in mobile devices since dramatic evolutions on their hardware capabilities keep going all the way.

Nowadays, mobile browsers play more and more important roles in the field of telecommunication and information technology industry. For mobile operators, mobile browsers introduce an extensive and fully customizable data services platform and consistent end user experience across multiple device types; For device manufacturers, mobile browsers provide a modularized architecture, easy integration, extensibility, compact footprint, and a reliable and proven solution on all major platforms and operating systems; For end users, they offer the fastest, richest and most intuitive, full-Internet browsing experience and services on mobile devices; And for contents providers, they contribute a rich content rendering platform for embedded devices.

2.1.2.Structure of Mobile Browser

In order to identify a mobile browser’s performance, the software realization of a mobile browser needs to be clearly understood. Derived from fully functional web browser applications running on desktop computing environment, most modern mobile browsers are constructed following software architectures similar to those of their predecessors. As the main components in the high level structure of these mobile browsers are kind of similar, they will be introduced here in a unified way. A general structuration of mobile browsers is shown in the graph. [Figure 2-1] It comprised eight major subsystems, which consist of User Interface, Browser Engine, Rendering Engine, Networking subsystem, JavaScript Interpreter, XML Parser, UI Backend, and Data Persistence subsystem, together with the dependencies between them. (Alan Grosskurth, 2006)

User Interface

The User Interface (UI) subsystem is the layer between the user and the Browser Engine. It provides features such as toolbars, visual page-load progress, smart download handling, preferences, and printing. It may be integrated with the desktop environment to provide browser session management or communication with other desktop applications.

Browser Engine

The Browser Engine subsystem is an embeddable component that provides a high-level interface to the Rendering Engine. It loads a given URI (Uniform Resource Identifier) and supports primitive browsing actions such as to go forward, back, and to reload. It provides hooks for viewing various aspects of the browsing session such as current page load process

(25)

and JavaScript alerts. It also allows the querying and manipulation of Rendering Engine settings.

Rendering Engine

The Rendering Engine subsystem produces a visual representation for a given URI. It is capable of displaying HTML and XML (Extensible Markup Language) documents, optionally styles with CSS, as well as embedded content such as images. It calculates the exact page layout and may use “reflow” algorithms to incrementally adjust the position of elements on the page. This subsystem also includes the HTML parser, which is often tightly integrated with the Rendering Engine for performance reasons and can provide varying levels of support for broken or nonstandard HTML. This tight integration is the result of a design decision and seems to be a common feature of web browser architectures.

Figure 2-1: High level structure of web browsers

Networking

The Networking subsystem implements file transfer protocols such as HTTP (HyperText Transfer Protocol) and FTP (File Transfer Protocol). It translates between different character sets, and resolves Internet media types for files. It may implement a data transfer cache of recently retrieved resources.

(26)

JavaScript Interpreter

The JavaScript Interpreter evaluates JavaScript code, which may be embedded in web pages. JavaScript is an object-oriented scripting language developed originally by Netscape (Netscape Communications, 2008). Certain JavaScript functionality, such as the opening of pop-up windows, may be disabled by the Browser Engine or Rendering Engine for security purposes.

XML Parser

The XML Parser subsystem parses XML documents into a DOM (Document Object Model) tree. This is one of the most reusable subsystems in the architecture. In fact, almost all browser implementations leverage an existing XML Parser rather than creating their own from scratch. Although arguably less important to the functionality of the system, the XML Parser is a generic, reusable component with a standard, will-defined interface.

Display Backend

The Display Backend subsystem provides drawing and windowing primitives, a set of user interface widgets, and a set of fonts. It may be tied closely with the operating system.

Data Persistence

The Data Persistence subsystem stores various data associated with the browsing session on disk. This may be high level data such as bookmarks or toolbar settings, or it may be low level data such as cookies, security certificates, or cache.

2.1.3.Performance Metrics of Mobile Browser

There are a great amount of performance metrics to evaluate a mobile browser among other alternatives in current market. Depending on different intentions from device manufacturers, vendors, network operators, technology media agencies and end users, various performance evaluation metrics are identified and adopted to measure and benchmark the performance of various brands and editions of mobile browsers together with the located mobile devices in the market in people’s own way. As the same as a web browser running on powerful computing environment, these performance metrics of a mobile browser can be separated into several aspects based on user requirements.

Startup speed

Browser’s Startup speed means the time a browser application uses to launch when the software running environment is boot up and ready to serve, which starts commonly from a

(27)

single or double click on its application icon to the visible view area of the pre-defined first page being correctly presented to the display on the mobile device for user.

JavaScript speed

JavaScript, also known as ECMAScript, is a dynamic, weakly-typed, object oriented scripting language that is primarily used in the form of client-side script interpreter and executor as part of a web browser in order to provide enhanced user interfaces on dynamic websites. Combined JavaScript with asynchronous data transferring interface provided by most web browsers and redefined data packaging convention for streaming, Ajax techniques provide the opportunities to create much better user experiences than ever, on social network websites and other web applications.

The speed of JavaScript interpreter deeply influences the speed for web browser to render websites, especially to Web 2.0 websites which are implemented with comprehensive scripts to present interactive effects on user interface and to manipulate the data across the browser and remote servers. Faster JavaScript execution time means that those web sites which use Ajax heavily, such as Digg.com, and most of online software applications, such as Gmail from Google, will be more responsive to user actions.

DOM selection speed

The DOM (Document Object Model) is a platform-neutral and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page. The faster a browser application can select elements in a web page, the more responsive it is on asynchronous page updates, which most Web 2.0 online applications heavily rely on.

Page loading speed

The page loading speed, which is also called as page loading time, is the total time a mobile browser takes to load one single web page, or the sum of all time spent for a bunch of web pages. The page loading speed is a measure to tell how fast a browser application’s infrastructural components, such as parsers and engines, can parse, interpret and render web contents to User Interface of the browser when responding to requests for web addresses from user.

(28)

Average CPU and memory usage

The usage of CPU (Computer Processing Unit) power and physical memory reveals how much system resources a browser application needs to be performing. Higher CPU utilization or more memory occupation indicates more resource consumption by a browser application, which is a negative factor when evaluating the performance of a mobile browser.

CSS rendering speed

The CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation semantics, such as the look and formatting, of a document written in a markup language, which is HTML (HyperText Markup Language) or XHTML (Extensible HyperText Markup Language) in most common applications. A mobile browser with faster CSS rendering speed would have faster page response time when loading a web page. This speed is commonly measured by detecting the page loading duration which a browser application spent on completely rendering a specific-designed web page consisting of a large number of table-to-div conversion requested from CSS formatting statement.

Browser cache performance

The browser cache is a mechanism for a web browser application to employ the temporary storage of web documents, such as web pages and images, which have ever been accessed to reduce connection bandwidth usage and perceived lag on page loading. The browser cache is also beneficial to visited web sites as it decreases the workload for the servers of those web sites to respond to duplicated user requests.

2.2. Page Load Performance

A user of a mobile browser always hopes both the browser application itself and the web pages he tries to surf to respond to his operation instantly. However the fact is quite complicated in real world. In order to make the web work faster and faster on mobile devices, many online service providers are doing their best on increasing the accessibility of the entrance page to their network services. Furthermore, mobile device manufacturers are putting their efforts into creating more powerful hardware with higher performance browser applications integrated in the software stacks on devices. The page load performance of mobile browsers is affected by all of these dynamic factors.

(29)

2.2.1.Definition of page load performance

The page load performance is one of the most important performance metrics for a mobile browser to specify the browser application’s abilities in general, and thus to acknowledge the hardware and software appearances of the running mobile device. It is commonly indicated by the time period spent by a browser application to completely present visual contents on a web page to the browser’s display area immediately after acknowledging the initial request submitted by user.

The time period spent for one single web page, or the sum of all time periods spent for a bunch of web pages, is called page loading time, as known as page loading speed. The page loading speed of a mobile browser is a measure to tell how fast the mobile browser’s infrastructure, such as parsers and engines, can parse, interpret and render web contents to the browser’s user interface when responding to user requests for web addresses. Compared to some other performance metrics of a mobile browser, such as initial start-up speed or JavaScript execution speed, page loading speed is more convenient and more frequent to be observed by browser users who used to access the Internet and switch back and forth within a bunch of hyperlinks to web sites, and thus is more intuitive and relevant to the user experience.

2.2.2.Measurement of page load performance

There is no absolutely standardized data of page loading speed available to judge a browser’s page load performance. Due to latency differences that occur with variable site traffic and server load, the measurement results of the page loading speed cannot be treated as the intuitive basis for evaluation. Instead, they should be interpreted with caution. However, continuous measurement and collections of recorded values are useful to provide reliable reference to determine possible advancement or regression of performance after changes in source code or runtime environment of the browser application. The recorded measurement results are also used to weigh up the performance gap among alternative mobile browsers which come from different manufacturers.

When a user submits a web address as a request to a browser application, which commonly means to input a URL (Uniform Resource Locator) in browser’s Location Bar and to press the “Go to” button next to the Location Bar, the browser needs to do a series of actions to fetch the specified content of the web page remotely though network connection, and then parse and render it properly onto the user interface. During this comprehensive process, not only the performance of the mobile browsing application but also the hardware

(30)

capacities of the mobile device and the connection throughput between the browser and the server play important roles on the dependencies of the page loading speed.

2.3. Utilities for Web Application Development

During the implementation of the experimental part of the study, some modern web programming techniques and helpful tools are applied to create a practical online measurement application to specify and verify the generated measurement process of mobile browser’s page loading speed in research. For instance, Ajax is used in the application to transfer generated data back and force between the measuring browser and the application server located on Google’s cloud computing platform. The jQuery library, which consists of a great number of useful JavaScript controls to provide convenience to JavaScript related programming, is also used to ease the workload of coding and to enhance user experience to the online experimental application. Additionally, the default web application framework integrated in Google’s App Engine services, webapp, established the standardized development environment and the deployment structure for the actual implementation. These concepts are therefore explained and discussed in the following sections.

2.3.1.Ajax

Ajax (Asynchronous JavaScript and XML) is a group of inter-related web development techniques used to create interactive web applications on the client side. With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. (Garrett, 2005)

Ajax is not a solo technology but a group of technologies instead. Ajax uses a combination of HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) to mark up and style information. The DOM (Document Object Model) is accessed with JavaScript to dynamically display and to allow the user to interact with the information presented. The use of Ajax techniques has led to an increase in interactive or dynamic interfaces on web pages. Despite the name of Ajax, the use of XML (Extensible Markup Language) is not actually required for data interchange. Instead, JSON (JavaScript Object Notation) (JSON, 1999) is often used as an alternative format for data interchange, although other formats or plain text can also be used.

In many cases, related pages on a website consist of much content that is common between them. Using traditional methods that content would have to be reloaded on every

(31)

to be updated, thus drastically reducing bandwidth usage and page load time. Additionally, the use of asynchronous requests allows the client’s web browser UI (User Interface) to be more interactive and to respond quickly to user inputs, and sections of pages can also be reloaded individually. Users may perceive the application to be faster or more responsive even if the application has not changed on the server side. Furthermore, using Ajax reduces connections from the client to the server, since scripts and style sheets only have to be requested once.

Despite all of these benefits, in practical situations, Ajax interfaces are often harder to develop due to their dynamic nature when compared to static pages. To reduce the barriers to Ajax development for web developers, most modern JavaScript Libraries provide an Ajax framework and corresponding utilities.

2.3.2.JavaScript library

The JavaScript library is a set of pre-written JavaScript controls which provides convenience to the development of JavaScript-based applications, especially for Ajax and other web-centric technologies. It was developed to meet the expended demands for JavaScript with the rise of Web 2.0 concepts and their implementations.

By combining most of common operations invoked through JavaScript functions and common Ajax invoking functions, the JavaScript library allows developers to concentrate more upon the web user interface behaviors, without being disturbed by the compatibility issues caused by the client-side browser difference. For instance, the jQuery JavaScript library (jQuery, 2006) supports browsers which consist of Mozilla’s Firefox version 2.0 and above, Microsoft’s Internet Explorer version 6 and above, Apple’s Safari version 3 and above, Opera’s Opera version 9 and above, and Google’s Chrome version 1.0 and above. (jQuery, 2010)

The JavaScript library is even chosen to be embedded into some web application frameworks as a component of those to provide further convenience to web developers. For instance, the web application framework Rails (Rails, 2004-2010) natively supports a JavaScript library which is called Prototype (Prototype, 2006). There are also some web application frameworks which do not embed a JavaScript library, but are easy to work with one or several JavaScript libraries together depending on their loose design and modular structure. (Bennett, 2006)

(32)

2.3.3.Web application framework

A web application framework is not only a web-based software development framework but also a reusable, skeletal, semi-complete modular platform. It is designed to support the development of dynamic websites, web applications and web services. Additionally, it is commonly allowed to be specialized to serve as a custom web server via HTTP(S) protocol. (Shan & Hua, 2006) The framework aims to relieve the overhead associated with common activities performed in web development. There are numerous web application frameworks available which associate different programming languages for each. These include, for instance, Rails framework which is built on top of Ruby language, (Rails, 2004-2010) Django built on Python language, (Django Software Foundation, 2005-2010) and Spring on Java. (SpringSource, 2004-2010)

Most web application frameworks were constructed with built-in modules to provide a range of services by following industrial standard software architectural patterns and coding guide principles which had been defined and broadly used in software engineering. For instance, the famous software architectural pattern MVC (Model-View-Controller) is always integrated to gain the benefits from the isolation of business logic from the user interface and easier code maintenance; (Selfa, Carrillo, & Del Rocio Boone, 2006) A software coding principle, DRY (Don’t Repeat Yourself) is widely respected in the framework implementation; (Thomas, 2003) A software design philosophy, convention over configuration (Miller, 2009) and a software architectural style specific for web application design, REST (Representational State Transfer) are also carefully included in the implementation of most web application frameworks as well. (Fielding & Taylor, 2002) A mature and productive web application framework will be in-complete when lacking of any of these characteristics.

In client-server structure, a web application framework plays the role of the middleware receiving all requests from the client, querying data from database, and responding back to the client with the generated results, which are commonly rendered web pages. Built with the design patterns, development principles and architectural styles by nature, most web application frameworks provide various features to simplify the work for web developers. These features aim to become helpers on a number of matters from rendering web pages, user authorization, fetching data from a database, to reducing the time consumed by a single query. (DocForge, 2010)

(33)

2.4. Cloud Computing

The concepts of cloud computing and related services are nowadays getting more and more familiar to online service providers and Internet users. Cloud computing services provide secure access to all online content, such as web applications and data, from any network device. [Figure 2-2] Running online software applications on a platform provided by cloud computing services brings a lot of benefits against traditional software applications running in local computing environment. In the experimental part of this study, the practical implementation of the measurement tool is programmed and hosted within a cloud computing platform, App Engine provided by Google. Therefore the concepts of cloud computing and Google App Engine are explained and discussed here.

Figure 2-2: Cloud computing visual diagram

2.4.1.Definition of cloud computing

Cloud computing is a computing capability that provides an abstraction between the computing resource and its underlying technical architecture, enabling convenient, on-demand network access to a shared pool of configurable computing resources that can be rapidly provisioned and released with minimal management effort or service provider interaction. (Mell & Grance, 2009) It is often considered as web application development and technical manipulation based on the Internet.

(34)

Instead of a traditional client-server structure, cloud computing abstracts the details of control over technology infrastructure from users and sets up a new supplement, consumption, and delivery model based on the Internet. Furthermore, it involves also dynamical scalability and resource virtualization as an Internet service.

2.4.2.Google App Engine

Nowadays, there are quite some cloud computing services available in the business market. One of them is Google App Engine. Google App Engine is a platform for developing and hosting web applications in Google’s infrastructure. With the power of Google-managed servers and data centers, web applications implemented and deployed on App Engine are migrated with cloud computing technology seamlessly, which assures the stability and flexibility of its hosting service globally. (Google, 2008)

Google App Engine was designed and implemented to be programming language independent to attract web developers from different technical backgrounds. When it was first released as a beta version in April 2008, Google App Engine supports Python language only. And one year later the support of Java language was added. After the Java support was added in early 2009, theoretically, any programming language which is supported by the JVM (Java Virtual Machine) is available to be used for coding with App Engine nowadays. Google App Engine was designed to work with most web application frameworks which are written in any one of its supported programming languages. For Python programmers, Google App Engine provides also a simple web application framework named as webapp, (Google, 2008) which inherited some advantages and characteristics from another powerful Python-based web application framework, the Django web framework (Django Software Foundation, 2005-2010) . With this built-in web application framework and other unique features, Google App Engine provides a complete, feature-rich environment for implementation and online publication of web applications.

(35)

3. Research

In order to find out an accurate and efficient method to measure page loading speed of mobile browsers, a measurement model and according measurement operational process should be designed, implemented and verified based on practices of evaluation activities. In this chapter, the research method which has been applied to design and programming on the implementation in the experimental part of the study is described. Each step of the research process has been clarified and discussed separately with details of consideration, possible alternative solution, and final decision on implementation. Some coding practices of the research issues are also presented in this chapter.

3.1. Research Method

Because the aim of the experimental part of the study is to create an online software application, as similar as to create a local software application, to measure and record the page loading speed of mobile browsers, the research method in the study tries to follow the standard development process popularly used on industrial software engineering. As the workout of the code implementation needs to be verified with actual measurement activities and modified based on the verification when necessary, some steps of the software engineering process, such as Design and Implementation, should be allowed to be revisited. So the traditional Waterfall model [Figure 3-1] does not fit in this work. Instead, a model of agile software engineering process [Figure 3-2] is applied all the way in the research and the programming work in the experimental part of the study.

The agile software engineering process applied in the experimental part of the study supposed to have six steps, which consists of requirement analysis, design, implementation, verification, deployment and maintenance. As the implementation of the experimental part will be developed and hosted on a cloud computing platform, the steps of deployment and maintenance, which get benefits on hosting the completed application on the cloud computing services, are therefore simplified a lot so that unnecessary to be discussed separately in this study. So there is only one section for the discussion on these two steps. The outline of the description of each step of the agile software engineering process applied in the experimental part of the study is listed below.

(36)

Figure 3-1: The Waterfall model of software engineering process

Figure 3-2: The agile model of software engineering process applied in this study

Requirement Analysis

The Requirement Analysis phrase is the first step of the software engineering process in order to identify the requirements of the purpose. During the research work of this study, the analysis will collect and classify the initial needs and conditions for creation on the measurement process of the page loading speed of mobile browsers. The concern about project budgets and the portability of the measurement process will be mentioned and discussed. Additionally, a comparison between the manual approach and the automatic

(37)

Design

In order to illustrate practical measurement models, the fundamental modular components of the measurement process will be identified at the beginning of the design phrase. And then several possible measurement models will be illustrated for discussion on both advantages and disadvantages. Each part of the discussing measurement models will be justified with possible alternatives. In the last part of the design the elements of the user interface of the experimental online measurement application would be drafted and optimized.

Implementation

The implementation will try to make the selection on standard development tools at the beginning. And then the specified measurement model will be implemented as the foundation work of the experimental part of this study. Some concerns and tricks useful in the implementation phrase will also be presented and explained.

Verification

In the verification phrase a category of web pages will be defined and collected as the reference to support the measurement results of the page loading speed. Several different models of mobile devices will be used as the testing objects for data collection on measurement results.

Deployment and Maintenance

This last engineering phrase of the research process will deploy the implementation onto the selected cloud computing platform, with the help from convenient SDK (Software Development Kit). The benefits of hosting the experimental work on a cloud computing platform will also be specified.

3.2. Requirement Analysis

Instead of trying to do the evaluation on all possible performance metrics of mobile browsers which are integrated in mobile devices available in the market, this research focuses only on measuring and evaluating the page load performance of mobile browsers because of its importance to user experience. [Section 2.2.1] The main purpose of this research is to identify a practical operational process to execute the measurement on the page loading speed of web browsing applications running on mobile devices. In order to prove the measurement process is easy to execute and adaptable for possible requirement changes, a practical software application should be designed and implemented as the

(38)

experimental part of the study. Based on this purpose, the main concerns of the requirement are listed below.

3.2.1.Functionality

The implemented software application in the experimental part of the study should be able to detect, to record and to review the data of measurement results generated after each measurement rounds being executed in the measurement process. The detection approach should be automatically executed without manual intervention in order to achieve better accuracy on generated data. All generated data needs to be stored in database consistently and available to follow-up manipulation at any time in the future. The establishment and configuration of relevant measurement environment should be easy to operate and cost saving.

Since the measurement process concentrates on web browsing applications running on mobile devices, the implemented measurement application should provide a friendly UI (User Interface) specific for mobile access. It means that the color contrast of UI should be clear enough and the font size should be easy to read through compact display area on mobile devices.

3.2.2.Portability

The solution of measurement process should be as much as possible to be portable to various kinds of mobile devices produced by different mobile device manufactures, no matter of differences on hardware capacities or on software operation systems.

The implemented software application should provide a convenient approach to measure the page loading speed of various mobile browsers, which may come from different mobile device manufactures, to ensure the measurement process is portable and reusable onto most kinds of mobile devices.

If the implemented measurement tool is a traditional software application running in local environment, the implementation and related hardware or software configuration should be easy to replicate in order to be deployed to other environment if needed. However if the implemented work is an online software application which is serving in public domain area as a normal Internet application, the requirement for replication would be significantly reduced accordingly.