Own Your Front-end Performance: Tools, Not Rules
•
0 likes•532 views
Laith Azer and Alex Naser recently presented to a healthy crowd at Devhub's Devmonth about front-end performance. In our day-to-day work as full-stack devs here at FI, we kept bumping up against front-end performance bottlenecks we couldn't tackle using easy, one-liner, talking point, black and white Rules™. We realized improving front-end performance requires a much deeper understanding of how browsers really work—how we go from an HTML response to pixels on a screen. Hopefully this provides you with some tools you can use to start owning your front-end performance.
Recommended
Recommended
More Related Content
What's hot
What's hot (18)
Viewers also liked
Viewers also liked (20)
Similar to Own Your Front-end Performance: Tools, Not Rules
Similar to Own Your Front-end Performance: Tools, Not Rules (20)
Recently uploaded
Recently uploaded (20)
Own Your Front-end Performance: Tools, Not Rules
- 1. @naserca @func_i Own Your Front-end Performance Tools, Not Rules Alex Naser @naserca Laith Azer @func_i devhub - devmonth April 14, 2016
- 4. @naserca @func_i fast as possible response times measure via benchmark
- 12. @naserca @func_i
- 13. @naserca @func_i fast load, smooth animations measure
- 14. @naserca @func_i fast load, smooth animations measure how fast? at what speed? on what device(s)? how fast? when? images? text? how?
- 18. @naserca @func_i concat’d CSS files vs separate CSS files
- 22. @naserca @func_i “Don’t Be Slow” “Don’t Feel Slow”
- 23. @naserca @func_i Title slide Subtitle Day Month, Year users
- 24. @naserca @func_i Title slide Subtitle Day Month, Year What are they doing?
- 25. @naserca @func_i waiting for page to load tap nav icon watch animation of nav bar looking for link
- 26. @naserca @func_i waiting for page to load LOAD
- 28. @naserca @func_i watch animation of nav bar ANIMATION
- 32. @naserca @func_i RESPOND tap or click < 100ms
- 33. @naserca @func_i ANIMATION scroll or drag < 16ms (60fps)
- 41. @naserca @func_i Google: 2% slower = 2% less searching per user Yahoo: 400 milliseconds faster = 9% more traffic Amazon: 100 milliseconds faster = 1% more revenue
- 43. @naserca @func_i 1. html 2. ? 3. website
- 44. @naserca @func_i 1. html 2. critical rendering path 3. website
- 45. @naserca @func_i 1. DOM 2. CSSOM 3. render tree 4. layout (reflow) 5. paint
- 46. @naserca @func_i 1. DOM Document Object Model
- 47. @naserca @func_i <html> <head> <meta name="viewport" content="width=device-width"> <link href="style.css" rel="stylesheet"> <title>Critical Path</title> </head> <body> <p>Hello <span>web performance</span> students!</p> <div><img src="awesome-photo.jpg"></div> </body> </html>
- 48. @naserca @func_i
- 49. @naserca @func_i 2. CSSOM CSS Object Model
- 50. @naserca @func_i body { font-size: 16px } p { font-weight: bold } span { color: red } p span { display: none } img { float: right }
- 51. @naserca @func_i
- 55. @naserca @func_i
- 58. @naserca @func_i <html> <head> <meta name="viewport" content="width=device-width"> <title>Critical Path</title> </head> <body> <div style="width: 50%"> <div style="width: 50%">Hello world!</div> </div> </body> </html>
- 59. @naserca @func_i
- 60. @naserca @func_i style changes fetching of layout/scroll adding/removing els
- 63. @naserca @func_i <html> z-index’d & positioned opacity < 1 overflow
- 65. @naserca @func_i
- 66. @naserca @func_i void draw(SkCanvas* canvas) { canvas->drawColor(SK_ColorWHITE); SkPaint paint; paint.setStyle(SkPaint::kFill_Style); paint.setAntiAlias(true); paint.setStrokeWidth(4); paint.setColor(0xffFE938C); SkRect rect = SkRect::MakeXYWH(10, 10, 100, 160); canvas->drawRect(rect, paint); SkRRect oval; oval.setOval(rect); oval.offset(40, 80); paint.setColor(0xffE6B89C); canvas->drawRRect(oval, paint); paint.setColor(0xff9CAFB7); canvas->drawCircle(180, 50, 25, paint); rect.offset(80, 50); paint.setColor(0xff4281A4); paint.setStyle(SkPaint::kStroke_Style); canvas->drawRoundRect(rect, 10, 10, paint); }
- 67. @naserca @func_i 1. DOM 2. CSSOM 3. render tree 4. layout (reflow) 5. paint
- 72. @naserca @func_i ANIMATION scroll or drag < 16ms (60fps)
- 74. @naserca @func_i 1000/60 = 16.67ms per frame
- 76. @naserca @func_i function draw() { // Drawing code goes here } setInterval(draw, 1000/60);
- 81. @naserca @func_i function draw() { requestAnimationFrame(draw); // Drawing code goes here } draw(); function draw() { // Drawing code goes here } setInterval(draw, 1000/60);