Web Performance Notes - Google Groups

h a n g e Vi e

w

N y

Web Performance Notes

k

Lecture #13

lic .d o

m

w

o

Server Side Web Languages

.c

to

bu

c u -tr a c k

C

m

CSE 135 o

.d o

w

w

w

w

w

C

lic

k

to

bu

y

N

O W

!

XC

er

O W

F-

w

PD

h a n g e Vi e

!

XC

er

PD

F-

c u -tr a c k

.c

h a n g e Vi e

w

N y

Core Ideas • To a user time passed matters not bytes sent • There is a difference between perceived time and actual time • Page paint time matter • Amount of screen refresh matters – Frames, Emphasis on reflows in HTML/CSS parse • How the screen refreshes matters – All at once vs. incrementally • Application pacing matters – Preloaders, travel search, etc.

k

Lecture #13

lic .d o

m

w

o

Server Side Web Languages

.c

to

bu

c u -tr a c k

C

m

CSE 135 o

.d o

w

w

w

w

w

C

lic

k

to

bu

y

N

O W

!

XC

er

O W

F-

w

PD

h a n g e Vi e

!

XC

er

PD

F-

c u -tr a c k

.c

h a n g e Vi e

w

N y

Core Ideas • To some Web owners bytes sent may matter quite a bit as well because of cost. • Obviously cost is bandwidth – How much does 50K cost…nothing – How much does 50K * thousands of customers cost maybe something?

• Note the design focus of e-commerce sites, $ and bytes in content not in navigation • Heavy pages don’t just cause bandwidth they may cost hardware in terms of scalability, servers can’t be done with a connection as quick thus you will need more of them more quickly

k

Lecture #13

lic .d o

m

w

o

Server Side Web Languages

.c

to

bu

c u -tr a c k

C

m

CSE 135 o

.d o

w

w

w

w

w

C

lic

k

to

bu

y

N

O W

!

XC

er

O W

F-

w

PD

h a n g e Vi e

!

XC

er

PD

F-

c u -tr a c k

.c

h a n g e Vi e

w

N y

Speed is not just a simple case of bytes

k

Lecture #13

lic .d o

m

w

o

Server Side Web Languages

.c

to

bu

c u -tr a c k

C

m

CSE 135 o

.d o

w

w

w

w

w

C

lic

k

to

bu

y

N

O W

!

XC

er

O W

F-

w

PD

h a n g e Vi e

!

XC

er

PD

F-

c u -tr a c k

.c

h a n g e Vi e

w

N y

Core Idea – Golden Rule

Golden Rule of Optimization “Less /> Next image

k

Lecture #13

lic .d o

m

w

o

Server Side Web Languages

.c

to

bu

c u -tr a c k

C

m

CSE 135 o

.d o

w

w

w

w

w

C

lic

k

to

bu

y

N

O W

!

XC

er

O W

F-

w

PD

h a n g e Vi e

!

XC

er

PD

F-

c u -tr a c k

.c

h a n g e Vi e

w

N y

Request Reduction in Action

k

Lecture #13

lic .d o

m

w

o

Server Side Web Languages

.c

to

bu

c u -tr a c k

C

m

CSE 135 o

.d o

w

w

w

w

w

C

lic

k

to

bu

y

N

O W

!

XC

er

O W

F-

w

PD

h a n g e Vi e

!

XC

er

PD

F-

c u -tr a c k

.c

h a n g e Vi e

w

N y

All About End Users? • -Bytes vs. Time • -Read, Decide, Click, Wait, Repeat • -Download ahead of time – Flash preloaders, cache tricks, JS preload – Mozilla prefetch • http://www.mozilla.org/projects/netlib/ Link_Prefetching_FAQ.html

– Precache example • http://ajaxref.com/ch8/longscroll.html

– Don’t forget Browser Bulk – IE vs Opera vs Mozilla vs Safari – they are different pieces of software with different qualities of execution

k

Lecture #13

lic .d o

m

w

o

Server Side Web Languages

.c

to

bu

c u -tr a c k

C

m

CSE 135 o

.d o

w

w

w

w

w

C

lic

k

to

bu

y

N

O W

!

XC

er

O W

F-

w

PD

h a n g e Vi e

!

XC

er

PD

F-

c u -tr a c k

.c

h a n g e Vi e

w

N y

How do you know you are doing well? • Measure server time, network time, and paint time – Server time is easy, network time is harder, and paint time requires a JavaScript injection to then start and stop a timer – http://ajaxref.com/ch6/connectionspeed.html – Interesting to note that such features are coming directly to browsers now (http://blogs.msdn.com/b/ie/archive/ 2010/06/28/measuring-web-page-performance.aspx) and the W3C is creating performance working group (http:// www.w3.org/2010/06/webperf.html)

k

Lecture #13

lic .d o

m

w

o

Server Side Web Languages

.c

to

bu

c u -tr a c k

C

m

CSE 135 o

.d o

w

w

w

w

w

C

lic

k

to

bu

y

N

O W

!

XC

er

O W

F-

w

PD

h a n g e Vi e

!

XC

er

PD

F-

c u -tr a c k

.c