Optimizing Your Frontend Performance

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


How to scale you webpage?

Hardware Backend Frontend


Hardware

More hardware Better hardware Moores Law

▹ Transistors doubling every 18 months

▹ Transistors != Performance Distributed systems are complex Think about environment


Backend

External data sources are slow▹ SQL

▹ Files

▹ Network Locking is slower Memory is faster

▹ but less secure


Mini/Micro Optimisations

Myths▹ echo vs. print

▹ ' vs. " Objects vs. functions vs. linear source Template systems


Mini/Micro Optimisations

DON'T DO IT


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/


Results

80% of the end-user response time is spent on the front-end.


Firebug

Firefox extension Analyze and manipulate

▹ requests, page structure, CSS Javascript debugger


YSlow

Why (is your web page) slow Set of rules Firebug extension


Yslow: Performance View


Yslow: Stats


Yslow: Components


Yslow: Tools

Print View JSLint


Make Fewer HTTP Requests

Combined files▹ CSS

▹ JavaScript CSS sprites


Combined files

Release process CSS

▹ Consider URLs JavaScript

▹ Minify

▹ Obfuscate


CSS Sprites

Elements with fixed size Background image Disable repeat Negative positions


CSS Icons

Raster of icons No repeat Fixed size

<div> or <span>


CSS Backgrounds

Gradient Repeat in one

direction


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/


#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


Headers

Expires Cache-Control

▹ Session-Management 304 Not Modified


Expires

Apache mod_expire

<IfModule mod_expires.c> ExpiresDefault "access plus 1 month" ExpiresActive on </IfModule>


Cache-Control

nocache▹ no caching

▹ default for sessions private

▹ cacheable in browser cache public

▹ cacheable in browser cache and proxies


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


HTTPFox

Firefox Extension Log of all HTTP requests Not only displayed content


Gzip Components

Gzip != Zip▹ only compression

▹ no packaging

▹ tar.gz Good browser support

▹ Accept-Encoding: gzip, deflate

▹ Content-Encoding: gzip


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


Gzip In PHP 5

<?php ob_start('ob_gzhandler'); ...


Gzip In PHP 5

<?php if (function_exists('ob_gzhandler')) { ob_start('ob_gzhandler'); } ...


Configure ETags

Browser still asks webserver Server specific

▹ CDN

▹ Load balancer with multiple servers Apache

▹ FileETag none IIS

▹ http://support.microsoft.com/?id=922733


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


Reduce DNS Lookups

DNS maps host names to ips Needs time

▹ 20-120 milliseconds Cached in browser


Avoid Redirects

Obviously additional requests Only cached with explicit headers

▹ depends on webserver configuration

http://www.domain.tld▹ http://www.domain.tld/


Put Stylesheets at the Top

Progressive display of the page Page appears to load faster W3C specifications


Put Scripts at the Bottom

Scripts block parallel downloads▹ defer attribute in MSIE

onload() event▹ used by most libraries

Problem: document.write()▹ Counter

▹ Banners


Avoid CSS Expressions

MSIE from version 5▹ cross browser experience

JavaScript inside CSS Evaluated

▹ page render

▹ resize

▹ scrolling

▹ mouse movements (hover)


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


Remove Duplicate Scripts

Team size Standard scripts

▹ XMLRPC, JQuery, Prototype Script module for your template system

$templatesystem->addScript('foo.js');


Make Ajax Cacheable

Often AJAX applications avoid caching▹ http://some.domain.tld/ajax.file?t=randomvalue

A lot of requests Use more static URLs


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

Optimizing Your Frontend Performance

Technology

Transcript of Optimizing Your Frontend Performance