Please, dont touch the slow parts v.3.6 @webtechcon

Please Don’t Touch the Slow Parts V3.6 francesco.fullone@ideato.it http://www.ideato.it/ federico.galassi@gmail.com http://federico.galassi.net/

fa ster

fa ster WEB

Faster == Better?

We have to wait

... All the time

“Savings in time feels like simplicity”

“Time is the only commodity that matters”

Psychology of web performance 5-8 SECONDS http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/

Faster web, more clicks http://www.stevesouders.com/blog/2009/07/27/wikia-fast-pages-retain-users/

Faster web, better SEO http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html

Faster web is hot

Say web, Say browser

How browsers work

User clicks on a link

Browser resolves domain name DNS UDP www.google.com 72.14.234.104 domain

Browser connects to web server WEB TCP/IP 72.14.234.104 domain connect

Browser sends a request for a page WEB HTTP GET /language_tools?hl=en Host: www.google.com domain connect send

Browser receives a response with the page WEB HTTP 200 OK domain connect send receive

Browser renders the new page domain connect send receive render

Rendering is complex render

Rendering is loading resources render css css img img javascript javascript flash

Each resource is another web request render

Requests are processed in parallel render

Rendering is parsing render HTML DOM TREE <html> - document <head> - elem: html <title>Title</title> - elem: head - elem: title </head> - text: Title <body> - elem: body <div>This is a Text</div> - elem: div <div id="hidden">Hidden</div> - text: This is a Text - elem: div - attr: id=hidden - text: Hidden CSS STYLE STRUCT - selector: body rule: body { display: block # default css padding: 0; padding-bottom: 0px # site css } padding-left: 0px # site css padding-right: 0px # site css #hidden { padding-top: 0px # site css display: none; - selector: hidden } rule: display: none # site css

Rendering is layout render DOM TREE reflow - document - elem: html - elem: head - elem: title - text: Title - elem: body - elem: div RENDER TREE - text: This is a Text - elem: div - attr: id=hidden - root - text: Hidden - body - block STYLE STRUCT - inline: This is - inline: a Text - selector: body rule: display: block # default css padding-bottom: 0px # site css padding-left: 0px # site css padding-right: 0px # site css padding-top: 0px # fsite css - selector: hidden rule: display: none # site css

Rendering is painting render RENDER TREE re p a in t This is - root a Text - body - block - inline: This is - inline: a Text

Rendering is execution render INPUT EVENT QUEUE mouse moved mouse pressed mouse released OS key pressed key released

Execution in one thread render mouse moved EVENT QUEUE mouse pressed mouse released key pressed key released Javascript Native Browser Execution Action

Once upon a time... Static pages Few resources Less javascript

Most time on server domain connect send receive render

Solution is faster serverside domain connect send receive render

Ajax revolution

perfo rmance Ajax revolution

Page updating One time (classic) WEB

Page updating On demand (ajax) WEB ... later ...

Page updating Continuous (polling) WEB

Page updating Push (comet) WEB

Most time on browser domain connect send receive render

Golden rule of faster web 80% of the end user response time is spent on the front-end

Golden rules of faster web Start there.

Why web slow parts?

Easy to understand

Each part has its rules

Which parts are slow?

Network is slow

Less stuff Fewer requests Too many resources Concatenate js/css Css sprites Inline images

Less stuff Cache requests Resources re-downloaded Expires header Revving Files External js/css Remove etags

Smaller stuff Compress responses Resources are too big Content-Encoding Gzip Deflate

Smaller stuff Minify responses Resources are too big js, css, html remove formatting remove comments optimize images use tools

Closer stuff Use a CDN Resources are too far reduce latency

Closer stuff Flush document early Server can be slow Chunked encoding

Browser is slow

Scripts block loading html document.write javascript location.href css scripts order img javascript img flash

Put scripts at bottom html css img img flash javascript javascript

Unloaded styles block page rendering html img img flash css

Put styles at top html css img img flash

Indeed... scripts block everything

Load scripts asynchronously var scriptTag = document.createElement("script") scriptTag.src = "http://www.example.org/js/lib.js" document.getElementsByTagName("head")[0] .appendChild(scriptTag)

Yield with timers // doSomethingLong() is too slow, split it doSomething() setTimeout(function() { doSomethingElse() }, 50)

Browser I/O is slow

DOM Browser I/O is slow DoG

DOM is alive DOM access triggers a live query Collections to arrays Cache values to variables

DOM triggers events Events execute JS code Event Delegation

Reflow is expensive Batch DOM changes “offline” Cloned element Document Fragment Display: none

Reflow is expensive Batch CSS changes One class to rule em all Dynamic style property

Inefficient element location CSS are bottom-up! #header li a direction Be specific on the “right”

Inefficient element location Go native in DOM getElementById Xpath querySelectorAll

Rules pitfalls

Panta rei Browserscope http://www.browserscope.org/

Expect the unexpected empty cache no compression

Know your users Track user capabilities

Conflicting rules DNS vs Parallel Inline vs External Concatenated vs Reuse

All that glitters is not gold

Everything is a tradeoff

performance brings complexity

know the rules but...

leave complexity to computers

use libraries during development

Use tools at build time http://code.google.com/speed/tools.html

Use tools at build time Apache mod_pagespeed http://code.google.com/speed/tools.html

Code smart at run time Adaptive Optimization http://www.slideshare.net/ajaxexperience2009/david-wei-and-changhao-jiang-presentation

http://abetterbrowser.org/

Questions?

Please, dont touch the slow parts v.3.6 @webtechcon

by Francesco Fullone

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 6

Statistics

Please, dont touch the slow parts v.3.6 @webtechcon Presentation Transcript