Front End Website Optimization
•Download as PPT, PDF•
6 likes•2,111 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 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.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Front End Website Optimization
Similar to Front End Website Optimization (20)
Recently uploaded
Recently uploaded (20)
Front End Website Optimization
- 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
- 9. Rule 1: Make Fewer HTTP Requests Instead of: <script type="text/javascript" src="/javascript/foo.js"></script> <script type="text/javascript" src="/javascript/bar.js"></script> Can we make it: <script type="text/javascript" src="/javascript/foobar.js"></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 "/var/www/html/css"> ExpiresActive On ExpiresByType text/css "access plus 1 year” </Directory>
- 13. Rule 3: Add An Expires Header
- 14. Rule 3: Add An Expires Header
- 17. Rules 9,20,24: Domains "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 ."
- 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:"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},BrowserFeatures:{XPath:!!document.evaluate,ElementExtensions:!! window.HTMLElement,SpecificElementExtensions:(document.createElement("div").__proto__!==document.createElement("form").__proto__)}...
- 23. Rule 12: Remove Duplicate Scripts
- 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'); ?> ...