Please Don't Touch the Slow Parts V2

Please Don’t Touch the Slow Parts V2 francesco.fullone@ideato.it http://www.ideato.it/ federico.galassi@gmail.com http://federico.galassi.net/ Saturday, May 15, 2010

Saturday, May 15, 2010

fast er Saturday, May 15, 2010

fast er WEB Saturday, May 15, 2010

Faster == Better? Saturday, May 15, 2010

We have to wait Saturday, May 15, 2010

... All the time Saturday, May 15, 2010

“Savings in time feels like simplicity” Saturday, May 15, 2010

“Time is the only commodity that matters” Saturday, May 15, 2010

Psychology of web performance 5-8 SECONDS http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/ Saturday, May 15, 2010

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

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

Faster web is hot Saturday, May 15, 2010

Say web, Say browser Saturday, May 15, 2010

How browsers work Saturday, May 15, 2010

User clicks on a link Saturday, May 15, 2010

Browser resolves domain name DNS UDP www.google.com 72.14.234.104 domain Saturday, May 15, 2010

Browser connects to web server WEB TCP/IP 72.14.234.104 domain connect Saturday, May 15, 2010

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

Browser receives a response with the page WEB HTTP 200 OK domain connect send receive Saturday, May 15, 2010

Browser renders the new page domain connect send receive render Saturday, May 15, 2010

Rendering is complex parse + paint render Saturday, May 15, 2010

Rendering really complex parse + paint + resources render css css img img javascript javascript ﬂash Saturday, May 15, 2010

Each resource is another web request render Saturday, May 15, 2010

Requests are processed in parallel render Saturday, May 15, 2010

Rendering is execution render INPUT EVENT QUEUE mouse moved mouse pressed OS mouse released key pressed key released Saturday, May 15, 2010

Execution in one thread render mouse moved EVENT QUEUE mouse pressed mouse released key pressed key released Javascript Web Execution Browsing Saturday, May 15, 2010

Once upon a time... Static pages Few resources Less javascript Saturday, May 15, 2010

Most time on server domain connect send receive render Saturday, May 15, 2010

Solution is faster serverside domain connect send receive render Saturday, May 15, 2010

Ajax revolution Saturday, May 15, 2010

perfo rmance Ajax revolution Saturday, May 15, 2010

Page updating One time (classic) WEB Saturday, May 15, 2010

Page updating On demand (ajax) WEB ... later ... Saturday, May 15, 2010

Page updating Continuous (polling) WEB Saturday, May 15, 2010

Page updating Push (comet) WEB Saturday, May 15, 2010

Most time on browser domain connect send receive render Saturday, May 15, 2010

Golden rule of faster web 80% of the end user response time is spent on the front-end Saturday, May 15, 2010

Golden rule of faster web Start there. Saturday, May 15, 2010

Why web slow parts? Saturday, May 15, 2010

Easy to understand Saturday, May 15, 2010

Each part has its rules Saturday, May 15, 2010

Which parts are slow? Saturday, May 15, 2010

Network is slow Saturday, May 15, 2010

Less stuff Fewer requests Too many resources Concatenate js/css Css sprites Inline images Saturday, May 15, 2010

Less stuff Cache requests Resources re-downloaded Expires header Revving Files External js/css Remove etags Saturday, May 15, 2010

Smaller stuff Compress responses Resources are too big Content-Encoding Gzip Deﬂate Saturday, May 15, 2010

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

Closer stuff Use a CDN Resources are too far reduce latency Saturday, May 15, 2010

Browser is slow Saturday, May 15, 2010

Scripts block loading html document.write javascript location.href css scripts order img javascript img ﬂash Saturday, May 15, 2010

Put scripts at bottom html css img img ﬂash javascript javascript Saturday, May 15, 2010

Unloaded styles block page rendering html img img ﬂash css Saturday, May 15, 2010

Put styles at top html css img img ﬂash Saturday, May 15, 2010

Indeed ... scripts block everything Saturday, May 15, 2010

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

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

Scripts and styles side effects dom is alive layout is alive Saturday, May 15, 2010

Rules pitfalls Saturday, May 15, 2010

Panta rei Browserscope http://www.browserscope.org/ Saturday, May 15, 2010

Expect the unexpected empty cache no compression Saturday, May 15, 2010

Know your users Track user capabilities Saturday, May 15, 2010

Conﬂicting rules DNS vs Parallel Inline vs External Concatenated vs Reuse Saturday, May 15, 2010

All that glitters is not gold Saturday, May 15, 2010

Everything is a tradeoff Saturday, May 15, 2010

performance brings complexity Saturday, May 15, 2010

know the rules but... Saturday, May 15, 2010

leave complexity to computers Saturday, May 15, 2010

use libraries during development Saturday, May 15, 2010

Use tools at build time Saturday, May 15, 2010

http://abetterbrowser.org/ Saturday, May 15, 2010

Questions? Saturday, May 15, 2010

http://federico.galassi.net	187
http://www.slideshare.net	61
http://www.galassi.net	7
http://www.phpday.it	1

Please Don't Touch the Slow Parts V2

by Federico Galassi on May 15, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 256

Statistics

Please Don’t Touch the Slow Parts V2 — Presentation Transcript