Optimizing Your
Frontend Performance
Thomas Weinert

About Me
 Application Developer
▹ PHP
▹ XSLT/XPath
▹ (some) Javascript

papaya CMS
▹ PHP based Content Management System
▹ uses XSLT for Templates
Thomas Weinert, papaya Software GmbH

How to scale you webpage?
 Hardware
 Backend

Frontend
Thomas Weinert, papaya Software GmbH

Hardware
 More hardware
 Better hardware

Moores Law
▹ Transistors doubling every 18 months
▹ Transistors != Performance
 Distributed systems are complex
 Think about environment
Thomas Weinert, papaya Software GmbH

Backend
 External data sources are slow
▹ SQL
▹ Files
▹ Network

Locking is slower

Memory is faster
▹ but less secure
Thomas Weinert, papaya Software GmbH

Mini/Micro Optimisations
 Myths
▹ echo vs. print
▹ ' vs. \"

Objects vs. functions vs. linear source

Template systems
Thomas Weinert, papaya Software GmbH

Mini/Micro Optimisations
DON'T DO IT
Thomas Weinert, papaya Software GmbH

Yahoo!
 Yahoo!'s Exceptional Performance team
▹ Yahoo!'s Exceptional Performance team evangelizes
best practices for improving web performance.
They conduct research, build tools, write articles
and blogs, and speak at conferences. Their best
practices center around the rules for high
performance web sites.
▹ http://developer.yahoo.com/performance/
Thomas Weinert, papaya Software GmbH

Results
 80% of the end-user response time is spent on
the front-end.
Thomas Weinert, papaya Software GmbH

Firebug
 Firefox extension
 Analyze and manipulate
▹ requests, page structure, CSS

Javascript debugger
Thomas Weinert, papaya Software GmbH

YSlow
 Why (is your web page) slow
 Set of rules

Firebug extension
Thomas Weinert, papaya Software GmbH

Yslow: Performance View
Thomas Weinert, papaya Software GmbH

Yslow: Stats
Thomas Weinert, papaya Software GmbH

Yslow: Components
Thomas Weinert, papaya Software GmbH

Yslow: Tools
 Print View
 JSLint
Thomas Weinert, papaya Software GmbH

Make Fewer HTTP Requests
 Combined files
▹ CSS
▹ JavaScript

CSS sprites
Thomas Weinert, papaya Software GmbH

Combined files
 Release process
 CSS
▹ Consider URLs

JavaScript
▹ Minify
▹ Obfuscate
Thomas Weinert, papaya Software GmbH

CSS Sprites
 Elements with fixed size
 Background image

Disable repeat

Negative positions
Thomas Weinert, papaya Software GmbH

CSS Icons
 Raster of icons
 No repeat

Fixed size
<div> or <span>
Thomas Weinert, papaya Software GmbH

CSS Backgrounds
 Gradient
 Repeat in one
direction
Thomas Weinert, papaya Software GmbH

Minify Javascript
 Most JS libraries provide a minified version
 YUI Compressor: http://developer.yahoo.com/
yui/compressor/
▹ JS and CSS

Packer
▹ Webpage, .Net, Perl, PHP
▹ http://dean.edwards.name/packer/
Thomas Weinert, papaya Software GmbH

#2 Use A CDN
 Content Delivery Network
▹ Akamai Technologies
▹ Mirror Image Internet
▹ Limelight Networks

Bring the content to your users
▹ Geographic distance
▹ Physics is still here
 Only for large sites
 Dynamic content is complex
Thomas Weinert, papaya Software GmbH

Headers
 Expires
 Cache-Control
▹ Session-Management

304 Not Modified
Thomas Weinert, papaya Software GmbH

Expires
 Apache mod_expire
<IfModule mod_expires.c>
ExpiresDefault \"access plus 1 month\"
ExpiresActive on
</IfModule>
Thomas Weinert, papaya Software GmbH

Cache-Control
 nocache
▹ no caching
▹ default for sessions

private
▹ cacheable in browser cache

public
▹ cacheable in browser cache and proxies
Thomas Weinert, papaya Software GmbH

304 Not Modified
 Send Etag and Modfication date
▹ Etag: \"some hash\"
▹ Last-Modified: Thu, 12 Sep 2008 11:00:00 GMT
 Request headers
▹ If-Modified-Since: Tue, 12 Sep 2008 11:00:00 GMT
▹ If-None-Match: \"some hash\"

Response headers
▹ HTTP/1.1 304 Not Modified
Thomas Weinert, papaya Software GmbH

HTTPFox
 Firefox Extension
 Log of all HTTP requests

Not only displayed content
Thomas Weinert, papaya Software GmbH

Gzip Components
 Gzip != Zip
▹ only compression
▹ no packaging
▹ tar.gz

Good browser support
▹ Accept-Encoding: gzip, deflate
▹ Content-Encoding: gzip
Thomas Weinert, papaya Software GmbH

Gzip in Apache
 mod_gzip
 mod_deflate
▹ filter chain, works on dynamic content, too
▹ http://httpd.apache.org/docs/2.2/mod/mod_deflate.html
Thomas Weinert, papaya Software GmbH

Gzip In PHP 5
<?php
ob_start('ob_gzhandler');
...
Thomas Weinert, papaya Software GmbH

Gzip In PHP 5
<?php
if (function_exists('ob_gzhandler')) {
ob_start('ob_gzhandler');
}
...
Thomas Weinert, papaya Software GmbH

Configure ETags
 Browser still asks webserver
 Server specific
▹ CDN
▹ Load balancer with multiple servers
 Apache
▹ FileETag none

IIS
▹ http://support.microsoft.com/?id=922733
Thomas Weinert, papaya Software GmbH

Split requests across
domains
 HTTP 1.1 suggests 2 parallel requests per
domain
 Separate content by function
▹ www.domain.tld
▹ themes.domain.tld
▹ usercontent.domain.tld (security)

Optimisation tools change the option

Consider cookie domains
Thomas Weinert, papaya Software GmbH

Reduce DNS Lookups
 DNS maps host names to ips
 Needs time
▹ 20-120 milliseconds

Cached in browser
Thomas Weinert, papaya Software GmbH

Avoid Redirects
 Obviously additional requests
 Only cached with explicit headers
▹ depends on webserver configuration

http://www.domain.tld
▹ http://www.domain.tld/
Thomas Weinert, papaya Software GmbH

Put Stylesheets at the Top
 Progressive display of the page
 Page appears to load faster

W3C specifications
Thomas Weinert, papaya Software GmbH

Put Scripts at the Bottom
 Scripts block parallel downloads
▹ defer attribute in MSIE

onload() event
▹ used by most libraries

Problem: document.write()
▹ Counter
▹ Banners
Thomas Weinert, papaya Software GmbH

Avoid CSS Expressions
 MSIE from version 5
▹ cross browser experience

JavaScript inside CSS

Evaluated
▹ page render
▹ resize
▹ scrolling
▹ mouse movements (hover)
Thomas Weinert, papaya Software GmbH

JavaScript And CSS Files
 Do not embed JS/CSS in your pages
▹ No <script>...</script>
▹ No <style>...</style>

Separate caching headers

Revision parameter (style.css?rev=1234)
▹ Get parameter
▹ Unique URL for browser
Thomas Weinert, papaya Software GmbH

Remove Duplicate Scripts
 Team size
 Standard scripts
▹ XMLRPC, JQuery, Prototype

Script module for your template system
 $templatesystem->addScript('foo.js');
Thomas Weinert, papaya Software GmbH

Make Ajax Cacheable
 Often AJAX applications avoid caching
▹ http://some.domain.tld/ajax.file?t=randomvalue

A lot of requests

Use more static URLs
Thomas Weinert, papaya Software GmbH

References
 Slides: http://www.abasketfulofpapayas.de/
 Yahoo Performance Team
▹ http://developer.yahoo.com/performance/
 JS minimize
▹ http://developer.yahoo.com/yui/compressor/
▹ http://dean.edwards.name/packer/
 Apache GZIP
▹ http://httpd.apache.org/docs/2.2/mod/mod_deflate.html
 No Etag in IIS
▹ http://support.microsoft.com/?id=922733
Thomas Weinert, papaya Software GmbH