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