It works on your computer... it render fast enough?

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 Lisbon

Transcript

1. IT WORKS ON YOUR COMPUTER BUT DOES IT RENDER FAST ENOUGH?
2. WHO AM I? Diogo Antunes infrastructure team @ Booking.com client side performance improvement/optimization @dicode
3. OVERVIEW how browsers render? browsers tips tools/services
4. HOW DO BROWSERS DO THEIR JOB?
5. ARCHITECTURE
6. RENDERING
7. PARSING FLOW
8. WANT TO GO DEEPER? http://taligarsiel.com/Projects/howbrowserswork1.htm
9. BACK TO THE BROWSERS!
10. CHROME layout engine - webkit js engine - v8
11. FIREFOX layout engine - gecko js engine - JägerMonkey (since 4.0)
12. SAFARI layout engine - webkit js engine - Nitro
13. INTERNET EXPLORER layout engine - trident (since 4.0) js engine - Chakra (since 9), JScript before
14. OPERA layout engine - presto (since 7.0) js engine - Carakan (since 10.50)
15. WHAT ARE WE TALKING ABOUT? Repaint Reflow JS rendering time
16. REPAINT changes that affect visibility of the element but not the layout eg. opacity, background-color
17. REPAINT it's expensive so avoid inline css/js eg. opacity, background-color
18. REFLOW changes that affect viewport/elements size may be as expensive as laying out the whole page again problem is many things trigger this event
19. VISUALIZING REFLOW mozilla.org Gecko  Reflow  Visualization  -­  mozilla.org
20. VISUALIZING REFLOW google.co.jp Gecko  Reflow  Visualization  -­  google.co.jp
21. VISUALIZING REFLOW wikipedia Gecko  Reflow  Visualization  -­  Wikipedia
22. REFLOW even more expensive than a repaint can be triggered by many actions so avoid inline css/js and even a offsetWidth/Height calculation triggers it
23. JS RENDERING TIME the 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
24. JS RENDERING TIME it can lock your rendering it can also produce repaint/reflow which means it will take longer to execute
25. LET'S LOOK AT THE WATERFALLS
27. CHROME Yahoo Wumocomicstrip
28. FF Yahoo Wumocomicstrip
29. IE 9 Yahoo Wumocomicstrip
30. IE 8 Yahoo Wumocomicstrip
31. IE 7 Yahoo Wumocomicstrip
32. BEWARE number of concurrent connections css limits IE6-9 choose wisely when to run your JS
33. BEWARE PARALLEL CONNECTIONS IE 6-7: 2 IE 8-9: 6 Chrome, Firefox, Safari: 6 You can change this, but you don't want that
35. CSS Bad selectors bad * avoid css expressions put css in the document head
36. JS scripts @ bottom async, defer, lazy load beware of the DOM micro optimization - really the last thing you should do
37. HTML
38. specify a charset keep the number of DOM nodes as low as possible avoid massive depth
39. IMAGES set width and height crop extra space around images use the best file format eg. use png-8, gif to reduce the number of colors in the pallette
40. HTTP Use gzip where possible reduce dns lookups use cookieless domains for static content use a CDN avoid redirects
41. FRONTEND SPOF any 3rd party widget custom font downloading even your own JS can cause it... wumocomicstrip.com
42. MOBILE Mobile IS different! then again not that different
43. SAFARI MOBILE (IOS) layout engine - webkit js engine - Nitro
44. CHROME MOBILE (ANDROID) layout engine - webkit js engine - v8 in iOS it uses a UI Webview
45. FIREFOX MOBILE (ANDROID) layout engine - gecko js engine - JägerMonkey (since 4.0)
46. WATTERFALLS AGAIN
47. YAHOO IPAD2 http://mobitest.akamai.com/m/results.cgi?testid=121112_XA_4T
48. YAHOO GALAXY S, ANDROID 2.2 http://mobitest.akamai.com/m/results.cgi?testid=121112_3S_6J
49. YAHOO IPHONE 4, IOS 5 http://mobitest.akamai.com/m/results.cgi?testid=121112_HM_6K
50. ADDITIONAL ISSUES latency battery life number of requests data transfer size
51. TIPS use data-uri for images wisely HTML 5 api W3C Mobile best practices
52. TOOLS
53. CHROME TOOLS Chrome dev tools
54. CHROME TOOLS speed tracer
57. FF TOOLS FF dev tools
58. FF TOOLS Firebug
59. OPERA TOOLS Opera Dragonfly
60. IE TOOLS Ajax Dynatrace
61. CROSS BROWSER webpagetest.org
62. DATA FTW
63. TRACK YOUR LOAD TIMES custom navigation timing api harstorage.com
64. TRACK YOUR JS ERRORS window.onerror http://errorception.com/
65. WEBPERF INSIGHTS google page speed google page service yslow
66. PROFILE AND BENCHMARK YOUR JS js perf profilers in the dev tools
67. TRACK LATENCY https://github.com/yahoo/boomerang
68. WHAT BROWSERS SHOULD I REALLY CARE ABOUT? here comes the silver bullet!!! it really.... depends get to know your audience!
69. STATCOUNTER
70. W3SCHOOLS
71. NET APPLICATIONS
72. W3COUNTER
73. AKAMAI IO
74. BUILD YOUR FRONTEND CODE WISELY! some flexibility may be lost follow the principles but addapt them to your business customers/needs