Front end performance (RailsWayCon 2009 short talk)

Front End PerformanceRalph von der Heyden

Dienstag, 2. Juni 2009

Ruby on Rails developer

Studied computer science and business administration

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

Front end performance matters...

For website operators

Fast websites

Happy customers

More customers

More money

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

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

Fewer Requests:

RailsWayCon Startpage: 5 JS files, 8 CSS files10 reques

ts saved!

Fewer Requests:

Sprite your imagesBackground image

Position

RailsWayCon: more than 30 images < 5K

Fewer Requests:

Position

Fewer Requests:

Position

Fewer Requests:

Position

Fewer Requests:

Position

Fewer Requests:

Position

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

Fewer Requests:

Position

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

30 reque

sts saved

Static files (usually) don‘t change

Fewer Requests:

Far future expires header

Fewer Requests:

C SGimme file

Fewer Requests:

C SGimme file

Here you go!

Fewer Requests:

C SGimme file

first visitHere you go!

Fewer Requests:

C SGimme file

C S second visit

Fewer Requests:

C SGimme file

C SGimme file, if fresher than mine

second visit

Fewer Requests:

C SGimme file

C SGimme file, if fresher than mine

second visit304 Not Modified

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

Be careful with CSS images

Disable ETags for static files!

Fewer Requests:

~70 reque

sts saved

(for cons

ecutive p

age view

Smaller Requests

Enable gzipping for all text files

Apache: mod_deflate

RailsWayCon: without gzip 169K, with gzip 54K

Smaller Requests:

Enable gzipping for all text files

Apache: mod_deflate

RailsWayCon: without gzip 169K, with gzip 54K

Smaller Requests:

68% sav

for text

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

for CSS a

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

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

for total

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

Speed up requests:

Domain sharding

Speed up requests:

Domain sharding

filesfilesfilesfiles

Speed up requests:

Content Delivery Network

Speed up requests:

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

Twitter @ralphhttp://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

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)

RailswayCon 2010 - Command Your Domain

(PDF) Talk Money, Talk Maths: Financial Capabilty through ...Talk Phones, Talk Maths – PowerPoint slides This page illustrates the PowerPoint presentation ‘Talk Phones, Talk Maths’.

Part I Based on a Talk given to The Western Front ... · Based on a Talk given to The Western Front Association, East Kent Branch, ... “In his letter of September 24 the noble Lord

Job Talks - A Talkyou mustknowyour talk back-to-front and upside-down write the rst draft at least4 weeksbefore your rst practice talk practice the talkevery dayyou are on the market

TRACE32 as GDB Front-End · debugging protocol. In this case, we talk about Stop Mode debugging since the TRACE32 GDB Front-End controls the whole target system and not a single process.

The aim of this talk is to confuse you even more with names for an ape in front of a computer screen.

RailsWayCon: Multidimensional Data Analysis with JRuby

How to Talk Well in Front of People

Talk talk talk 2

talk talk talk 1 IMG_0001

Talk the Talk

talk talk Talk 1 Part6 Cont..

Progress at the RAL Front End Test Stand J. Pozimski Talk outline :

THE KING IN JERUSALEM (TALK 4/12: THE HEART OF THE …...THE KING IN JERUSALEM (TALK 4/12: THE HEART OF THE MATTER) GOING DEEPER RESOURCES On Your Front Line this Week • Bring someone

talk talk talk 1 Part 3

Department of Defense Education Activity (DoDEA) · Output commumcatlon Aid Bigtrack #571 Big Red Switch Bookworm Chat PC #325 and manual . Front Row to Go Go Talk 4 Go Talk 9 ...

C.O.N.T.R.O.L. TALK Lecture 16a TALK, TALK, TALK!.

talk talk talk 1 part4n5

talk talk talk 1 part 6

ASSOCIATION OF SALARIED MEDICAL SPECIALISTS DESPATCHES FROM …€¦ · association of salaried medical specialists. despatches from the front line: senior doctors talk about . specialist