front end performance
TRANSCRIPT
FrontEnd
PerformanceKonstantin
Käfer
Konstantin Käfer
Render a usable versionas early as possible.
3
Konstantin Käfer
Firebug’s Net panel
4
Konstantin Käfer
‣ Visualizes load order
‣ Rules
– descend as fast as possible
– as shallow as possible
– as narrow as possible
Waterfall graphs
5
Konstantin Käfer
YSlow‣ Rates a webpage based on 13 criteria
‣ Determines overall load time
‣ Provides optimization suggestions
‣ Graphs, Numbers & Figures
6
Konstantin Käfer
YSlow
7
Konstantin Käfer
YSlow is not everything.
8
Konstantin Käfer
Webpage Test‣ Automated measurement using IE
‣ Shows when rendering starts
‣ Connection view:
– http://webpagetest.org or local installation9
Konstantin Käfer
Other tools‣ IBM Page Detailer
http://www.alphaworks.ibm.com/tech/pagedetailer
‣ Pingdomhttp://tools.pingdom.com
‣ Episodeshttp://drupal.org/project/episodes
‣ Safari’s Web Inspector (Safari 4 and up)
‣ Web Debugging Proxieshttp://charlesproxy.com, http://fiddlertool.com
10
Konstantin Käfer
Waterfall diagrams
Start Connect First byte Last byte11
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 parallel12
0s
15s
30s
45s
60s
0 10 20 30
RequestsSize (KB)
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
13
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);
14
Konstantin Käfer
1. Reduce requests‣ Data URLs in Internet Explorer < 8:
– MHTML: http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/
– Include encoded images as Multipart HTML– url(mhtml:http://example.com/style.css!somestring);
– Not a proven technology (fails on certain configs)
15
Konstantin Käfer
2. Use a CDN‣ Content Delivery Network
‣ Place servers near users to reduce ping time
‣ More on that in a bit
16
Konstantin Käfer
3. Caching
17
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>
‣ Drupal default: 2 weeks
‣ Change filenames/URLs when updating
18
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 (often halfs)
‣ Compress scripts and styles as well
19
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/
20
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
21
Konstantin Käfer
7. Minify CSS and JS‣ Remove comments and whitespace
‣ Still savings, even with GZip
‣ Drupal’s aggregator or sf_cache.module
22
Konstantin Käfer
8. Parallelization‣ “A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy.” (RFC 2616, 8.1.4)
‣ Use multiple host names ➔ higher parallelization(Don’t overdo it)
‣ Most current browsers use > 2 connections
‣ http://stevesouders.com/ua/
23
Konstantin Käfer
‣ Ensure proper distribution
‣ Webpage Test graphs:
8. Parallelization
24
Konstantin Käfer
9. Reduce image weight‣ OptiPNG, PNGCrush, ...– Removes invisible content by lossless recompression
‣ JPEGtran/ImageMagick: Lossless JPEG operations
– Remove color profiles, meta data, …
‣ ImageOptim: Batch compression
‣ smushit.com – now integrated into YSlow
‣ punypng.com – supposedly more efficient
25
Konstantin Käfer
10. 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
‣ Don’t load invisible content (tabs) on page load
26
Konstantin Käfer
11. 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/)
27
Konstantin Käfer
Konstantin Kä[email protected] — @kkaefer
28
Render a usable versionas early as possible.
Konstantin Käfer
Resources– 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/
29