Velocity 2010

VELOCITY 2010fast by default

segunda-feira, 25 de outubro de 2010

HIGH PERFORMANCE WEB SITES


High YSlow Average

Home ......................................... A Dashboard ......................................... B

Permalink/Your Memes ......................................... B


WEB PAGE TEST


IMPROVEMENTS

LOAD ORDER(SPLIT) AND

RENDER


LOAD ORDER(SPLIT)


SPLIT SCRIPTS EFFICIENTLY



Use cross page cache



Use cross page cache

Use Data to Split


Authenticated vs Public

MEME, from Yahoo!

1000/1 U.P.P.A(segundo Pedro Valente)


Permalink (530k/886k)

NonAuthenticated

minipost

more comments

user card

ckeditor

tooltip

user menu

repost

follow

live briefing

Authenticated


Authenticated vs Public

Split by:

SCRIPTS FOR AUTHENTICATED USERSSCRIPTS FOR PUBLIC USERS


Split by Necessity of Execution

Load Order Improvement



Yahoo ......................................... 16%Facebook ............................................ 9%



Yahoo ......................................... 16%Facebook ............................................ 9%

Meme ....................................... ˜15%


Spliting Scripts

SCRIPTS FOR AUTHENTICATED USERS(what have to be executed)

SCRIPTS FOR PUBLIC USERS(what have to be executed)


Spliting Scripts

Your Memes ............ 358k (-15%) = 53.7k

Dashboard ................. 710k (-15%) = 106k


Spliting Scripts

Tool: Doloto (MS Research)http://research.microsoft.com/en-us/projects/doloto/


http://research.microsoft.com/en-us/projects/doloto/

http://research.microsoft.com/en-us/projects/doloto/

Spliting Scripts(Techniques)

XHR EvalXHR InjectionsScript in Iframe

Script DOM ElementScript Defer


RENDERING


HTML

CSS

INLINE CSS

INLINE JS

DONE!

BLOCK RENDERING

BLOCK RENDERING

BLOCK RENDERING &

DOWNLOADS


AVOID INLINE

Block downloads and rendering


PERCEPTION OF PERFORMANCE


PERCEPTION OF PERFORMANCE

Feedbackand

Responsiveness


OLD TECHNIQUES

Progressive Bar

Loaders


NOT SO OLD TECHNIQUES..

Progressive Enhancement


NOT SO OLD TECHNIQUES..

Chunked Transfer Encoding


Chunked Tranfer Encoding

Is a mechanism of HTTP 1.1

Split response data and transmitting each chuck with its size


<html> <head>....</head> <body> <div id=”hot_news”> [...] </div> <div id=”old_news”> [...] </div> <div id=”other_options”> [...] </div> </body></html>

1

2

3

4


Better used when the site structure is in sync with this strategy


chunckview

Tool


Facebook Big Pipechunked tranfer encoding + pagelets


RECOMMENDEDPRESENTATIONS


Stupid Web Caching (and Other Intermediary) Tricks

Mark Nottingham - @mnot - Yahoo


The Top 5 Mistakes of Massive CSS

Nicole Sullivan - @stubbornella - Facebook


http://twitter.com/stubbornella

http://twitter.com/stubbornella

TCP and The Lower Bound of Web PerformanceCreating Cultural Change

John Rauser - @jrauser - Amazon


JSMeter: Characterizing Real-World Behavior of JavaScript Programs

Ben Livshits - Microsoft ResearchBen Zorn - Microsoft Research


http://en.oreilly.com/velocity2010/public/schedule/speaker/24546




CONCLUSIONS

Focused on performanceMore frontend presentations

Backend has domain specific problems


Velocity 2010

Technology

Transcript of Velocity 2010