Front End Website Optimization
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Front End Website Optimization

on

  • 6,742 views

Yahoo has developed the de facto standard for building fast front-ends for websites. The bad news: you have to follow 34 rules to get there. The good news: I'll take a subset of those rules, explain ...

Yahoo has developed the de facto standard for building fast front-ends for websites. The bad news: you have to follow 34 rules to get there. The good news: I'll take a subset of those rules, explain them, and show how you can implement those rules in an automated fashion to minimize impact on developers and designers for your high-traffic website.

Statistics

Views

Total Views
6,742
Views on SlideShare
6,671
Embed Views
71

Actions

Likes
6
Downloads
125
Comments
1

7 Embeds 71

http://coderwall.com 20
http://blog.straylightrun.net 19
http://www.straylightrun.net 14
http://www.slideshare.net 13
http://www.linkedin.com 3
http://www.scoop.it 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Front End Website Optimization Presentation Transcript

  • 1. Gerard Sychay php|works 2008 Atlanta, GA, USA Optimising The Front-End Using YSlow And PHP (In A Continuous Integration Environment)
  • 2. Who am I? Gerard Sychay Technology Director Zipscene.com Cincinnati, OH, USA
  • 3. Who am I? IRL Cool Web 2.0 Avatar
  • 4.
    • "In sampling the top ten U.S. websites, all but one spend less than 20% of the total response time getting the HTML document."
    • - http://developer.yahoo.com/performance/rules.html
    Why Optimise Front-End?
  • 5. Why Optimise Front-End?
  • 6. Why Optimise Front-End?
  • 7.
    • Make fewer HTTP Requests
    • Use a Content Delivery Network
    • Add an Expires or a Cache-Control Header
    • Gzip Components
    • Put Stylesheets at the Top
    • Put Scripts at the Bottom
    • Avoid CSS Expressions
    • Make JavaScript and CSS External
    • Reduce DNS Lookups
    • Minify JavaScript and CSS
    • Avoid Redirects
    • Remove Duplicate Scripts
    • Configure ETags
    • Make Ajax Cacheable
    • Flush the Buffer Early
    • Use GET for Ajax Requests
    • Post-load Components
    34 YSlow Rules
    • Preload Components
    • Reduce the Number of DOM Elements
    • Split Components Across Domains
    • Minimize the Number of iframes
    • No 404s
    • Reduce Cookie Size
    • Use Cookie-free Domains for Components
    • Minimize DOM Access
    • Develop Smart Event Handlers
    • Choose <link> over @import
    • Avoid Filters
    • Optimize Images
    • Optimize CSS Sprites
    • Don’t Scale Images in HTML
    • Make favicon.ico Small and Cacheable
    • Keep Components under 25K
    • Pack Components into a Multipart Document
  • 8.
    • Make fewer HTTP Requests
    • Use a Content Delivery Network
    • Add an Expires or a Cache-Control Header
    • Gzip Components
    • Put Stylesheets at the Top
    • Put Scripts at the Bottom
    • Avoid CSS Expressions
    • Make JavaScript and CSS External
    • Reduce DNS Lookups
    • Minify JavaScript and CSS
    • Avoid Redirects
    • Remove Duplicate Scripts
    • Configure ETags
    • Make Ajax Cacheable
    • Flush the Buffer Early
    • Use GET for Ajax Requests
    • Post-load Components
    34 8 YSlow Rules
    • Preload Components
    • Reduce the Number of DOM Elements
    • Split Components Across Domains
    • Minimize the Number of iframes
    • No 404s
    • Reduce Cookie Size
    • Use Cookie-free Domains for Components
    • Minimize DOM Access
    • Develop Smart Event Handlers
    • Choose <link> over @import
    • Avoid Filters
    • Optimize Images
    • Optimize CSS Sprites
    • Don’t Scale Images in HTML
    • Make favicon.ico Small and Cacheable
    • Keep Components under 25K
    • Pack Components into a Multipart Document
  • 9. Rule 1: Make Fewer HTTP Requests Instead of: <script type=&quot;text/javascript&quot; src=&quot;/javascript/foo.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;/javascript/bar.js&quot;></script> Can we make it: <script type=&quot;text/javascript&quot; src=&quot;/javascript/foobar.js&quot;></script> Instead of: <link rel=“stylesheet” type=“text/css” href=“/css/foo.css” /> <link rel=“stylesheet” type=“text/css” href=“/css/bar.css” /> Can we make it: <link rel=“stylesheet” type=“text/css” href=“/css/foobar.css” /> What about images?
  • 10. Rule 3: Add An Expires Header
  • 11. Rule 3: Add An Expires Header
  • 12. Rule 3: Add An Expires Header <Directory &quot;/var/www/html/css&quot;> ExpiresActive On ExpiresByType text/css &quot;access plus 1 year” </Directory>
  • 13. Rule 3: Add An Expires Header
  • 14. Rule 3: Add An Expires Header
  • 15.
    • So what if the file changes?
    • <link ref=“stylesheet” type=“text/css” href=“main.css” />
    • <link ref=“stylesheet” type=“text/css” href=“main.css?1207641610” />
    • <link ref=“stylesheet” type=“text/css” href=“main-1207641610.css” />
    Rule 3: Add An Expires Header
  • 16. Rules 9,20,24: Domains
  • 17. Rules 9,20,24: Domains &quot;Avoiding DNS lookups cuts response times, but reducing parallel downloads may increase response times. [A] guideline is to split these components across at least two but no more than four hostnames .&quot;
  • 18.
    • http://static0.example.com
    • http://static1.example.com
    • ...
    Rules 9,20,24: Domains
    • BONUS! Optimise subdomains for static content
    • Cookies
    • HTTP Keep-Alive
    • AllowOverride
  • 19. Rules 10,29: Minify Javascript /* Prototype JavaScript framework, version 1.5.1.1 * (c) 2005-2007 Sam Stephenson * * Prototype is freely distributable under the terms of an MIT-style license. * For details, see the Prototype web site: http://www.prototypejs.org/ * /*--------------------------------------------------------------------------*/ var Prototype = { Version: '1.5.1.1', Browser: { IE: !!(window.attachEvent && !window.opera), Opera: !!window.opera, WebKit: navigator.userAgent.indexOf('AppleWebKit/') > -1, Gecko: navigator.userAgent.indexOf('Gecko') > -1 && navigator.userAgent.indexOf('KHTML') == -1 },... var Prototype={Version:&quot;1.5.1.1&quot;,Browser:{IE:!!(window.attachEvent&&!window.opera),Opera:!!window.opera, WebKit:navigator.userAgent.indexOf(&quot;AppleWebKit/&quot;)>-1,Gecko:navigator.userAgent.indexOf(&quot;Gecko&quot;)>-1&& navigator.userAgent.indexOf(&quot;KHTML&quot;)==-1},BrowserFeatures:{XPath:!!document.evaluate,ElementExtensions:!! window.HTMLElement,SpecificElementExtensions:(document.createElement(&quot;div&quot;).__proto__!==document.createElement(&quot;form&quot;).__proto__)}...
  • 20.
    • Javascript
    • JSMin
    • Dojo Shrinksafe, YUI Compressor
    • Packer
    Rules 10,29: Minify
  • 21.
    • CSS
    • Pretty much just whitespace and comments
    Rules 10,29: Minify
  • 22.
    • Images
    • jpegtran
    • optipng
    Rules 10,29: Minify
  • 23. Rule 12: Remove Duplicate Scripts
  • 24.
    • Let's Find Out...
    Can We Do All These At Once?
  • 25. First Attempt: Template Function <html> <head> <?php insert_js ('/javascript/foo.js', '/javascript/bar.js'); ?> <?php insert_css ('/css/foo.css', '/css/bar.css'); ?> </head> <body> <?php insert_img ('/images/foo.jpg'); ?> ...
  • 26. First Attempt: Template Function function insert_js($args) { static $alreadyLoaded = array(); $files = func_get_args(); // get array of javascript files $bundlefile = str_replace('/javascript/', '', join('', $files)); $bundlefile = str_replace('.js', '', $bundlefile); $buffer = ''; $latest = 0; foreach ($files as $file) { if (isset($alreadyLoaded[$file])) continue; else $alreadyLoaded[$file] = true; $mtime = filemtime(APP_ROOT . $file); if ($mtime > $latest) $latest = $mtime; // get the latest modification time $minified = YuiCompress::compress(APP_ROOT . $file); // minify content $buffer .= &quot;$minified &quot;; } $handle = fopen(APP_ROOT . &quot;/cache/$bundlefile-$latest.js&quot;, 'w'); // open bundle fwrite($handle, $buffer); // write minified content to bundle file fclose($handle); $twoBitValue = 0x3 & crc32(&quot;$bundlefile.js&quot;); // generate subdomain $path = &quot;http://static{$twoBitValue}.example.com/cache/$bundlefile-$latest.js&quot;; echo &quot;<script type=&quot;text/javascript&quot; src=&quot;$path&quot;></script>&quot;; }
    • Combine
    • Expires
    • Subdomain
    • Minify
    • Remove duplicate
  • 27.
    • Instead of:
    • <script type=“text/javascript” src=“/javascript/foo.js”></script>
    • <script type=“text/javascript” src=“/javascript/bar.js”></script>
    • We now have:
    • <script type=“text/javascript” src=“http://static2.example.com/cache/foobar-1207762384.js”>
    • </script>
    First Attempt: Template Function
  • 28.
    • Not bad, but…
    • Multiple stat() calls
    • What about CSS (e.g. background-image: url(‘…’) )?
    • AND IT MAKES THIS GUY SAD
    First Attempt: Template Function
  • 29.
    • PHP build system similar to make
    • Port of ant to PHP
    Second Attempt: Phing
  • 30.
    • CSS
    • $pattern = ‘/(<link.*href=“[^”]*”.*/>s*)+/’;
    • $buffer = preg_replace_callback($pattern, “insert_css”, $buffer);
    • Javascript
    • $pattern = ‘/(<script.*src=“[^”]*”.”></script>s*)+/’;
    • $buffer = preg_replace_callback($pattern, “insert_js”, $buffer);
    Second Attempt: Phing
  • 31.
    • Images
    • $pattern = ‘/src=“([^”]*[gif|jpg|png])”’;
    • $buffer = preg_replace_callback($pattern, “insert_img”, $buffer);
    • $pattern = ‘/url(‘?.*[gif|jpg|png]’?)/”;
    • $buffer = preg_replace_callback($pattern, “insert_cssimg”, $buffer);
    Second Attempt: Phing
  • 32.
    • Automatic front-end optimisations
    • Automatic unit testing with coverage
    • Automatic syntax checking (with `php -l` )
    • Automatic standards checking (with PHPCodeSniffer)
    • Automatic deployment to integration
    • Automatic deployment to any environment
    • History of builds
    Beyond Phing: Continuous Integration
  • 33.
    • Summary
    • Why the front-end is important
    • 34 8 YSlow rules
    • Template functions
    • Continuous deployment
    Fin
  • 34.
    • Links
    • 34 Rules for High Perfomance Websites:
    • http://developer.yahoo.com/performance/rules.html
    • YSlow homepage:
    • http://developer.yahoo.com/yslow/
    • Cal Henderson Flickr article:
    • http://www.thinkvitamin.com/features/webapps/serving-javascript-fast
    • Sitepoint article:
    • http://www.sitepoint.com/article/web-site-optimization-steps/
    Fin
  • 35.
    • Thanks!
    • Questions!
    • Comments!
    • [email_address]
    • twitter.com/hellogerard
    • straylightrun.net
    Fin
  • 36.
    • © 2008. Some rights reserved.