Embed Size (px)
DESCRIPTION
Tweaking Drupal to squeeze out the last drop is a good idea, but the biggest part of a website's loading time is spent on retrieving CSS, JavaScript and images. To get a truly zippy website, it is therefore vital to drastically reduce the time spent here. In this session, you’ll get to know why sites are slow and learn techniques to identify and resolve bottlenecks: From simple Apache tweaks to rethinking your theme so that it can be loaded faster there's something for everyone.
Citation preview
Part II: FrontEnd
Performance
Konstantin
Käfer
Konstantin Käfer
What’s Performance?
Perception Measurement
Loading
Running
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äfer6
1
2
3
4
Introduction
Tools & Measurement
Speed optimization
Beyond YSlow
✔
Konstantin Käfer
Measure to prove optimization success.
7
Konstantin Käfer
Overall load time?
8
Konstantin Käfer
Page size?
9
Konstantin Käfer
Time until DOM is loaded?
10
Konstantin Käfer
Time until page is rendered?
11
Konstantin Käfer
Time until pageis functional?
12
Konstantin Käfer
Firebug’s Net panel
13
Konstantin Käfer
YSlow‣ Rates a webpage based on 13 criteria
‣ Determines overall load time
‣ Provides optimization suggestions
‣ Graphs, Numbers & Figures
14
Konstantin Käfer
YSlow is not everything.
15
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
16
Konstantin Käfer
Waterfall diagrams
Start Connect First byte Last byte17
Konstantin Käfer18
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 parallel19
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
20
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);
21
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
22
Konstantin Käfer
Round Trip Time‣ HTTP is usually done over TCP/IP
‣ Transmission Control Protocol
‣ Stateful: Three Way Handshakes
‣ Round trip time has high effect
23
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
‣ Change filenames/URLs when updating
24
Konstantin Käfer
4. GZip‣ Compress text content (don’t use for images!)
‣ Vastly reduces page size
‣ NowPublic.com: 700 KB ➔ 300 KB
‣ Compress scripts and styles as well
25
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
26
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
27
Konstantin Käfer
7. Minify CSS and JS‣ Remove comments and whitespace
‣ Still savings, even with GZip
‣ Drupal’s aggregator or sf_cache.module
28
Konstantin Käfer29
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/
30
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 531
Konstantin Käfer
9. Reduce image weight‣ OptiPNG, PNGCrush, ...
– Removes invisible content
– Lossless recompression
‣ JPEGtran/ImageMagick
– Remove color profiles, meta data, ...
– Lossless JPEG operations
‣ http://smushit.com
32
Konstantin Käfer
10. Persistent HTTP‣ HTTP supports persistent connections
33
client clientserver server
open
time
multiple connections
close
persistent connection
open
closeopen
close
close
open
Konstantin Käfer
10. Persistent HTTP‣ AOL Pagetest has connection view
34
Konstantin Käfer
10. Persistent HTTP
‣ Most web browsers don’t support it35
client clientserver serveropen open
close
close
time
no pipelining pipelining
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
– Useful on image-heavy sites
36
Konstantin Käfer
12. Microoptimization‣ “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/)
37
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
39
