Front End Performance
-
Upload
konstantin-kaefer -
Category
Technology
-
view
1.416 -
download
1
description
Transcript of Front End Performance
![Page 1: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/1.jpg)
FrontEnd
PerformanceKonstantin
Käfer
![Page 2: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/2.jpg)
Konstantin Käfer
What’s Performance?
Perception Measurement
Loading
Using
2
![Page 3: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/3.jpg)
Konstantin Käfer
Styles, scripts and imagesaccount for
over 80% of load time.
3
![Page 4: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/4.jpg)
Konstantin Käfer4
HTML CSS Scripts
ImagesBack-grounds
Other Media
![Page 5: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/5.jpg)
Konstantin Käfer
Distribution (time)
5
HTM
L
CSS ScriptsImages
+Media
Back-grounds
Time spent generating the page in Drupal
![Page 6: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/6.jpg)
Konstantin Käfer
Overall load time?
6
![Page 7: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/7.jpg)
Konstantin Käfer
Page size?
7
![Page 8: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/8.jpg)
Konstantin Käfer
Time until DOM is loaded?
8
![Page 9: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/9.jpg)
Konstantin Käfer
Time until page is rendered?
9
![Page 10: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/10.jpg)
Konstantin Käfer
Time until pageis functional?
10
![Page 11: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/11.jpg)
Konstantin Käfer
Render a usable versionas early as possible.
11
![Page 12: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/12.jpg)
Konstantin Käfer12
1
2
3
4
Introduction
Tools & Measurement
Speed optimization
Beyond YSlow
✔
![Page 13: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/13.jpg)
Konstantin Käfer
Measure to prove optimization success.
13
![Page 14: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/14.jpg)
Konstantin Käfer
Firebug’s Net panel
14
![Page 15: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/15.jpg)
Konstantin Käfer
YSlow‣ Rates a webpage based on 13 criteria
‣ Determines overall load time
‣ Provides optimization suggestions
‣ Graphs, Numbers & Figures
15
![Page 16: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/16.jpg)
Konstantin Käfer
YSlow
16
![Page 17: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/17.jpg)
Konstantin Käfer
YSlow is not everything.
17
![Page 18: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/18.jpg)
Konstantin Käfer
Episodes‣ Measure timing for Web 2.0 applications
‣ More granular measurement
‣ Drupal module!http://drupal.org/project/episodes
18
![Page 19: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/19.jpg)
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
![Page 20: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/20.jpg)
Konstantin Käfer
Waterfall diagrams
Start Connect First byte Last byte20
![Page 21: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/21.jpg)
Konstantin Käfer21
1
2
3
4
Introduction
Tools & Measurement
Speed optimization
Beyond YSlow
✔
✔
![Page 22: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/22.jpg)
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
![Page 23: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/23.jpg)
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
![Page 24: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/24.jpg)
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
![Page 25: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/25.jpg)
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
![Page 26: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/26.jpg)
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
![Page 27: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/27.jpg)
Konstantin Käfer
3. Caching
27
Client ServerDisabled:?
Cache
Client ServerDefault:“Still fresh”
?
Cache
Client ServerAggressive:
Cache
Full response
Partial response
![Page 28: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/28.jpg)
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
![Page 29: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/29.jpg)
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
![Page 30: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/30.jpg)
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
![Page 31: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/31.jpg)
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
![Page 32: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/32.jpg)
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
![Page 33: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/33.jpg)
Konstantin Käfer33
1
2
3
4
Introduction
Tools & Measurement
Speed optimization
Beyond YSlow
✔
✔
✔
![Page 34: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/34.jpg)
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
![Page 35: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/35.jpg)
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
![Page 36: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/36.jpg)
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
![Page 37: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/37.jpg)
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
![Page 38: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/38.jpg)
Konstantin Käfer
10. Persistent HTTP‣ AOL Pagetest has connection view
38
![Page 39: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/39.jpg)
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
![Page 40: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/40.jpg)
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
![Page 42: Front End Performance](https://reader034.fdocuments.us/reader034/viewer/2022052522/554cd0e8b4c905cc488b47d5/html5/thumbnails/42.jpg)
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