Download to read offline
Uploaded byFunctional Imperative
Own Your Front-end Performance: Tools, Not Rules
The document discusses front-end performance optimization, emphasizing speed in user interactions and page loading times. It highlights the importance of measuring response times, provides examples of performance metrics, and outlines the critical rendering path in web development, including DOM, CSSOM, render tree, layout, and painting. Additionally, it touches on the use of technologies like JavaScript for animations and the impact of load speeds on user engagement and revenue.
More Related Content
![[TestWarez 2017] Continuous Delivery and beyond](https://cdn.slidesharecdn.com/ss_thumbnails/krzyanowskimichacontinuousdeliveryandbeyond-180125203429-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Own Your Front-end Performance: Tools, Not Rules
Own Your Front-end Performance: Tools, Not Rules
- 1. @naserca @func_i Own Your Front-end Performance Tools, NotRules Alex Naser @naserca Laith Azer @func_i devhub - devmonth April 14, 2016
- 2.
- 3.
- 4. @naserca @func_i fast as possibleresponse times measure via benchmark
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13. @naserca @func_i fast load, smoothanimations measure
- 14. @naserca @func_i fast load, smoothanimations measure how fast? at what speed? on what device(s)? how fast? when? images? text? how?
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22. @naserca @func_i “Don’t Be Slow” “Don’tFeel Slow”
- 23.
- 24. @naserca @func_i Title slide Subtitle Day Month,Year What are they doing?
- 25. @naserca @func_i waiting for pageto load tap nav icon watch animation of nav bar looking for link
- 26. @naserca @func_i waiting for pageto load LOAD
- 27.
- 28. @naserca @func_i watch animation ofnav bar ANIMATION
- 29.
- 30.
- 31.
- 32.
- 33. @naserca @func_i ANIMATION scroll or drag <16ms (60fps)
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 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
- 42.
- 43.
- 44. @naserca @func_i 1. html 2. criticalrendering path 3. website
- 45. @naserca @func_i 1. DOM 2. CSSOM 3.render tree 4. layout (reflow) 5. paint
- 46.
- 47. @naserca @func_i <html> <head> <meta name="viewport" content="width=device-width"> <linkhref="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.
- 49.
- 50. @naserca @func_i body { font-size:16px } p { font-weight: bold } span { color: red } p span { display: none } img { float: right }
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58. @naserca @func_i <html> <head> <meta name="viewport" content="width=device-width"> <title>CriticalPath</title> </head> <body> <div style="width: 50%"> <div style="width: 50%">Hello world!</div> </div> </body> </html>
- 59.
- 60. @naserca @func_i style changes fetching oflayout/scroll adding/removing els
- 61.
- 62.
- 63.
- 64.
- 65.
- 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
- 68.
- 69.
- 70.
- 71.
- 72. @naserca @func_i ANIMATION scroll or drag <16ms (60fps)
- 73.
- 74. @naserca @func_i 1000/60 = 16.67msper frame
- 75.
- 76. @naserca @func_i function draw() { //Drawing code goes here } setInterval(draw, 1000/60);
- 77.
- 78.
- 79.
- 80.
- 81. @naserca @func_i function draw() { requestAnimationFrame(draw); //Drawing code goes here } draw(); function draw() { // Drawing code goes here } setInterval(draw, 1000/60);
- 82.