it works on your computer... but does it render fast enough?

IT WORKS ON YOUR COMPUTERBUT DOES IT RENDER FAST ENOUGH?

WHO AM I?Diogo Antunesinfrastructure team @ Booking.comclient side performance improvement/optimization@dicode

OVERVIEWhow browsers render?browserstipstools/services

HOW DO BROWSERS DO THEIR JOB?

ARCHITECTURE

RENDERING

PARSING FLOW

WANT TO GO DEEPER?

http://taligarsiel.com/Projects/howbrowserswork1.htm

BACK TO THE BROWSERS!

CHROMElayout engine - webkit

js engine - v8

FIREFOXlayout engine - gecko

js engine - JägerMonkey (since 4.0)

SAFARIlayout engine - webkit

js engine - Nitro

INTERNET EXPLORERlayout engine - trident (since 4.0)

js engine - Chakra (since 9), JScript before

OPERAlayout engine - presto (since 7.0)

js engine - Carakan (since 10.50)

WHAT ARE WE TALKING ABOUT?Repaint

Reflow

JS rendering time

REPAINTchanges that affect visibility of the element

but not the layout

eg. opacity, background-color

REPAINTit's expensive

so avoid inline css/js

eg. opacity, background-color

REFLOWchanges that affect viewport/elements size

may be as expensive as laying out the whole page again

problem is many things trigger this event

VISUALIZING REFLOWmozilla.org

Gecko  Reflow  Visualization  -­  mozilla.org

VISUALIZING REFLOWgoogle.co.jp

Gecko  Reflow  Visualization  -­  google.co.jp

VISUALIZING REFLOWwikipedia

Gecko  Reflow  Visualization  -­  Wikipedia

REFLOWeven more expensive than a repaint

can be triggered by many actions

so avoid inline css/js

and even a offsetWidth/Height calculation triggers it

JS RENDERING TIMEthe model of the web is synchronous

when a script tag appears, it will parse and execute the script

in FF and Webkit another thread continues to parse the HTML doc

JS RENDERING TIMEit can lock your rendering

it can also produce repaint/reflow

which means it will take longer to execute

LET'S LOOK AT THE WATERFALLS

CHROMEYahoo

Wumocomicstrip

FFYahoo

Wumocomicstrip

IE 9Yahoo

Wumocomicstrip

IE 8Yahoo

Wumocomicstrip

IE 7Yahoo

Wumocomicstrip

BEWAREnumber of concurrent connectionscss limits IE6-9choose wisely when to run your JS

BEWARE PARALLEL CONNECTIONSIE 6-7: 2IE 8-9: 6Chrome, Firefox, Safari: 6You can change this, but you don't want that

CSSBad selectors bad *avoid css expressionsput css in the document head

JSscripts @ bottom

async, defer, lazy load

beware of the DOM

micro optimization - really the last thing you should do

HTML

specify a charset

keep the number of DOM nodes as low as possible

avoid massive depth

IMAGESset width and heightcrop extra space around imagesuse the best file formateg. use png-8, gif to reduce the number of colors in the pallette

HTTPUse gzip where possiblereduce dns lookupsuse cookieless domains for static contentuse a CDNavoid redirects

FRONTEND SPOFany 3rd party widgetcustom font downloadingeven your own JS can cause it...

wumocomicstrip.com

MOBILEMobile IS different!

then again not that different

SAFARI MOBILE (IOS)layout engine - webkit

js engine - Nitro

CHROME MOBILE (ANDROID)layout engine - webkit

js engine - v8

in iOS it uses a UI Webview

FIREFOX MOBILE (ANDROID)layout engine - gecko

js engine - JägerMonkey (since 4.0)

WATTERFALLS AGAIN

YAHOO IPAD2http://mobitest.akamai.com/m/results.cgi?testid=121112_XA_4T

YAHOO GALAXY S, ANDROID 2.2http://mobitest.akamai.com/m/results.cgi?testid=121112_3S_6J

YAHOO IPHONE 4, IOS 5http://mobitest.akamai.com/m/results.cgi?testid=121112_HM_6K

ADDITIONAL ISSUESlatencybattery lifenumber of requestsdata transfer size

TIPSuse data-uri for images wisely

HTML 5 api

W3C Mobile best practices

TOOLS

CHROME TOOLSChrome dev tools

CHROME TOOLSspeed tracer

FF TOOLSFF dev tools

FF TOOLSFirebug

OPERA TOOLSOpera Dragonfly

IE TOOLSAjax Dynatrace

CROSS BROWSERwebpagetest.org

DATA FTW

TRACK YOUR LOAD TIMEScustom

navigation timing api

harstorage.com

TRACK YOUR JS ERRORSwindow.onerror

http://errorception.com/

WEBPERF INSIGHTSgoogle page speed

google page service

yslow

PROFILE AND BENCHMARK YOUR JSjs perf

profilers in the dev tools

TRACK LATENCYhttps://github.com/yahoo/boomerang

WHAT BROWSERS SHOULD I REALLY CARE ABOUT?here comes the silver bullet!!!

it really.... depends

get to know your audience!

STATCOUNTER

W3SCHOOLS

NET APPLICATIONS

W3COUNTER

AKAMAI IO

BUILD YOUR FRONTEND CODE WISELY!some flexibility may be lost

follow the principles

but addapt them to your business customers/needs

THANKS!

Q & A

RESOURCES

http://taligarsiel.com/Projects/howbrowserswork1.htmhttps://developers.google.com/speed/docs/best-practices/rules_introhttp://www.stevesouders.com/http://www.w3.org/TR/mobile-bp/http://developer.yahoo.com/performance/rules.htmlhttp://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/

BOOKS

High Performance Web Sites

Web Performance Daybook Volume 2

Even Faster Web Sites