Pro PHP Application Performance Tuning PHP Web Projects for Maximum Performance phần 3 doc

CHAPTER 2 ■ IMPROVING CLIENT DOWNLOAD AND RENDERING PERFORMANCE 37 The Grade Tab We’re going to continue using the Google home page. Load the home page, www.google.com. Once the Google home page loads, click “Run Test” within the YSlow tool, and if the Grade tab is not already selected, click it. You will see a screen similar to that shown in Figure 2–8. Figure 2–8. Google.com YSlow results Based on the YSlow tool, Google’s home page has an overall grade of “A” and a performance score of 94/100. YSlow contains six result filters, Content, Cookie, CSS, Images, JavaScript, and Server. The filter tabs are shown right below the page grade, and when clicked, each of these filters contains rules that describe the type of optimization to be done, why it’s beneficial, and the overall grade given to the page for the specific filter. Referring back to the results shown in Figure 2–8, Google received a “D” in implementing a Content Delivery Network and a “C” in including the “Expires” header setting, which allows a web page to cache images and content in the browser’s cache for later use. CHAPTER 2 ■ IMPROVING CLIENT DOWNLOAD AND RENDERING PERFORMANCE 38 Statistics Tab The Statistics tab, like the Grade tab, provides a bit more insight into how we can improve the rendering performance. The Statistics tab contains information regarding cache usage and provides a very easy way to understand how caching can play an important role in optimizing rendering. Figure 2–9 contains the statistics results for Google.com. Figure 2–9. Google statistics results graphs Note the pair of graphs. One graph describes the total number of resources requested as well as the total size requested when the cache is empty (the user initially visits the web page). The second graph on the right displays the same information when the cache is full (primed cache). The results are two resource requests fewer, and a 65.4KB reduction in size. With a primed cache, the browser will download less of the web page from the web server and fetch the cached content stored locally, thereby increasing the speed at which the web page loads. We will further look into caching in Chapters 4 and 5, later in the book. Tools Tab The next tab is the Tools tab. This tab contains a list of tools that help us optimize the JavaScript, CSS, and images we use on our web page. We will refer back to this tab later in the chapter—for now, let’s hold off on it. While YSlow provides a grade and insight on how well we apply optimization techniques within a web page, I primarily use it to grade and read information about a particular performance tweak and how the tweak works. What YSlow lacks is additional information on where I can save on size and what files can be updated. It is not as CHAPTER 2 ■ IMPROVING CLIENT DOWNLOAD AND RENDERING PERFORMANCE 39 transparent as one would like it to be, and it acts as a black box of sorts. Let’s take a look at a similar tool that acts as a white-box tool—Google’s Page Speed. Page Speed Google’s Page Speed is also a plug-in for Firefox/Firebug, and like YSlow, Page Speed provides a score on how well a web page has implemented optimization techniques. Unlike YSlow, Page Speed provides information on what files it analyzed, how to optimize the files, where to optimize within your web page, and metrics on how much you can improve by optimizing. Installing Page Speed To install Page Speed, load the URL http://code.google.com/speed/page- speed/download.html, click “Install Page Speed 1.X”, follow the instructions on the install window, and once the add-on is installed, restart Firefox. Page Speed at Work Start up Page Speed by clicking the Firebug icon in the lower right corner of the browser. Once the console is open, you will notice two tabs, “Page Speed” and “Page Speed Activity,” as shown in Figure 2–10. CHAPTER 2 ■ IMPROVING CLIENT DOWNLOAD AND RENDERING PERFORMANCE 40 Figure 2–10. Page Speed tabs in Firebug Click “Page Speed”, load the Google.com home page, and then click the “Analyze Performance” button. You should see results similar to Figure 2–11. CHAPTER 2 ■ IMPROVING CLIENT DOWNLOAD AND RENDERING PERFORMANCE 41 Figure 2–11. Page Speed results for Google.com Page Speed scores Google’s home page with an 89/100, and displays a list of rules used to test the single page. Here is why we use Page Speed as a tool for performance optimization on the front end. Click “Remove unused CSS”, for example. Page Speed identifies which CSS elements are not in use and estimates that 3.3KB of the file can be removed, reducing the file size by 46.5 percent. Again, reducing the size of the response as well as reducing the number of resources fetched increases the rendering performance for your user. k CHAPTER 2 ■ IMPROVING CLIENT DOWNLOAD AND RENDERING PERFORMANCE 42 Optimization Tools With the exception of the Tools tab within YSlow, the tools covered did not provide a means to implement optimization on JS, CSS, or images on a page. The tools were simply a means to measure our resources and, in what we’re about to learn, measure how well we have optimized these resources. JavaScript Optimization The first thing every developer needs to understand is that your end user is not bound to a single browser. A user can use and will use any of the myriad of browsers in the market today: Internet Explorer (IE) 6/7/8, Firefox, Chrome, Opera, and Safari, just to name a few. When it comes to JavaScript, each of the available browsers handles JavaScript using its own proprietary JavaScript engine. To date, the Chrome 6 browser has implemented V8, a C++ engine installed directly on Chrome using ECMAScript as outlined in ECMA- 262, third edition, with additional information available on the V8 web site, http://code.google.com/p/v8/. Safari 4 uses SquirrelFish, a bytecode engine (http://webkit.org/blog/189/announcing-squirrelfish/), Firefox 3.5+ uses TraceMonkey (https://wiki.mozilla.org/JavaScript:TraceMonkey), and Opera uses Carakan. By having each browser use its own JavaScript engine, you are guaranteed that your application’s JavaScript performance will perform differently. A user using one browser might experience a faster load time compared to someone using an alternative browser. Thankfully for us, there are benchmarks we can run to test which browser has a faster JavaScript engine. Using the SunSpider JavaScript benchmark tests, http://www2.webkit.org/perf/sunspider-0.9/sunspider.html, we can compare each of the major browsers running a set of JavaScript functions. The test does not run any special APIs or interaction with the DOM. It tests only core JavaScript functionality such as cryptography, date, math, string, and regular expression functionality, to name a few. The results of running the test on five types of browsers—IE 8, Firefox, 3.6, Chrome 7, Safari 5, and Opera 10—are shown in Figure 2–12. [...]... how much we reduce the response size using such a tool 53 CHAPTER 3 ■ PHP CODE OPTIMIZATION ■ Tip For a list of PHP related performance notes, please see http://talks .php. net/index .php/ PHP We’re going to cover the following best optimization practices using PHP 5 .3. 2 Since PHP has gone through many performance- tuning enhancements, older versions of PHP will benefit from these coding practices • Using... shown in Listing 3 3 to compare both approaches Listing 3 3 uses four files that are required and imported using the require_once PHP function Listing 3 3 Base that Loads Four External Class Files < ?php require_once("ClassA .php" ); require_once("ClassB .php" ); require_once("ClassC .php" ); require_once("ClassD .php" ); echo "Only testing require_once."; The required classes are shown in Listing 3 4 and contain... before we reach the for loop The updated, optimized code is shown in Listing 3 8 Listing 3 8 Optimized for Loop < ?php $items = array(1,2 ,3, 4,5,6,7,8,9,10); $count = count($items); for( $i=0; $i . class="bi x8 y5c w0 h0" alt="" CHAPTER 3 ■ PHP CODE OPTIMIZATION 56 ■ Tip For a list of PHP related performance notes, please see http://talks .php. net/index .php/ PHP. We’re going to cover the following. will use the small 30 0 30 0 image shown in Figure 2–16. Figure 2–16. Original 30 0  30 0 image used on a web page CHAPTER 2 ■ IMPROVING CLIENT DOWNLOAD AND RENDERING PERFORMANCE 51 The original. browser when CHAPTER 2 ■ IMPROVING CLIENT DOWNLOAD AND RENDERING PERFORMANCE 53 encountering a <script> tag. You also learned how to grade your web page’s performance using the YSlow 22–rule