optimizing your frontend performance
TRANSCRIPT
Optimizing YourFrontend Performance
Thomas Weinert
Thomas Weinert, papaya Software GmbH
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