front end performance

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

Konstantin Käfermail@kkaefer.com

41

Thanks! Questions?

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