front end performance
DESCRIPTION
DrupalCamp Stockholm 2009TRANSCRIPT
FrontEnd
PerformanceKonstantin
Käfer
Konstantin Käfer
What’s Performance?
Perception Measurement
Loading
Using
2
Konstantin Käfer
Styles, scripts and imagesaccount for
over 80% of load time.
3
Konstantin Käfer4
HTML CSS Scripts
ImagesBack-grounds
Other Media
Konstantin Käfer
Distribution (time)
5
HTM
L
CSS ScriptsImages
+Media
Back-grounds
Time spent generating the page in Drupal
Konstantin Käfer
Overall load time?
6
Konstantin Käfer
Page size?
7
Konstantin Käfer
Time until DOM is loaded?
8
Konstantin Käfer
Time until page is rendered?
9
Konstantin Käfer
Time until pageis functional?
10
Konstantin Käfer
Render a usable versionas early as possible.
11
Konstantin Käfer12
1
2
3
4
Introduction
Tools & Measurement
Speed optimization
Beyond YSlow
✔
Konstantin Käfer
Measure to prove optimization success.
13
Konstantin Käfer
Firebug’s Net panel
14
Konstantin Käfer
YSlow‣ Rates a webpage based on 13 criteria
‣ Determines overall load time
‣ Provides optimization suggestions
‣ Graphs, Numbers & Figures
15
Konstantin Käfer
YSlow
16
Konstantin Käfer
YSlow is not everything.
17
Konstantin Käfer
Episodes‣ Measure timing for Web 2.0 applications
‣ More granular measurement
‣ Drupal module!http://drupal.org/project/episodes
18
Konstantin Käfer
Other tools‣ AOL Page Test
online version: http://webpagetest.org
‣ IBM Page Detailerhttp://www.alphaworks.ibm.com/tech/pagedetailer
‣ Pingdomhttp://tools.pingdom.com
‣ WebKit’s Web InspectorSafari 4 Beta or WebKit nightly from http://webkit.org
‣ Web Debugging Proxieshttp://charlesproxy.com, http://fiddlertool.com
19
Konstantin Käfer
Waterfall diagrams
Start Connect First byte Last byte20
Konstantin Käfer21
1
2
3
4
Introduction
Tools & Measurement
Speed optimization
Beyond YSlow
✔
✔
Konstantin Käfer
1. Reduce requests‣ Every file produces an HTTP request
‣ Fewer requests is better than smaller size
‣ HTTP 1.1: 2 components per host in parallel22
0s
15s
30s
45s
60s
0 10 20 30
RequestsSize
Konstantin Käfer
1. Reduce requests‣ Sprites
– Many images into one file
– Shift into view with background-position
‣ Aggregate scripts and styles
– Built into Drupal
– Sophisticated: http://drupal.org/project/sf_cache
‣ No redirects
23
Konstantin Käfer
1. Reduce requests‣ Caching (see 3.)
‣ Use CSS instead of images-moz-border-radius:4px;-webkit-border-radius: 4px;border-radius: 4px;
‣ data: URLs in style sheets– url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAGXRFWHRTb2Z
0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAR9JREFUeNrEk02ORUAUhRVNJEgYsgdGbIHFsSGmhhjZAzFCRCLx906io3UROu8N+g7vPR9V95wi67oy79bXuTXP8zAMfdP48jzvCRJoihyHPcA4xRd1+V5HoZhmqZ1XWuaZtu267qWZSmKQghhKGCrZVmqqgqCQNd16g/ooI8pNOuhfuC2bX3fFwTh8nroYwrNBTxNUxzHhmHcrAf/hwbKHWa3ATYURVFRFDdwWZbYBZR75xvGbpMkefQmyzIoaRiuNE3zCGP/UNIw/FRV9RGGBkoaRhLg5yPsOA6UtM/vbfuXz0jCjc+YXvu8JwxJOCcMJ9oShtgfYXJ8VedsY0O4p+d5pmnKssyy7PGj5Pwk//6qyCfvmWU+qP+DXwIMADReKA+zC0X8AAAAAElFTkSuQmCC);
24
Konstantin Käfer
2. Use a CDN‣ Content Delivery Network
‣ Lots of servers scattered around the world
‣ Reduces roundtrip times (ping)
‣ Comparably cheap: $0.07 - $0.80 per GB– http://www.simplecdn.com– http://pantherexpress.com– http://cachefly.com– http://aws.amazon.com/cloudfront– http://www.limelightnetworks.com– http://www.akamai.com
25
Konstantin Käfer
Round Trip Time‣ HTTP is usually done over TCP/IP
‣ Stateful: Three Way Handshakes
‣ Round trip time (ping) has high effect
26
Client Server
Request
Response
Konstantin Käfer
3. Caching
27
Client ServerDisabled:?
Cache
Client ServerDefault:“Still fresh”
?
Cache
Client ServerAggressive:
Cache
Full response
Partial response
Konstantin Käfer
3. Caching‣ Controlled by HTTP headers
‣ Browsers check whether content is fresh
‣ Set Expires header to a date in the far future– <Location /css>
ExpiresActive On ExpiresDefault "access plus 1 year"</Location>
‣ Change filenames/URLs when updating
28
Konstantin Käfer
4. GZip‣ Compress text content (don’t use for images!)
– <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/css application/x-javascript</IfModule>
‣ Vastly reduces page size
‣ NowPublic.com: 700 KB ➔ 300 KB
‣ Compress scripts and styles as well
29
Konstantin Käfer
5. CSS to the top‣ == in <head>
‣ Page renders when all header CSS is loaded
‣ Loading CSS later causes re-rendering andFlash of Unstyled Content
‣ Use <link> instead of @importhttp://www.stevesouders.com/blog/2009/04/09/dont-use-import/
30
Konstantin Käfer
6. Scripts to the bottom
‣ == right before </body>
‣ Loading scripts blocks page rendering
‣ Scripts are loaded sequentially!(At least in most current browsers)
‣ Don’t use onfoo handlers in HTML code
‣ Graceful degradation
31
Konstantin Käfer
7. Minify CSS and JS‣ Remove comments and whitespace
‣ Still savings, even with GZip
‣ Drupal’s aggregator or sf_cache.module
32
Konstantin Käfer33
1
2
3
4
Introduction
Tools & Measurement
Speed optimization
Beyond YSlow
✔
✔
✔
Konstantin Käfer
8. Parallelization‣ RFC: 2 requests per host name in parallel
‣ Use multiple host names ➔ higher parallelization(Don’t overdo it)
‣ Most current browsers use > 2 connections
‣ http://stevesouders.com/ua/
34
Konstantin Käfer
HTTP connections‣ “A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy.” (RFC 2616, 8.1.4)
1 2 3 4 535
Konstantin Käfer
9. Reduce image weight‣ OptiPNG, PNGCrush, ...– Removes invisible content
– Lossless recompression
– for i in `find . -name "*.png"` ; do optipng -o7 $i ; done
‣ JPEGtran/ImageMagick– Remove color profiles, meta data, …
– Lossless JPEG operations
‣ http://smushit.com – now integrated into YSlow
36
Konstantin Käfer
10. Persistent HTTP‣ HTTP supports persistent connections
37
client clientserver server
opentim
e
multiple connections
close
persistent connection
open
closeopen
close
close
open
‣ Make sure KeepAlive is not turned off
Konstantin Käfer
10. Persistent HTTP‣ AOL Pagetest has connection view
38
Konstantin Käfer
11. Lazy initialization‣ JavaScript takes time to initialize
– Libraries such as jQuery also count
– Defer setup work
‣ Only load content above the fold
– jQuery plugin: http://bit.ly/NpZPn
– Useful on image-heavy sites
39
Konstantin Käfer
12. Other optimizations‣ “Premature optimization is the root of all evil”
—Donald Knuth
‣ Only if you have optimized everything else
‣ Strategies
– Move components to cookieless host
– Remove ETags
– Load order (see http://stevesouders.com/cuzillion/)
40
Konstantin Käfer
Ressources– High Performance Websites, Steve Souders, 2007.
– http://stevesouders.com/examples/rules.php
– http://developer.yahoo.com/performance/
– http://yuiblog.com/blog/category/performance
– http://sites.google.com/site/io/even-faster-web-sites
– http://slideshare.net/jeresig/performance-improvements-in-browsers
– http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
42