front end website optimization

36
Optimising The Front-End Using YSlow And PHP (In A Continuous Integration Environment) Gerard Sychay php|works 2008 Atlanta, GA, USA

Upload: gerard-sychay

Post on 17-May-2015

4.700 views

Category:

Technology


0 download

DESCRIPTION

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.

TRANSCRIPT

Page 1: Front End Website Optimization

Optimising The Front-EndUsing YSlow

And PHP(In A Continuous Integration Environment)

Gerard Sychayphp|works 2008 Atlanta, GA, USA

Page 2: Front End Website Optimization

Who am I?

Gerard SychayTechnology Director

Zipscene.comCincinnati, OH, USA

Page 3: Front End Website Optimization

Who am I?

IRL Cool Web 2.0 Avatar

Page 4: Front End Website Optimization

"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?

Page 5: Front End Website Optimization

Why Optimise Front-End?

Page 6: Front End Website Optimization

Why Optimise Front-End?

Page 7: Front End Website Optimization

34 YSlow Rules1. Make fewer HTTP Requests

2. Use a Content Delivery Network

3. Add an Expires or a Cache-Control Header

4. Gzip Components

5. Put Stylesheets at the Top

6. Put Scripts at the Bottom

7. Avoid CSS Expressions

8. Make JavaScript and CSS External

9. Reduce DNS Lookups

10. Minify JavaScript and CSS

11. Avoid Redirects

12. Remove Duplicate Scripts

13. Configure ETags

14. Make Ajax Cacheable

15. Flush the Buffer Early

16. Use GET for Ajax Requests

17. Post-load Components

18. Preload Components

19. Reduce the Number of DOM Elements

20. Split Components Across Domains

21. Minimize the Number of iframes

22. No 404s

23. Reduce Cookie Size

24. Use Cookie-free Domains for Components

25. Minimize DOM Access

26. Develop Smart Event Handlers

27. Choose <link> over @import

28. Avoid Filters

29. Optimize Images

30. Optimize CSS Sprites

31. Don’t Scale Images in HTML

32. Make favicon.ico Small and Cacheable

33. Keep Components under 25K

34. Pack Components into a Multipart Document

Page 8: Front End Website Optimization

34 8 YSlow Rules1. Make fewer HTTP Requests

2. Use a Content Delivery Network

3. Add an Expires or a Cache-Control Header

4. Gzip Components

5. Put Stylesheets at the Top

6. Put Scripts at the Bottom

7. Avoid CSS Expressions

8. Make JavaScript and CSS External

9. Reduce DNS Lookups

10. Minify JavaScript and CSS

11. Avoid Redirects

12. Remove Duplicate Scripts

13. Configure ETags

14. Make Ajax Cacheable

15. Flush the Buffer Early

16. Use GET for Ajax Requests

17. Post-load Components

18. Preload Components

19. Reduce the Number of DOM Elements

20. Split Components Across Domains

21. Minimize the Number of iframes

22. No 404s

23. Reduce Cookie Size

24. Use Cookie-free Domains for Components

25. Minimize DOM Access

26. Develop Smart Event Handlers

27. Choose <link> over @import

28. Avoid Filters

29. Optimize Images

30. Optimize CSS Sprites

31. Don’t Scale Images in HTML

32. Make favicon.ico Small and Cacheable

33. Keep Components under 25K

34. Pack Components into a Multipart Document

Page 9: Front End Website Optimization

Rule 1: Make Fewer HTTP RequestsInstead 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?

Page 10: Front End Website Optimization

Rule 3: Add An Expires Header

Page 11: Front End Website Optimization

Rule 3: Add An Expires Header

Page 12: Front End Website Optimization

Rule 3: Add An Expires Header

<Directory "/var/www/html/css"> ExpiresActive On ExpiresByType text/css "access plus 1 year”</Directory>

Page 13: Front End Website Optimization

Rule 3: Add An Expires Header

Page 14: Front End Website Optimization

Rule 3: Add An Expires Header

Page 15: Front End Website Optimization

Rule 3: Add An Expires Header

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” />

Page 16: Front End Website Optimization

Rules 9,20,24: Domains

Page 17: Front End Website Optimization

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."

Page 18: Front End Website Optimization

Rules 9,20,24: Domains

http://static0.example.com http://static1.example.com ...

BONUS! Optimise subdomains for static contentCookiesHTTP Keep-AliveAllowOverride

Page 19: Front End Website Optimization

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__)}...

Page 20: Front End Website Optimization

Rules 10,29: Minify

Javascript

JSMinDojo Shrinksafe, YUI CompressorPacker

Page 21: Front End Website Optimization

Rules 10,29: Minify

CSS

Pretty much just whitespace and comments

Page 22: Front End Website Optimization

Rules 10,29: Minify

Images

jpegtranoptipng

Page 23: Front End Website Optimization

Rule 12: Remove Duplicate Scripts

Page 24: Front End Website Optimization

Can We Do All These At Once?

Let's Find Out...

Page 25: Front End Website Optimization

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'); ?> ...

Page 26: Front End Website Optimization

First Attempt: Template Functionfunction 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 .= "$minified\n"; }

$handle = fopen(APP_ROOT . "/cache/$bundlefile-$latest.js", 'w'); // open bundle fwrite($handle, $buffer); // write minified content to bundle file fclose($handle); $twoBitValue = 0x3 & crc32("$bundlefile.js"); // generate subdomain $path = "http://static{$twoBitValue}.example.com/cache/$bundlefile-$latest.js"; echo "<script type=\"text/javascript\" src=\"$path\"></script>";}

✓Combine✓Expires✓Subdomain✓Minify✓Remove duplicate

Page 27: Front End Website Optimization

First Attempt: Template Function

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>

Page 28: Front End Website Optimization

First Attempt: Template Function

Not bad, but… Multiple stat() calls What about CSS (e.g. background-image: url(‘…’))? AND IT MAKES THIS GUY SAD

Page 29: Front End Website Optimization

Second Attempt: Phing

PHP build system similar to make Port of ant to PHP

Page 30: Front End Website Optimization

Second Attempt: PhingCSS

$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);

Page 31: Front End Website Optimization

Second Attempt: Phing

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);

Page 32: Front End Website Optimization

Beyond Phing: Continuous Integration

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

Page 33: Front End Website Optimization

Fin

Summary

Why the front-end is important 34 8 YSlow rules Template functions Continuous deployment

Page 34: Front End Website Optimization

Fin

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/

Page 35: Front End Website Optimization

Fin

Thanks!

Questions!

Comments!

[email protected]

twitter.com/hellogerard

straylightrun.net

Page 36: Front End Website Optimization

© 2008. Some rights reserved.