Website Performance at Client Level

Website Performance at Client Level
Website Performance at Client Level Monica Macoveiciuc and Constantin Stan Faculty of Computer Science, Alexandru Ioan Cuza University, Iasi Abstract. This paper describes the importance of a performant presentation tier. It presents the easiest way of optimizing the client-side code, providing source code examples for good practices. It then shows the correct approach to using CSS and HTML and the impact it has on the website response time. The Ajax techonolgy is briefly described, emphasizing the role of JavaScript and presenting methods for improving its performance. In the end, some popular tools for monitoring and testing web applications are introduces.
Introduction. The Importance of a Performant Presentation Tier Multi-tier architecture (often referred to as N-tier architecture) is a client-server architecture in which the presentation, the application processing, and the data management are logically separate processes. There are many business benefits to N-Tier Architecture. For example, a small business can begin running all tiers on a single machine. As traffic and business increases, each tier can be expanded and moved to its own machine and then clustered. This is just one example of how N-Tier Architecture improves scalability and supports cost-efficient application building. The presentation tier is the topmost level of the application. It communicates with other tiers by outputting results to the browser/client tier and all other tiers in the network. Client-side programming is based on the idea that the CPU power of the computer which the client is using to browse the web can be also exploit. Things like processing simple requests, maintaining state, and the presentation tier are handled by the web surfer’s own computer instead of being handled by some web server hosting a site. Web page optimization streamlines the content to maximize display speed. Fast display speed is the key to success for a website. It increases profits, decreases costs, and improves customer. The front-end is the most accessible part of a website. Many times, the access to the server is limited and, even if one has the permissions to modify the web server or the database, improving their performance requires specialized knowledge. There is more potential for improvement by focusing on the front-end. Cutting it in half reduces response times by 40% or more, whereas cutting back-end performance in half results in less than a 10% reduction. Front-end improvements typically require less time and resources than back-end projects (redesigning application architecture and code, finding and optimizing critical code paths, adding or modifying hardware, distributing databases, etc.). Optimizing the presentation level is also inexpensive compared to the other levels of application.
Optimization The Performance Golden Rule states that only 10 to 20% of the user response time involves retrieving the requested HTML document, while the rest of it is spent on dealing with the retrieved content. Fewer HTTP Requests A simple way to improve response time is to reduce the number of HTTP requests, by reducing the number of components. There are different techniques for achieving this: the use of image maps, CSS sprites, inline images, combined scripts and stylesheets. The increase in speed is noticeable and, depending on the website, it can exceed 50%. Image Maps It is a common practice to use images for displaying navigation bars or buttons. These images are associated with URLs and, if one uses multiple hyperlinked images in this way, image maps may be a way to reduce the number of HTTP requests without changing the page’s look and feel. Adjacent images can be compound into one composite image. An image map associates multiple URLs with this image and the destination URL is chosen based on where the user clicks on the image. Instead of multiple HTTP requests, this technique requires only one. For example, the following HTML code: <div> <h4>Two Images, with Two HTTP Requests</h4> <p> <img src="img1.jpg" alt="First Image"> <img src="img2.jpg" alt="Second Image"> </p> </div> can be optimized by using a clientside usemap, the following way: <div> <h4>One Combined Image, with One HTTP Request</h4> <map name="user_map"> <area href="#1" alt="1" title="1" shape="rect" coords="0,0,100,100"> <area href="#2" alt="2" title="2" shape="rect" coords="100,0,210,100"> </map> <img src="combined.jpg" width="210" height="100"
alt="Combined image" usemap="#user_map" border="0"> </div> The only disadvantage of this approach is that it can easily lead to errors. Defin- ing the area coordinates of the image maps, if done manually, is tedious. Further more, it is almost impossible to use any shape other than rectangles. CSS Sprites Like image maps, CSS sprites allow you to combine images, but they are much more flexible. The images in an image map must be contiguous, while the CSS sprites dont have that limitation. Another advantage of using them is the reduced download size - the combined image tends to be smaller than the sum of the separate images as a result of reducing the amount of image overhead (color tables, formatting information, etc.). Moreover,it results in clean markup and fewer images to deal with. There are many tools available online that create CSS sprites from separate images. One of them is http://www.csssprites.com/. Although it works in most of the situations, this method has its drawbacks - in the rare cases in which users have turned off images in their browsers but retained CSS, a big empty hole will appear in the page where we expect our images to be placed. The links are still there and clickable, but nothing visually appears. Combined Scripts and Stylesheets Most of the websites, nowadays, are built using JavaScript and CSS. There are two ways of using them, either inline, or from external script and stylesheet files. Generally, using the latter approach is better for performance, but since there is a trend of breaking the code into many small files (the idea of modularization), it might lead to bigger response time, since additional HTTP requests are needed. The solution is using two combined files, one for all the scripts, and the other, for all the stylesheets. One website that provides compared results for common practices in building websites is http://stevesouders.com/hpws/rules.php. The tests have proven that pages with the combined scripts loads 38% faster. Use a Content Delivery Network A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content to users more efficiently. This efficiency is typically discussed as a performance issue, but it can also result in cost savings. When optimizing for performance, the server selected for delivering content to a specific user is based on a measure of network proximity. For example, the CDN may choose the server with the fewest network hops or the server with the quickest response time. Other benefits include backups, caching, and the ability
to absorb traffic spikes better. Examples of CDNs include Akamai Technologies, Limelight Networks, SAVVIS, and Panther Express. Smaller and noncommercial web sites might not be able to afford the cost of these CDN services, but there are several free CDN services available: 1. Globule (http://www.globule.org) - an Apache module developed at Vrije Universiteit in Amsterdam; 2. CoDeeN (http://codeen.cs.princeton.edu) - developed at Princeton Uni- versity on top of PlanetLab; 3. CoralCDN (http://www.coralcdn.org) - developed at New York Univer- sity. Add an Expires Header When a user visits a Web page, the browser downloads and caches the page’s resources. The next time the user visits the page, the browser checks to see if any of the resources can be served from its cache, avoiding time-consuming HTTP requests. The browser bases its decision on the resource’s expiration date. If there is an expiration date, and that date is in the future, then the resource is read from disk. If there is no expiration date, or that date is in the past, the browser issues a HTTP request. Web developers can avoid the delay caused by the new request by specifying an explicit expiration date in the future. The HTTP specification define this header as ”the date/time after which the response is considered stale.” It is sent in the HTTP response and it looks as following: Expires: Thu, 1 Jan 2015 20:00:00 GMT If this header is returned for an image in a page, the browser uses the cached image on subsequent page views, reducing the number of HTTP requests by one. Compress components Another way of reducing the response time is by reducing the size of the HTTP response, which means that fewer packets need to travel from the server to the client. Many Web servers and Web-hosting services enable compression of HTML documents by default, but compression shouldn’t stop there. Developers should also compress other types of text responses, such as scripts, stylesheets, XML, and JSON, among others. GNU zip (gzip) is the most popular compression technique. It typically reduces data sizes by 70 percent. Web clients indicate support for compression with the Accept-Encoding header in the HTTP request: Accept-Encoding: gzip, deflate If the web server sees this header in the request, it may compress the response using one of the methods listed by the client.The web server notifies the web client of this via the Content-Encoding header in the response: Content-Encoding: gzip
Correct Approach to Dealing with CSS and Scripts Progressive rendering is an expression used for the pages that load preogressively - the browser displayes the content as soon as it is available, even if it not the entire content. This is especially important for pages with a lot of content and for users on slower Internet connections. The importance of giving users visual feedback is summarized by Jakob Nielson: Progress indicators have three main advantages: They reassure the user that the system has not crashed but is working on his or her problem; they indicate approximately how long the user can be expected to wait, thus allowing the user to do other activities during long waits; and they finally provide something for the user to look at, thus making the wait less painful. This latter advantage should not be underestimated and is one reason for recommending a graphic progress bar instead of just stating the expected remaining time in numbers. Put Stylesheets at the Top Stylesheets inform the browser how to format elements in the page. If stylesheets are included lower in the page, the broswer might face the situation when it has available content, but it does not know how to render it. Browser deal with this problem differently: Internet Explorer delays rendering elements in the page until all stylesheets are downloaded. This causes the page to appear blank for a longer period of time, however, giving users the impression that the page is slow. Firefox renders page elements and redraws them later if the stylesheet changes the initial formatting. This causes elements in the page to ”flash” when they’re redrawn, which is disruptive to the user. The best answer is to avoid including stylesheets lower in the page and instead load them in the HEAD of the document. Put Scripts at the Bottom External scripts (mainly JavScript files) have a bigger impact on performance than do other resources, for two reasons. First, once a browser starts downloading a script it won’t start any other parallel downloads. Second, the browser won’t render any elements below a script until the script has finished downloading. Both of these impacts are felt when scripts are placed near the top of the page, such as in the HEAD section. Other resources in the page (such as images) are delayed from being downloaded and elements in the page that already exist (such as the HTML text in the document itself) aren’t displayed until the earlier scripts are done. Moving scripts lower in the page avoids these problems.
Avoid CSS expressions CSS expressions are a way to set CSS properties dynamically. They enable setting a style’s property based on the result of executing JavaScript code embedded within the style declaration. The issue with CSS expressions is that they are evaluated more frequently than one might expectpotentially thousands of times during a single page load. If the JavaScript code is inefficient, it can cause the page to load more slowly. Not all the browser support all the CSS properties, and one solution for obtaining the same rendering in all of them is using CSS expressions. The following example ensures that a page width is always at least 600 pixels, using an expression that Internet Explorer respects and a static setting honored by other browsers: width: expression(document.body.clientWidth < 600 ? "600px" : "auto" ); min-width: 600px; CSS expressions are re-evaluated when the page changes, such as when it is resized.This ensures that as the user resizes his browser, the width is adjusted appropriately.The frequency with which CSS expressions are evaluated is what makes them work, but it is also what makes CSS expressions bad for performance.
The Benefits of Ajax Ajax(Asynchronous JavaScript and XML) is a cross-platform set of technologies that allows developers to create web pages that behave more interactively, like applications. It uses a combination of Cascading Style Sheets (CSS), XHTML, JavaScript, and some textual datausually XML or JavaScript Object Notation (JSON) to exchange data asynchronously. This allows sectional page updates in response to user input, reducing server transfers (and resultant wait times) to a minimum. The goal of Ajax is to increase conversion rates through a faster, more user-friendly web experience. Unfortunately, unoptimized Ajax can cause performance lags, the appearance of application fragility, and user confusion. The improved communication power of the Ajax pattern is caused primarily by the XMLHttpRequest object(XHR). The object is natively supported in browsers such as Firefox, Opera, and Safari, and was initially supported as an ActiveX control under Internet Explorer 6.x and earlier. In IE 7.x, XHRs are natively supported, but the ActiveX solution is also available. The following JavaScript function contains the first step of sending an Ajax request: function createXHR( ){ // Firefox, Opera, Safari, IE 7.x try { return new XMLHttpRequest(); } catch(e) {} // IE 6.x and earlier try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e) {} try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (e) {} try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {} try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} // No XHR support return null; } A simple call creates an XMLHttpRequest object: var xhr = createXHR( ); The open() method of the XHR object is used to begin forming the request, specifying the HTTP method, URI, and a boolean value that indicates whether the request should be synchronous(false) or asynchronous(true).
xhr.open("GET","test.php",true); Summarized, the advantages of Ajax over classical web-based applications include: 1. Asynchronous calls Ajax allows for the ability to make asynchronous calls to a web server. This allows the client browser to avoid waiting for all data to arrive before allowing the user to act once more. 2. Minimal data transfer By not performing a full postback and sending all form data to the server, network utilization is minimized and quicker operations occur. In sites and locations with restricted pipes for data transfer, this can greatly improve network performance. 3. Limited processing on the server Along with the fact that only the necessary data is sent to the server, the server is not required to process all form elements. By sending only the necessary data, there is limited processing on the server. 4. ResponsivenessBecause Ajax applications are asynchronous on the client, they are perceived to be very responsive. 5. Context With a full postback, users may lose the context of where they are. Users may be at the bottom of a page, hit the Submit button, and be redirected back to the top of the page. With Ajax there is no full postback. Clicking the Submit button in an application that uses Ajax will allow users to maintain their location. The user state is maintained, and the users are no longer required to scroll down to the location they were at before clicking Submit. Inspite of all the obvious benefits, one should not abuse of Ajax calls. Although most requests should be made asynchronously so that the user can continue working without the browser locking up as it is waiting for a response, synchronous data transfer is not always an inappropriate choice. The reality is that some requests must, in fact, be made synchronously because of dependency concerns. JavaScript Optimization JavaScript brings all the Ajax technologies together and optimizing the .js code might be a key action in improving the website performance. Despite this reality, JavaScript has a reasonable claim to being the world’s most misunderstood programming language. While often considered a toy, beneath its simplicity lie some powerful language features. Deeper knowledge of this technology is an important skill for any web developer. JavaSript has the ability to supply objects that control a web browser and its Document Object Model (DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation. Web browsers can interpret client-side JavaScript statements embedded in an HTML page. When the browser (or client) requests such a page, the server sends
the full content of the document, including HTML and JavaScript statements, over the network to the client. The browser reads the page from top to bottom, displaying the results of the HTML and executing JavaScript statements as they are encountered. Since most of the user response time is spent on dealing with the content, optimizing JavaScript is very important. There are a few simple rules that can significantly improve the performance: 1. Remove the comments - most of the time, they just increase the file size. 2. Remove the whitespaces. For example, instead of writing this: var str = "JavaScript is " + x + " times more fun than HTML "; you can write this: var str="JavaScript is "+x+" times more fun than HTML"; 3. Use JavaScript shortand - x + 1 should be replaced with x++ And the code: var isGreater; if (x > 10) { isGreater = true; } else { isGreater = false; } can become this: var isGreater = (x > 10) ? true : false; 4. Use string constant macros - if a message needs to be displayed often, declare a string variable containing that message. 5. Remap built-in objects - the file size can be reduced by renaming the built-in objects, such as Window, Document, Navigator. For example, alert(window.navigator.appName); alert(window.navigator.appVersion); alert(window.navigator.userAgent); could be rewritten as follows: w=window;n=w.navigator;a=alert; a(n.appName); a(n.appVersion); 6. Lazy-load the code - many JavScript libraries support the ”lazy-loading” concept - the code is loaded only when necessary.
Web Site Performance Monitoring and Testing Continuous monitoring is critical to ensuring that the website and web-based applications are available and performing with acceptable response times. There are many tools for monitoring and testing websites, such as Firebug, Y!Slow - for Firefox, or Selenium, that is supported in many browsers. Firebug Firebug is a revolutionary Firefox extension that helps web developers and de- signers test and inspect front-end code. It includes a powerful JavaScript debugger that alows pausing the execution at any time. Using the JavaScript profiler, one can measure performance and find bottlenecks fast. The command line is one of the oldest tools in the programming toolbox. Firebug includes a command line for JavaScript and provides powerful logging functions for all the Ajax request traffic, also allowing developers to inspect the responses. The tool includes inspectors for HTML and CSS that provide all the related information about the page’s elements. Users can alter the HTML and CSS and the effects are seen instantly. Firebug is free and open source. Y!Slow and JSLint Y!Slow is a Yahoo product that analyzes web pages and finds out why they are slow, based on some rules for high performance. It is integrated with Firebug and its features include a performance report card, HTTP/HTML summary, the list of components in the page and some integrated tools, like JSLint. JSLint is a code quality tool for JavaScript. It takes a source text and scans it. If it finds a problem, it returns a message describing the problem and an approximate location within the source. The problem is not necessarily a syntax error, although it often is. JSLint looks at some style conventions as well as structural problems. It does not prove that the program is correct, but it can and does reveal the code’s problems. Y!Slow completes FireBug functionality to make Firefox an unbeatable web de- velopment tool. Selenium Selenium is a high quality open source test automation tool for web application testing. Selenium runs in Internet Explorer, Mozilla and Firefox on Windows, Linux, and Macintosh, Safari on the Mac. It includes an IDE for Selenium test scripts, which are portable and can also be run from JUNit. For example, test
scripts written using Selenium IDE in Firefox on Windows can run on Firefox in Mac or Linux, without changing any code. Selenium tests run directly in browsers and so matches the end-user experience closely. Selenium provides a rich set of testing functions specifically designed to the needs of testing of a web application. These operations are highly flexible, allowing many options for locating UI elements and comparing expected test results against actual application behavior. References 1. Andrew B. King, ”Website Optimization”, O’Reilly Media, 2008. 2. Steve Souders, ”High Performance Web Sites”, O’Reilly Media, 2007. 3. Douglas Crockford, ”JavaScript - The Good Parts”, O’Reilly Media, 2008. 4. Jakob Nielson, ”Response Times: The Three Important Limits”, http://www. useit.com/papers/responsetime.html. 5. Douglas Crockford, ”The World’s Most Misunderstood Programming Language”, http://javascript.crockford.com/javascript.html. 6. Yahoo! Developer Network Blog, http://developer.yahoo.net/blog/archives/2007/03/high_performance.html.

Website Performance at Client Level

Recomendados

Más contenido relacionado

Presentaciones para ti(20)

Destacado(6)

Similar a Website Performance at Client Level(20)

Último(20)

Website Performance at Client Level