Using React for the Mobile Web
2 likes741 views
The document outlines strategies for optimizing React applications for mobile web performance, emphasizing the importance of caching, resource loading, and file size management. It details best practices for improving perceived page load times, including using HTTP/2, asynchronous scripts, and minimizing unnecessary component re-renders. The author, Brian Holt, highlights common pitfalls and encourages focusing on readability over premature optimization.
Using React for the Mobile Web
- 1. W R I T I N G R E A C T F O R T H E M O B I L E W E B C A S E S T U D Y: B R I A N H O LT @ H O LT B T – B R I @ N H O . LT
- 2. InfoQ.com: News & Community Site • 750,000 unique visitors/month • Published in 4 languages (English, Chinese, Japanese and Brazilian Portuguese) • Post content from our QCon conferences • News 15-20 / week • Articles 3-4 / week • Presentations (videos) 12-15 / week • Interviews 2-3 / week • Books 1 / month Watch the video with slide synchronization on InfoQ.com! http://www.infoq.com/presentations/ react-reddit-mobile
- 3. Purpose of QCon - to empower software development by facilitating the spread of knowledge and innovation Strategy - practitioner-driven conference designed for YOU: influencers of change and innovation in your teams - speakers and topics driving the evolution and innovation - connecting and catalyzing the influencers and innovators Highlights - attended by more than 12,000 delegates since 2007 - held in 9 cities worldwide Presented at QCon San Francisco www.qconsf.com
- 4. W H Y I S W R I T I N G R E A C T D I F F E R E N T F O R T H E M O B I L E W E B ?
- 5. I T ’ S N O T.
- 6. F I N B R I A N H O LT @ H O LT B T
- 7. L O L J K
- 8. P E R F
- 9. P E R F M AT T E R S O N M O B I L E . A L O T.
- 10. W R I T I N G P E R F O R M A N T R E A C T B R I A N H O LT @ H O LT B T
- 11. W E B P E R F O R M A N C E B R I A N H O LT @ H O LT B T
- 12. P E R F M AT T E R S • Data speed • Data cost • Battery drain • Bad UX • Longer load time is LESS ****ING MONEY.
- 16. hey reddit
- 17. lol
- 18. mobile reddit’s perf is bad
- 19. ****
- 20. G E N E R A L P E R F T I P S
- 21. U S E I M A G E S S PA R I N G LY. O P T I M I Z E T H E O N E S Y O U D O U S E .
- 22. C A C H E
- 23. C A C H E • Cache images as long as possible. • Consider separating scripts and styles that change frequently from scripts and styles that remain the same. • e.g. Separate your vendor code like Bootstrap from your app code. • Use naming conventions to invalidate cache.
- 24. H T T P C A C H I N G I S N ’ T A S G R E AT A S Y O U T H I N K • IE, Chrome, Safari and Firefox only keep ~200MB of cache on hand. • Android keeps 80MB of cache. • Mobile Safari has no HTTP cache.
- 25. D O N ’ T U S E A W E B F O N T. T E L L Y O U R D E S I G N E R T O * * * * O F F I F H E / S H E WA N T S T O .
- 26. I C O N F O N T S A R E * * * * T O O . T H E Y ’ R E B I G A N D T H E Y ’ R E H A R D T O M A K E A C C E S S I B L E .
- 27. Y O U ’ R E S L O W I N G D O W N Y O U R W E B S I T E T O M A K E I T L E S S A C C E S S I B L E .
- 29. G O O D J O B .
- 30. C R I T I C A L R E N D E R I N G PAT H • This is a psychology game. You want the fastest perceived page load. • Defer anything not critical to the first paint to after it. • However, once you have had your first paint, starting loading everything as fast as you can!
- 31. F I L E S I Z E • Having just gone to China where data was real expensive to use, CUT DOWN YOUR ****ING FILE SIZES. • Only include polyfills (especially with Babel) you use. • e.g. with lodash, only include methods you use. • Dedupe your dependencies.
- 33. W E ' D L I K E T O I M A G I N E T H AT T H E WAY A W E B PA G E L O A D S I S T H I S : 1. Browser opens connection to yoursite.com, does DNS/TCP/SSL setup. 2. Browser downloads the document (HTML). 3. As soon as the browser is done downloading the document, the browser starts downloading all the document's sub resources at the same time. 4. Browser parses the document and fills in the necessary sub resources once they've been downloaded. source: nateberkopec.com/2015/11/05/page-weight-doesnt-matter.html
- 34. H E R E ' S W H AT A C T U A L LY H A P P E N S : 1. Browser opens connection to yoursite.com, does DNS/TCP/SSL setup. 2. Browser downloads the document (HTML). 3. Browser starts parsing the document. When the parser encounters a subresource, it opens a connection and downloads it. 4. Parse the document? Nah man, I'm gonna wait for this script to download and execute. If the subresource is an external script tag, the parser stops, waits until it the script has downloaded, executes the entire script, and then moves on. 5. As soon as the parser stops and has to wait for an external script to download, it sends ahead something called a preloader. The preloader may notice and begin downloading resources if it understands how to (hint: a very popular Javascript pattern prevents this). source: nateberkopec.com/2015/11/05/page-weight-doesnt-matter.html
- 36. W H AT T O D O • Don't stop the parser. • Get out of the browser preloader's way. • Utilize HTTP caching - but not too much. • Use the Resource Hint API. source: nateberkopec.com/2015/11/05/page-weight-doesnt-matter.html
- 37. R E S O U R C E H I N T S • preconnect – A neat little trick to let the browser know about things that it couldn’t otherwise. A good example would be a script tag you’re going to inject later. • prefetch – Great for grabbing resources for the next page the user is going to hit. If you’re in a funnel and you know where the user is going next, prefect those resources. • prerender – Grab and actually pretender an HTML resource. Great for something like Google Instant Pages.
- 38. U S E A S Y N C A N D D E F E R AT T R I B U T E S O N Y O U R S C R I P T TA G S normal async defer source: growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
- 39. W H AT AT T R I B U T E W H E N • Typically you want to use async where possible, then defer then no attribute. Here are some general rules to follow: • If the script is modular and does not rely on any scripts then use async. • If the script relies upon or is relied upon by another script then use defer. • If the script is small and is relied upon by an async script then use an inline script with no attributes placed above the async scripts. source: growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
- 40. D E F E R G U A R A N T E E S O R D E R O F E X E C U T I O N . A S Y N C D O E S N O T.
- 41. I F Y O U R T R A C K I N G O R A N A LY T I C S A R E N O T A S Y N C , Y O U M A K E K I T T Y S A D
- 42. A N I M AT I O N S • Use sparingly. • Hard to do good, accessible UX with animations anyway. • JavaScript animations are only performant if the main JS thread is not occupied. • CSS animations can be better because they’re not on the JS thread. Investigate using the GPU to further enhance performant. • Tend to burn battery.
- 43. R E A C T P E R F T I P S
- 44. S H O U L D C O M P O N E N T U P D AT E • React components have a lifecycle method called shouldComponentUpdate() that React runs in order to tell if it should re- render the component or not. • For components that never re-render, always return false. • For perf bottlenecks, implement your own shouldComponentUpdate. • For other components, leave them alone. It can introduce hard-to-find bugs.
- 45. R E A C T P E R F T O O L I N G • printInclusive – include lifecycle methods • printExclusive – exclude lifecycle methods • printWasted – TIME/BATTERY YOU ARE WASTING YOU IDIOT
- 47. R E N D E R F E W E R I T E M S • reddit has this problem and Facebook had it. • One feed item has many tiny components and each page has many feed items. • By only rendering the feed items visible on the page, you save React a significant amount of re-rendering. • Hidden menus / actions? Only render them when shown.
- 48. – J O R D A N WA L K E ( R E A C T C O R E T E A M ) “The amount of data you have, should remain independent from the amount of data rendered.”
- 49. D R A W W I T H I N T H E L I N E S • Stop abusing lifecycle methods. • Use refs only when what you want cannot be done another way. • When you must listen for DOM events, be sure to clean up after yourself in componentWillUnmount.
- 50. R E A C T F U L R E A C T • Careful what you stick on state. State should be reserved for mutable data that the component needs to react to changes for. • There is a point where you’re breaking a component into too small of components. • Sometimes is just better to have a button with a style class and that’s it!
- 51. W E B PA C K • Webpack can break your page into chunks that get loaded only on the necessary page. • Import only modules that you need. • If you can’t switch to Webpack, uglify can at least get you dead code elimination. • Otherwise npm dedupe can help you do it by hand.
- 52. R O L L U P. J S • YAJSP™ (yet another JavaScript packager, like Browserify or Webpack) • … the resulting bundle is always smaller than the Browserify or Webpack equivalent, because ES2015 modules are inherently more efficient than CommonJS modules. You can even eliminate unused library code with tree-shaking.
- 53. S V G S I N R E A C T A R E E X P E N S I V E • Use sparingly. • Don’t make them React components if you can help it.
- 54. W R I T E T H E A P P F I R S T • Don’t spend too much optimizing code preemptively or code that isn’t really a bottleneck. • Prefer readability when possible. • After getting readable code down then go back and optimize and hack around the bottlenecks. • Document hacks well.
- 55. H T T P 2
- 56. R E M E M B E R E V E RY T H I N G Y O U K N O W ?
- 57. I T ’ S W R O N G , L O L .
- 58. H T T P 2 • SPDY • Leaves connection open, eliminating costly handshakes. • Uses compression inherently. • Multiplexes assets sent down.
- 59. H T T P 2 A N T I PAT T E R N S • Concatenating files. • Spriting images. • Serving statics from a separate domain. • Minifiying assets.
- 60. W H E N ?
- 62. S P D Y / H T T P 2 S U P P O R T • All mobile browsers (except Opera Mini and Blackberry) support it. • Yeah, even the stock Android browser. Weird. • Firefox, Chrome, and Opera since forever. • IE 11+ and Safari 8+.
- 63. T H AT ’ S ~ 8 0 % O F G L O B A L U S E R S . A N D J U S T A B O U T A L L M O B I L E U S E R S .
- 64. F I N B R I A N H O LT @ H O LT B T
- 65. Watch the video with slide synchronization on InfoQ.com! http://www.infoq.com/presentations/react- reddit-mobile