Front end performance (RailsWayCon 2009 short talk)

Front End PerformanceRalph von der Heyden

Dienstag, 2. Juni 2009

/me

Ruby on Rails developer

Studied computer science and business administration

Working at XING (http://xing.com)


http://xing.com

http://xing.com

Front end performance matters...

Why?


For website operators



Fast websites



Happy customers



More customers



More money


For web consultants


For web consultants

Easy to learn


Big effectFor web consultants


Extented portfolio

For web consultants


More consulting jobs

For web consultants


Facts: The impact of user perceived performance

Amazon: Sells 1% less stuff per 100ms more loading time

Google: 20% less traffic on the search page after increasing the load time by 500ms


Everything beyond

= front end

What is the front end?

HTMLgeneration


But I can tune the back end!

Back end: 10% of loading time

Front end: 90% of loading time

Assume you could double the speed of either one






3s3s






3s3s

2.85s






3s3s

2.85s1.65s


How to do it?

Fewer Requests

Smaller Requests

Speed up Requests


Fewer Requests


Fewer Requests:

Join CSS and JavaScripts


Fewer Requests:


<%=stylesheet_link_tag['layout','pagination'],:media=>"screen,projection",:cache=>"style"%>

<%=javascript_include_tag(['prototype','application'],:cache=>true)%>

Only 1 GET request in production

RailsWayCon Startpage: 5 JS files, 8 CSS files


Fewer Requests:





RailsWayCon Startpage: 5 JS files, 8 CSS filesX⇓2

X⇓1


Fewer Requests:





RailsWayCon Startpage: 5 JS files, 8 CSS files10 reques

ts saved!

X⇓2

X⇓1


Fewer Requests:

Sprite your imagesBackground image

Position

RailsWayCon: more than 30 images < 5K

Size


Fewer Requests:


Position

RailsWayCon: more than 30 images < 5K 1 Sprite⎯⎯⎯⎯

Size


Fewer Requests:


Position

RailsWayCon: more than 30 images < 5K 1 Sprite⎯⎯⎯⎯

Size

30 reque

sts saved

!


Static files (usually) don‘t change

Fewer Requests:

Far future expires header



Fewer Requests:


C



Fewer Requests:


C S



Fewer Requests:


C SGimme file



Fewer Requests:


C SGimme file

Here you go!

file



Fewer Requests:


C SGimme file

first visitHere you go!

file



file

Fewer Requests:


C SGimme file


C S second visit

file



file

Fewer Requests:


C SGimme file


C SGimme file, if fresher than mine

second visit

file



file

Fewer Requests:


C SGimme file


C SGimme file, if fresher than mine

second visit304 Not Modified

file


Fewer Requests:

Far future expires headerConditional GETs are plugging up the queue

Avoid Conditional GETs altogetherExpires: Thu, 27 May 2010 20:00:00 GMT

Cache-Control: max-age=31536000

<filesmatch "\.(jpg|gif|png|css|js)$"> ExpiresActive on ExpiresDefault "access plus 1 year"</filesmatch>


Fewer Requests:

Revving filenamesReflect change in the URL

File.mtime("my.js").to_i_to_s ⇒ /javascripts/my.js?1242765640

Also:

Be careful with CSS images

Disable ETags for static files!


Fewer Requests:



Fewer Requests:


~70 reque

sts saved

!

(for cons

ecutive p

age view

s)


Smaller Requests


Enable gzipping for all text files

Apache: mod_deflate

RailsWayCon: without gzip 169K, with gzip 54K

Smaller Requests:

gzip


Enable gzipping for all text files

Apache: mod_deflate

RailsWayCon: without gzip 169K, with gzip 54K

Smaller Requests:

gzip

68% sav

ings

for text

files


Strip comments, whitespace etc.

Rails: asset_packager plugin

RailsWayCon: 151K -> 108K

Smaller Requests:

Minify your JS and CSS


Strip comments, whitespace etc.

Rails: asset_packager plugin

RailsWayCon: 151K -> 108K

Smaller Requests:

Minify your JS and CSS

28.5% sav

ings

for CSS a

nd JS


Smaller Requests:

Know your imagesPNG is usually smaller than GIF when optimized*

Strip JPG meta data and thumbnails*

Use smush.it (http://smush.it) to show optimization potential

*Mac users: PNGpong, ImageOptim


http://smush.it

http://smush.it

Smaller Requests:

Know your images

Total page weight: 331 KB

Images: 286 KB


Smaller Requests:

Know your images

Total page weight: 331 KB

Images: 286 KB17.6% sav

ings

for total

page


Speed up Requests


Most browsers load 2 files per host

Multiple domains for static content (CNAMEs)

Rails: Set 4 asset hosts ⇒ 8 parallel downloads

config.action_controller.asset_host="http://assets%d.example.com"

Speed up requests:

Domain sharding


http://assets

http://assets

Speed up requests:

Domain sharding

time

html

image

image

image

image

image

image

image

image

image

image


Speed up requests:

Domain sharding

time

image

image

image

image

image

image

image

image

image

image

html


filesfilesfilesfiles

EdgeS

Euro

Speed up requests:

Content Delivery Network

CEuro

Rails

S

CAsia

CUSA

EdgeS

Asia

EdgeS

USA


files

files

files

files

EdgeS

Euro

Speed up requests:


CEuro

Rails

S

CAsia

CUSA

EdgeS

Asia

EdgeS

USA


files

files

files

files

EdgeS

Euro

Speed up requests:


CEuro

Rails

S

CAsia

CUSA

EdgeS

Asia

EdgeS

USA

HTML

HTML

HTML


files

files

files

files

EdgeS

Euro

Speed up requests:


CEuro

Rails

S

CAsia

CUSA

EdgeS

Asia

EdgeS

USA

HTML

HTML

HTML

files

files

files


Weapon of choice


Weapon of choice:

Firebug and YSlowPerformance Grade

Shows your weak spots

Hints how to improve

Other performance related tools


Weapon of choice:

Firebug and YSlow


Where to start?


Where to start:

PrioritiesStart with optimizations that...

Avoid requests

Make requests smaller

Speed up requests

the most!

Trade off between ease of deployment and efficiency


Where to start:


Avoid requests


Speed up requests

the most!


Joining, Sprites, Expires Header


Where to start:


Avoid requests


Speed up requests

the most!


Joining, Sprites, Expires Headergzip, image compression


Where to start:


Avoid requests


Speed up requests

the most!


Joining, Sprites, Expires Headergzip, image compression

domain sharding, cdn


Questions?

SSL & Caching

Proxies

gzipping HARD!Script loading

Redirects

ETags


Twitter @ralphhttp://rvdh.de


http://rvdh.de

http://rvdh.de

Thank you for your kind attention!


Fewer Requests:

SSL and httpsSSL: Loading http assets from a https page: Warning!

DHH suggests (Google for „37signals mixed content“):

config.action_controller.asset_host = Proc.new do |source, request| non_ssl_host = "http://asset%d.example.com" ssl_host = "https://asset1.example.com" if request.ssl? case when source =~ /\.js$/ ssl_host when request.headers["USER_AGENT"] =~ /(Safari)/ non_ssl_host when request.headers["USER_AGENT"] =~ /Firefox/ && source =~ /^\/images/ non_ssl_host else ssl_host end else non_ssl_host end end


http://asset

http://asset

https://asset1.example.com

https://asset1.example.com

Fewer Requests:

Avoid redirectsRedirect to asset: breaks caching

Redirect to html: Delays loading of assets

Always add Trailing-Slash to URLs


Front end performance (RailsWayCon 2009 short talk)

Technology

Transcript of Front end performance (RailsWayCon 2009 short talk)