Date post: | 10-Nov-2014 |
Category: |
Technology |
Upload: | ralph-von-der-heyden |
View: | 3,223 times |
Download: | 0 times |
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)
Dienstag, 2. Juni 2009
Front end performance matters...
Why?
Dienstag, 2. Juni 2009
For website operators
Dienstag, 2. Juni 2009
For website operators
Fast websites
Dienstag, 2. Juni 2009
For website operators
Happy customers
Dienstag, 2. Juni 2009
For website operators
More customers
Dienstag, 2. Juni 2009
For website operators
More money
Dienstag, 2. Juni 2009
For web consultants
Dienstag, 2. Juni 2009
For web consultants
Easy to learn
Dienstag, 2. Juni 2009
Big effectFor web consultants
Dienstag, 2. Juni 2009
Extented portfolio
For web consultants
Dienstag, 2. Juni 2009
More consulting jobs
For web consultants
Dienstag, 2. Juni 2009
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
Dienstag, 2. Juni 2009
Everything beyond
= front end
What is the front end?
HTMLgeneration
Dienstag, 2. Juni 2009
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
Dienstag, 2. Juni 2009
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
Dienstag, 2. Juni 2009
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
2.85s
Dienstag, 2. Juni 2009
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
2.85s1.65s
Dienstag, 2. Juni 2009
How to do it?
Fewer Requests
Smaller Requests
Speed up Requests
Dienstag, 2. Juni 2009
Fewer Requests
Dienstag, 2. Juni 2009
Fewer Requests:
Join CSS and JavaScripts
Dienstag, 2. Juni 2009
Fewer Requests:
Join CSS and JavaScripts
<%=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
Dienstag, 2. Juni 2009
Fewer Requests:
Join CSS and JavaScripts
<%=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 filesX⇓2
X⇓1
Dienstag, 2. Juni 2009
Fewer Requests:
Join CSS and JavaScripts
<%=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 files10 reques
ts saved!
X⇓2
X⇓1
Dienstag, 2. Juni 2009
Fewer Requests:
Sprite your imagesBackground image
Position
RailsWayCon: more than 30 images < 5K
Size
Dienstag, 2. Juni 2009
Fewer Requests:
Sprite your imagesBackground image
Position
RailsWayCon: more than 30 images < 5K
Size
Dienstag, 2. Juni 2009
Fewer Requests:
Sprite your imagesBackground image
Position
RailsWayCon: more than 30 images < 5K
Size
Dienstag, 2. Juni 2009
Fewer Requests:
Sprite your imagesBackground image
Position
RailsWayCon: more than 30 images < 5K
Size
Dienstag, 2. Juni 2009
Fewer Requests:
Sprite your imagesBackground image
Position
RailsWayCon: more than 30 images < 5K
Size
Dienstag, 2. Juni 2009
Fewer Requests:
Sprite your imagesBackground image
Position
RailsWayCon: more than 30 images < 5K 1 Sprite⎯⎯⎯⎯
Size
Dienstag, 2. Juni 2009
Fewer Requests:
Sprite your imagesBackground image
Position
RailsWayCon: more than 30 images < 5K 1 Sprite⎯⎯⎯⎯
Size
30 reque
sts saved
!
Dienstag, 2. Juni 2009
Static files (usually) don‘t change
Fewer Requests:
Far future expires header
Dienstag, 2. Juni 2009
Static files (usually) don‘t change
Fewer Requests:
Far future expires header
C
Dienstag, 2. Juni 2009
Static files (usually) don‘t change
Fewer Requests:
Far future expires header
C S
Dienstag, 2. Juni 2009
Static files (usually) don‘t change
Fewer Requests:
Far future expires header
C SGimme file
Dienstag, 2. Juni 2009
Static files (usually) don‘t change
Fewer Requests:
Far future expires header
C SGimme file
Here you go!
file
Dienstag, 2. Juni 2009
Static files (usually) don‘t change
Fewer Requests:
Far future expires header
C SGimme file
first visitHere you go!
file
Dienstag, 2. Juni 2009
Static files (usually) don‘t change
file
Fewer Requests:
Far future expires header
C SGimme file
first visitHere you go!
C S second visit
file
Dienstag, 2. Juni 2009
Static files (usually) don‘t change
file
Fewer Requests:
Far future expires header
C SGimme file
first visitHere you go!
C SGimme file, if fresher than mine
second visit
file
Dienstag, 2. Juni 2009
Static files (usually) don‘t change
file
Fewer Requests:
Far future expires header
C SGimme file
first visitHere you go!
C SGimme file, if fresher than mine
second visit304 Not Modified
file
Dienstag, 2. Juni 2009
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>
Dienstag, 2. Juni 2009
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!
Dienstag, 2. Juni 2009
Fewer Requests:
Far future expires header
Dienstag, 2. Juni 2009
Fewer Requests:
Far future expires header
Dienstag, 2. Juni 2009
Fewer Requests:
Far future expires header
~70 reque
sts saved
!
(for cons
ecutive p
age view
s)
Dienstag, 2. Juni 2009
Smaller Requests
Dienstag, 2. Juni 2009
Enable gzipping for all text files
Apache: mod_deflate
RailsWayCon: without gzip 169K, with gzip 54K
Smaller Requests:
gzip
Dienstag, 2. Juni 2009
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
Dienstag, 2. Juni 2009
Strip comments, whitespace etc.
Rails: asset_packager plugin
RailsWayCon: 151K -> 108K
Smaller Requests:
Minify your JS and CSS
Dienstag, 2. Juni 2009
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
Dienstag, 2. Juni 2009
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
Dienstag, 2. Juni 2009
Smaller Requests:
Know your images
Total page weight: 331 KB
Images: 286 KB
Dienstag, 2. Juni 2009
Smaller Requests:
Know your images
Total page weight: 331 KB
Images: 286 KB17.6% sav
ings
for total
page
Dienstag, 2. Juni 2009
Speed up Requests
Dienstag, 2. Juni 2009
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
Dienstag, 2. Juni 2009
Speed up requests:
Domain sharding
time
html
image
image
image
image
image
image
image
image
image
image
Dienstag, 2. Juni 2009
Speed up requests:
Domain sharding
time
image
image
image
image
image
image
image
image
image
image
html
Dienstag, 2. Juni 2009
filesfilesfilesfiles
EdgeS
Euro
Speed up requests:
Content Delivery Network
CEuro
Rails
S
CAsia
CUSA
EdgeS
Asia
EdgeS
USA
Dienstag, 2. Juni 2009
files
files
files
files
EdgeS
Euro
Speed up requests:
Content Delivery Network
CEuro
Rails
S
CAsia
CUSA
EdgeS
Asia
EdgeS
USA
Dienstag, 2. Juni 2009
files
files
files
files
EdgeS
Euro
Speed up requests:
Content Delivery Network
CEuro
Rails
S
CAsia
CUSA
EdgeS
Asia
EdgeS
USA
HTML
HTML
HTML
Dienstag, 2. Juni 2009
files
files
files
files
EdgeS
Euro
Speed up requests:
Content Delivery Network
CEuro
Rails
S
CAsia
CUSA
EdgeS
Asia
EdgeS
USA
HTML
HTML
HTML
files
files
files
Dienstag, 2. Juni 2009
Weapon of choice
Dienstag, 2. Juni 2009
Weapon of choice:
Firebug and YSlowPerformance Grade
Shows your weak spots
Hints how to improve
Other performance related tools
Dienstag, 2. Juni 2009
Weapon of choice:
Firebug and YSlow
Dienstag, 2. Juni 2009
Where to start?
Dienstag, 2. Juni 2009
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
Dienstag, 2. Juni 2009
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
Joining, Sprites, Expires Header
Dienstag, 2. Juni 2009
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
Joining, Sprites, Expires Headergzip, image compression
Dienstag, 2. Juni 2009
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
Joining, Sprites, Expires Headergzip, image compression
domain sharding, cdn
Dienstag, 2. Juni 2009
Questions?
SSL & Caching
Proxies
gzipping HARD!Script loading
Redirects
ETags
Dienstag, 2. Juni 2009
Thank you for your kind attention!
Dienstag, 2. Juni 2009
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
Dienstag, 2. Juni 2009
Fewer Requests:
Avoid redirectsRedirect to asset: breaks caching
Redirect to html: Delays loading of assets
Always add Trailing-Slash to URLs
Dienstag, 2. Juni 2009