Front End Website Optimization

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

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

Who am I? Gerard Sychay Technology Director Zipscene.com Cincinnati, OH, USA

<ul><li>"In sampling the top ten U.S. websites, all but one spend less than 20% of the total response time getting th...

Why Optimise Front-End?

Why Optimise Front-End?

<ul><li>Make fewer HTTP Requests </li></ul><ul><li>Use a Content Delivery Network </li></ul><ul><li>Add an Expires or a Ca...

<ul><li>Make fewer HTTP Requests </li></ul><ul><li>Use a Content Delivery Network </li></ul><ul><li>Add an Expires or a Ca...

Rule 1: Make Fewer HTTP Requests Instead of: <script type="text/javascript" src="/javascript/foo.js"><...

Rule 3: Add An Expires Header

Rule 3: Add An Expires Header

Rule 3: Add An Expires Header <Directory "/var/www/html/css"> ExpiresActive On ExpiresByType text/css "acce...

Rule 3: Add An Expires Header

Rule 3: Add An Expires Header

<ul><li>So what if the file changes? </li></ul><ul><li><link ref=“stylesheet” type=“text/css” href=“main.css” /> </li></ul...

Rules 9,20,24: Domains

Rules 9,20,24: Domains "Avoiding DNS lookups cuts response times, but reducing parallel downloads may increase respon...

<ul><li>http://static0.example.com </li></ul><ul><li>http://static1.example.com </li></ul><ul><li>... </li></ul>Rules 9,20...

Rules 10,29: Minify Javascript /* Prototype JavaScript framework, version 1.5.1.1 * (c) 2005-2007 Sam Stephenson * * Pr...

<ul><li>Javascript </li></ul><ul><li>JSMin </li></ul><ul><li>Dojo Shrinksafe, YUI Compressor </li></ul><ul><li>Packer </li...

<ul><li>CSS </li></ul><ul><li>Pretty much just whitespace and comments </li></ul>Rules 10,29: Minify

<ul><li>Images </li></ul><ul><li>jpegtran </li></ul><ul><li>optipng </li></ul>Rules 10,29: Minify

Rule 12: Remove Duplicate Scripts

<ul><li>Let's Find Out... </li></ul>Can We Do All These At Once?

First Attempt: Template Function <html> <head> <?php insert_js ('/javascript/foo.js', '/javascript/bar.js'); ?> <?php in...

$First Attempt: Template Function function insert_js($args) { static $alreadyLoaded = array(); $files = func_get_args(); //...$

<ul><li>Instead of: </li></ul><ul><li><script type=“text/javascript” src=“/javascript/foo.js”></script> </li></ul><ul><li>...

<ul><li>Not bad, but… </li></ul><ul><li>Multiple stat() calls </li></ul><ul><li>What about CSS (e.g. background-image: ...

<ul><li>PHP build system similar to make </li></ul><ul><li>Port of ant to PHP </li></ul>Second Attempt: Phing

$<ul><li>CSS </li></ul><ul><li>$pattern = ‘/(<link.*href=“[^”]*”.*\/>\s*)+/’; </li></ul><ul><li>$buffer = preg_replace_call...$

<ul><li>Images </li></ul><ul><li>$pattern = ‘/src=“([^”]*[gif|jpg|png])”’; </li></ul><ul><li>$buffer = preg_replace_callba...

<ul><li>Automatic front-end optimisations </li></ul><ul><li>Automatic unit testing with coverage </li></ul><ul><li>Automat...

<ul><li>Summary </li></ul><ul><li>Why the front-end is important </li></ul><ul><li>34 8 YSlow rules </li></ul><ul><li>Tem...

<ul><li>Links </li></ul><ul><li>34 Rules for High Perfomance Websites: </li></ul><ul><li>http://developer.yahoo.com/perfor...

<ul><li>Thanks! </li></ul><ul><li>Questions! </li></ul><ul><li>Comments! </li></ul><ul><li>[email_address] </li></ul><ul><...

<ul><li>© 2008. Some rights reserved. </li></ul>