Educate 2017: Quick 'n Lazy: How we keep things speedy while staying out of your way
Download as PPTX, PDF2 likes308 views
The document discusses performance optimization strategies in software architecture, emphasizing the importance of efficient resource usage across CPU, memory, and bandwidth. It covers various specific tactics for improving performance, such as lazy loading, bundle optimization, and memory leak prevention. The presenters encourage a focus on impactful fixes while promoting the benefits of maintaining high performance for user engagement.
![Dehydrate / rehydrate
Only create components and DOM
elements for questions that are
visible on screen.
Dehydrate (remove everything
except for a minimal data
representation) when not visible.
Much better performance for pages
with lots of invisible questions.
Image rights: Amblin Entertainment (Production) Robert Zemeckis (Director).
(1989) Back to the Future Part II [Motion picture] USA: Universal Pictures](https://image.slidesharecdn.com/14-170519173103/85/Educate-2017-Quick-n-Lazy-How-we-keep-things-speedy-while-staying-out-of-your-way-53-320.jpg)
Educate 2017: Quick 'n Lazy: How we keep things speedy while staying out of your way
- 1. 2:20 – 3:00pm Quick ‘n‘ Lazy: How we keep things speedy and stay out of your way Mark & Eoghan
- 2. Mark Lynch CTO & Co-Founder mark.lynch@learnosity.com Eoghan McIlwaine Software Engineer eoghan.mcilwaine@learnosity.com Presenters
- 4. Using resources (CPU, memory, bandwidth) as efficiently as possible - at all levels of our architecture. ● Why care about performance? ● Some specifics ● What’s next? ● So what can you do? ● Questions Performance Deep Dive
- 5. ● Keep engagement high ● Poor performance causes real pain: ○ Distraction for users ○ Battery drain ● We need to work on all hardware ● We’re guests on your page Why care about performance?
- 7. https://twitter.com/igrigorik/status/300226402496704512 Why care about performance? http://adage.com/article/digital/google-amp-launch- looms-search-engine-scores-follow/302599/
- 8. But computers are powerful now, right?
- 9. But battery is limited...
- 11. Numbers for context 24M Users in last 12 months 2M Tablets1M Phones 9M Chromebooks
- 12. ● Rendering speed ● Jank ● Download size ● Memory usage ● CPU usage ● ● Bandwidth ● Reliability ● Global latency ● Response Time ● DB query time ● Capacity Backend Where performance happens Network Frontend
- 13. ● Fastest part of every page ● Speed through laziness ● Keep it simple Summarizing our attitude to performance... Powerful Flexible Extensible Simple Product attributes
- 14. Easy Fixes ● Remove unused CSS & JS ● Know what’s on your page ● CDN’s - Cloudfront ● HTTP2 ● Nginx/Apache GZIP ● Long Expires Headers ● CSS & JS Versioning ● Have enough servers! ● Slow Query Logs ● Static Assets from S3/CDN ● Read only db’s ● Rendering speed ● Jank ● Download size ● Memory usage ● CPU usage ● ● Bandwidth ● Reliability ● Global latency ● Response Time ● DB query time ● Capacity Backend Network Frontend
- 15. High Impact Low Impact High EffortLow Effort Do these first! Then do these1 Prioritise Fixes
- 16. Focus on the important things! Image rights: alessio mazzocco (https://tinyurl.com/l73gv5c)
- 17. Just a few specific things we’ve looked at recently ● Defer ○ Be asynchronous ○ Assess lazy loading ● Shrink ○ Behind the scenes ○ Bundle optimization ○ Font subset ● Curly ones ○ Memory leaks ○ Event delegation ○ Loader animation Some specifics
- 18. ● Be more asynchronous ● Queue longer tasks Do Less
- 20. Confirm Saved Do Less (aka Defer) Questions API Store Score Save Request Do Scoring Store Response Queue For Scoring
- 21. Do Less (extended) Questions API Store Score Save Request Do Scoring Store Response Queue For Scoring Queue For Sub Scoring Do Sub Scores Confirm Saved
- 22. Just a few specific things we’ve looked at recently ● Defer ○ Be asynchronous ○ Assess lazy loading ● Shrink ○ Behind the scenes ○ Bundle optimization ○ Font subset ● Curly ones ○ Memory leaks ○ Event delegation ○ Loader animation Some specifics
- 23. Our Assess API lets students take tests by moving through a series of pages of questions. Some tests can have lots of pages. Lazy-loading items Image rights: https://pixabay.com/en/beach-blue-sky-clouds-coconut-trees- 1868047//
- 25. Non-lazy Download item 1 Download all other items Render Wait for everything to download before rendering. Render as soon as you have what you need. Other downloads continue in the background. Download item 1 Download all other items Render Lazy loading
- 27. Just a few specific things we’ve looked at recently ● Defer ○ Be asynchronous ○ Assess lazy loading ● Shrink ○ Behind the scenes ○ Bundle optimization ○ Font subset ● Curly ones ○ Memory leaks ○ Event delegation ○ Loader animation Some specifics
- 28. ● Response Time ● DB query time ● Capacity Backend Measure Things ● Nginx/Apache GZIP ● Long Expires Headers ● CSS & JS Versioning ● Have enough servers :-) ● Slow Query Logs ● Static Assets from S3/CDN ● Read only db’s
- 29. ~20msAverage Latency reduction ● Bandwidth ● Reliability ● Global latency Just use a CDN ● CDN’s - Cloudfront ● HTTP2 7.5TBdelivered 589MRequests $1,310 4.4 daysLess waiting every day Learnosity Cloudfront CDN bill for March 2017 Network
- 30. Just a few specific things we’ve looked at recently ● Defer ○ Be asynchronous ○ Assess lazy loading ● Shrink ○ Behind the scenes ○ Bundle optimization ○ Font subset ● Curly ones ○ Memory leaks ○ Event delegation ○ Loader animation Some specifics
- 31. Bundle optimization Each question has its own self- contained bundle. We ran a dependency analysis tool to work out the level of duplication between questions.
- 32. Association question Drag and drop Old bundling strategy …and other question types using drag and drop ● Single bundle for each question type (shared vendor libs though) ● Internal components (drag and drop etc.) duplicated for each question ● 23 times in some cases! Classification question Drag and drop
- 33. Sharing is caring ● Sharing internal components reduces total JS download by almost 20% Drag and drop bundle Association question Classification question
- 34. Just a few specific things we’ve looked at recently ● Defer ○ Be asynchronous ○ Assess lazy loading ● Shrink ○ Behind the scenes ○ Bundle optimization ○ Font subset ● Curly ones ○ Memory leaks ○ Event delegation ○ Loader animation Some specifics
- 35. Do we need that symbol? We include a special font, Symbola, with math symbols. The font file was quite large (890k) so we took a look at what glyphs it contains, and how many of those we actually use.
- 37. Just a few specific things we’ve looked at recently ● Defer ○ Be asynchronous ○ Assess lazy loading ● Shrink ○ Behind the scenes ○ Bundle optimization ○ Font subset ● Curly ones ○ Memory leaks ○ Event delegation ○ Loader animation Some specifics
- 38. ● Zombie data left behind when you don’t clean up after yourself ● Single-page app will eventually run out of memory ● Fixing leaks and detecting regressions is hard! Memory leaks Image rights: https://pixabay.com/en/corpse-dead-death-evil-1296043/, https://pixabay.com/en/brain-lobes-colour-medical-2180593/
- 39. Memory leaks When we stop using an object we need to remove all references to it. This is very easy to overlook though. Used object Used object Used object Unused object Used object Used object
- 41. Looks like a leak Keypads aren’t getting cleaned up. Eventually you’ll run out of memory.
- 42. All references to the keypad and everything it contains are completely removed on cleanup. After fixing the leaks
- 43. Demo: Formula keypad memory leaks http://docs.learnosity.com/demos/isolation/formula-keyboard-memory.php
- 44. Just a few specific things we’ve looked at recently ● Defer ○ Be asynchronous ○ Assess lazy loading ● Shrink ○ CDN ○ Bundle optimization ○ Font subset ● Curly ones ○ Memory leaks ○ Event delegation ○ Loader animation Some specifics
- 45. Event delegation // Bind events on individual dropzones $('.question .dropzone').on('click', function () { // handle click }); // Use delegation $('.question').on('click', '.dropzone', function () { // handle click });
- 47. Just a few specific things we’ve looked at recently ● Defer ○ Be asynchronous ○ Assess lazy loading ● Shrink ○ CDN ○ Bundle optimization ○ Font subset ● Curly ones ○ Memory leaks ○ Event delegation ○ Loader animation Some specifics
- 48. A little story about CSS animations Sometimes things backfire...
- 49. What we plan to improve ● React / redux ● Dehydration / rehydration ● Web workers What’s next?
- 50. React / redux Simple, self-contained ui components. React’s Virtual DOM lets us to do more efficient re- rendering. Redux forces us to maintain state in a single JS object, not spread between DOM, view and model.
- 51. Currently Redux way Model View DOM Element Data Actions / Reducers View Components State spread over various layers. Unidirectional data flow. One source of truth for state.
- 52. What we plan to improve ● React / redux ● Dehydration / rehydration ● Web workers What’s next?
- 53. Dehydrate / rehydrate Only create components and DOM elements for questions that are visible on screen. Dehydrate (remove everything except for a minimal data representation) when not visible. Much better performance for pages with lots of invisible questions. Image rights: Amblin Entertainment (Production) Robert Zemeckis (Director). (1989) Back to the Future Part II [Motion picture] USA: Universal Pictures
- 54. What we plan to improve ● React / redux ● Dehydration / rehydration ● Web workers What’s next?
- 55. Web workers Javascript that runs in the background without interrupting the user interface. Use cases: ● Audio processing (already in use) ● Virtual DOM (diffing algorithm) ● Scoring There are some drawbacks - e.g. sending and receiving data is asynchronous.
- 56. ● Use flagged features ○ Lazy load assess ○ Lazy load formula keypad ○ Use mathquill to render math (sometimes) ● Take advantage of our APIs ● Optimize your media ● Question and test everything ● Keep libraries up to date So what can you do?
- 57. ● Performance is super important ● Solve the problem at the right level ● Don’t sweat the small stuff (especially when micro- optimization brings in complexity) ● Measure things and ask questions ● Understand the trade-offs ● We’re continuing to make things faster Summing up...
- 58. Questions?
- 59. 2:20 – 3:00pm Quick ‘n‘ Lazy: How we keep things speedy and stay out of your way Mark & Eoghan
Editor's Notes
- #8: Facebook A/B test with reduced scrolling frame rate https://twitter.com/igrigorik/status/300226402496704512 http://www.youtube.com/watch?list=SPNYkxOF6rcICCU_UD67Ga0qLvMjnBBwft&v=3-WYu_p5rdU&feature=player_detailpage#t=2149s “And, crucially, Google favors faster* sites over others with the same search score in the results it shows consumers, said Richard Gingras, senior director, news and social products at Google.” http://adage.com/article/digital/google-amp-launch-looms-search-engine-scores-follow/302599/
- #10: https://www.slideshare.net/QualcommDeveloperNetwork/69-minimize-powerconsumptioninappsschwartz918gg67
- #11: The core challenges on mobile Performance - we have high expectations - it needs to be fast so harder to be performant compared to desktop Battery life - if we waste battery then no learning can be done. These two are highly correlated because if we are inefficient we waste battery. We’ll be talking about these in more detail in the next session so will skip over for now but keep them in mind.
- #12: 1M users on phones 2M users on tablets 9M users on chromebooks 10M users on windows 1.7M on osx
- #13: https://en.wikipedia.org/wiki/Server_(computing)#/media/File:Wikimedia_Foundation_Servers-8055_35.jpg
- #14: Goal: mobile first
- #17: Trimming the spoiler on this car isn’t going to make it go faster until you fix the tire :-)
- #36: We use 345 symbols out of 5081 in the original font Subset tool: Pyftsubset (command line tool from fonttools python package)
- #37: Font reduced to 1/32nd of its original size.
- #39: Memory use just keeps increasing over time
- #42: They keep using more: Memory (blue) DOM nodes (green) Listeners (yellow)
- #43: The leak could be reintroduced with one careless line of code.
- #44: Author could close and open keypad http://docs.learnosity.com/demos/isolation/formula-keyboard-memory.php
- #46: JSON for example question { "possible_responses": ["Sacramento", "Albany"], "stimulus_list": ["New York", "California"], "type": "association", "validation": { "scoring_type": "exactMatch", "valid_response": { "score": 1, "value": ["Albany", "Sacramento"] } } }
- #47: Effect adds up when there’s lots of dragdrop questions
- #49: 3 little dots animation We were following standard advice to do less requests and less images etc, added CSS animation which reduces network load. After experimenting with large numbers of questions we notice high CPU and tried to track it down Saw large numbers of repaints Despite no change in dimensions the css animation was causing reflow calculation for every item on the page. Replacing with an animated GIF dropped CPU When we remove that animation in CSS the CPU dropped from 5% at 20 questions (100% at 200 questions) to basically 0.
- #57: Use mathquill instead of mathjax if (a) you’re already using formula questions or (b) you just want to render math inside question content, not on the whole page - esp. on a large page Mathquill = smaller download, less symbols rendered, slower rendering (forced layout), scoped to individual question if requested Mathjax = renders everything on page, larger download Question/test - CSS animation issue Libraries - jQuery memory leak issue in v1.10.2