it works on your computer... but does it render fast enough?
DESCRIPTION
Most of us devs have a nice machine and/or a pretty fancy phone. The sites you develop always look smooth and sweet on your devices but... Do your users have the kind of experience you wish? In this talk I will review, on a high level, how the browser rendering works, how your HTML, CSS and/or js impacts on page rendering/loading and share techniques to minimize the impact. presented @ codebits VI (2012) in LisbonTRANSCRIPT
![Page 1: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/1.jpg)
IT WORKS ON YOUR COMPUTERBUT DOES IT RENDER FAST ENOUGH?
![Page 2: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/2.jpg)
WHO AM I?Diogo Antunesinfrastructure team @ Booking.comclient side performance improvement/optimization@dicode
![Page 3: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/3.jpg)
OVERVIEWhow browsers render?browserstipstools/services
![Page 4: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/4.jpg)
HOW DO BROWSERS DO THEIR JOB?
![Page 5: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/5.jpg)
ARCHITECTURE
![Page 6: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/6.jpg)
RENDERING
![Page 7: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/7.jpg)
PARSING FLOW
![Page 8: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/8.jpg)
WANT TO GO DEEPER?
http://taligarsiel.com/Projects/howbrowserswork1.htm
![Page 9: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/9.jpg)
BACK TO THE BROWSERS!
![Page 10: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/10.jpg)
CHROMElayout engine - webkit
js engine - v8
![Page 11: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/11.jpg)
FIREFOXlayout engine - gecko
js engine - JägerMonkey (since 4.0)
![Page 12: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/12.jpg)
SAFARIlayout engine - webkit
js engine - Nitro
![Page 13: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/13.jpg)
INTERNET EXPLORERlayout engine - trident (since 4.0)
js engine - Chakra (since 9), JScript before
![Page 14: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/14.jpg)
OPERAlayout engine - presto (since 7.0)
js engine - Carakan (since 10.50)
![Page 15: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/15.jpg)
WHAT ARE WE TALKING ABOUT?Repaint
Reflow
JS rendering time
![Page 16: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/16.jpg)
REPAINTchanges that affect visibility of the element
but not the layout
eg. opacity, background-color
![Page 17: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/17.jpg)
REPAINTit's expensive
so avoid inline css/js
eg. opacity, background-color
![Page 18: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/18.jpg)
REFLOWchanges that affect viewport/elements size
may be as expensive as laying out the whole page again
problem is many things trigger this event
![Page 19: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/19.jpg)
VISUALIZING REFLOWmozilla.org
Gecko Reflow Visualization - mozilla.org
![Page 20: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/20.jpg)
VISUALIZING REFLOWgoogle.co.jp
Gecko Reflow Visualization - google.co.jp
![Page 21: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/21.jpg)
VISUALIZING REFLOWwikipedia
Gecko Reflow Visualization - Wikipedia
![Page 22: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/22.jpg)
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
![Page 23: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/23.jpg)
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
![Page 24: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/24.jpg)
JS RENDERING TIMEit can lock your rendering
it can also produce repaint/reflow
which means it will take longer to execute
![Page 25: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/25.jpg)
LET'S LOOK AT THE WATERFALLS
![Page 26: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/26.jpg)
![Page 27: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/27.jpg)
CHROMEYahoo
Wumocomicstrip
![Page 28: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/28.jpg)
FFYahoo
Wumocomicstrip
![Page 29: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/29.jpg)
IE 9Yahoo
Wumocomicstrip
![Page 30: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/30.jpg)
IE 8Yahoo
Wumocomicstrip
![Page 31: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/31.jpg)
IE 7Yahoo
Wumocomicstrip
![Page 32: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/32.jpg)
BEWAREnumber of concurrent connectionscss limits IE6-9choose wisely when to run your JS
![Page 33: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/33.jpg)
BEWARE PARALLEL CONNECTIONSIE 6-7: 2IE 8-9: 6Chrome, Firefox, Safari: 6You can change this, but you don't want that
![Page 34: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/34.jpg)
![Page 35: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/35.jpg)
CSSBad selectors bad *avoid css expressionsput css in the document head
![Page 36: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/36.jpg)
JSscripts @ bottom
async, defer, lazy load
beware of the DOM
micro optimization - really the last thing you should do
![Page 37: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/37.jpg)
HTML
![Page 38: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/38.jpg)
specify a charset
keep the number of DOM nodes as low as possible
avoid massive depth
![Page 39: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/39.jpg)
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
![Page 40: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/40.jpg)
HTTPUse gzip where possiblereduce dns lookupsuse cookieless domains for static contentuse a CDNavoid redirects
![Page 41: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/41.jpg)
FRONTEND SPOFany 3rd party widgetcustom font downloadingeven your own JS can cause it...
wumocomicstrip.com
![Page 42: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/42.jpg)
MOBILEMobile IS different!
then again not that different
![Page 43: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/43.jpg)
SAFARI MOBILE (IOS)layout engine - webkit
js engine - Nitro
![Page 44: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/44.jpg)
CHROME MOBILE (ANDROID)layout engine - webkit
js engine - v8
in iOS it uses a UI Webview
![Page 45: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/45.jpg)
FIREFOX MOBILE (ANDROID)layout engine - gecko
js engine - JägerMonkey (since 4.0)
![Page 46: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/46.jpg)
WATTERFALLS AGAIN
![Page 47: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/47.jpg)
YAHOO IPAD2http://mobitest.akamai.com/m/results.cgi?testid=121112_XA_4T
![Page 48: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/48.jpg)
YAHOO GALAXY S, ANDROID 2.2http://mobitest.akamai.com/m/results.cgi?testid=121112_3S_6J
![Page 49: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/49.jpg)
YAHOO IPHONE 4, IOS 5http://mobitest.akamai.com/m/results.cgi?testid=121112_HM_6K
![Page 50: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/50.jpg)
ADDITIONAL ISSUESlatencybattery lifenumber of requestsdata transfer size
![Page 51: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/51.jpg)
TIPSuse data-uri for images wisely
HTML 5 api
W3C Mobile best practices
![Page 52: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/52.jpg)
TOOLS
![Page 53: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/53.jpg)
CHROME TOOLSChrome dev tools
![Page 54: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/54.jpg)
CHROME TOOLSspeed tracer
![Page 55: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/55.jpg)
![Page 56: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/56.jpg)
![Page 57: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/57.jpg)
FF TOOLSFF dev tools
![Page 58: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/58.jpg)
FF TOOLSFirebug
![Page 59: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/59.jpg)
OPERA TOOLSOpera Dragonfly
![Page 60: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/60.jpg)
IE TOOLSAjax Dynatrace
![Page 61: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/61.jpg)
CROSS BROWSERwebpagetest.org
![Page 62: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/62.jpg)
DATA FTW
![Page 63: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/63.jpg)
TRACK YOUR LOAD TIMEScustom
navigation timing api
harstorage.com
![Page 64: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/64.jpg)
TRACK YOUR JS ERRORSwindow.onerror
http://errorception.com/
![Page 65: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/65.jpg)
WEBPERF INSIGHTSgoogle page speed
google page service
yslow
![Page 66: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/66.jpg)
PROFILE AND BENCHMARK YOUR JSjs perf
profilers in the dev tools
![Page 67: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/67.jpg)
TRACK LATENCYhttps://github.com/yahoo/boomerang
![Page 68: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/68.jpg)
WHAT BROWSERS SHOULD I REALLY CARE ABOUT?here comes the silver bullet!!!
it really.... depends
get to know your audience!
![Page 69: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/69.jpg)
STATCOUNTER
![Page 70: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/70.jpg)
W3SCHOOLS
![Page 71: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/71.jpg)
NET APPLICATIONS
![Page 72: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/72.jpg)
W3COUNTER
![Page 73: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/73.jpg)
AKAMAI IO
![Page 74: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/74.jpg)
BUILD YOUR FRONTEND CODE WISELY!some flexibility may be lost
follow the principles
but addapt them to your business customers/needs
![Page 75: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/75.jpg)
THANKS!
Q & A
![Page 76: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/76.jpg)
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/
![Page 77: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/77.jpg)
BOOKS
High Performance Web Sites
Web Performance Daybook Volume 2
Even Faster Web Sites
![Page 78: It works on your computer... but does it render fast enough?](https://reader033.vdocuments.site/reader033/viewer/2022052823/55561d1bd8b42ae0238b51df/html5/thumbnails/78.jpg)