Browser core red bus presentation
- 1. Browser and Beyond @
- 2. Component Library Development Core Web Vitals Production Observability Monitoring Kaushal Anjali Ankita Apoorva Faiza Pallavi Topics and Speakers
- 4. Component library A component library is an isolated cloud-based folder that consists of all the designed/styled parts of a website or piece of software. * A common goal shared by all developers is to be able to design and develop components that enable them to ship out their features At redbus, we decided to create a reusable component library across the teams that would aid developers in building UIs seamlessly and more efficiently. * *
- 5. Why Component Library? 1 1 1 2 Collaborate effectively with speed Consistency in the UI Reusability Customization and Flexibility 1 2 3 4 Robust and Lesser Bugs 5
- 6. Atomic Design ● Multiple UI components that are isolated and reusable. ● Combining atoms to form Molecules, which can be combined to form organisms and further, templates and pages.
- 7. Examples
- 8. Implementation Details Tech stack for building the component library in-house consists of: React + Typescript Storybook Styled components Lerna Courtesy: https://reactjs.org/, https://www.typescriptlang.org/, https://storybook.js.org/, https://styled-components.com/, https://www.npmjs.com/package/lerna
- 9. f Example
- 10. Conclusion 1 1 1 2 Next step 250+ components created Used across multiple projects within redBus ~20 - 30% reduction in dev effort, timeline Make components open source 1 2 3 4 100% componentisation Open source component library updates 1 2
- 11. Open source Component Library - redBus Storybook
- 12. Open source code - Github Link
- 13. Use the Chrome Rendering Section: Core Web Vitals Ankita Pallavi
- 14. ● Web vitals is an initiative introduced by google ● Optimizing quality of user experience is key to the success of your website ● Core Web vitals focuses on 3 main aspects : Introduction Courtesy: Web Vitals CLS: Visual Stability LCP: Loading Experience FID: Interactivity 1 2 3
- 15. Use the Chrome Rendering Section: Cumulative Layout Shift
- 16. What is CLS? By definition, CLS is the movement of page elements loaded on the page to a different position from their existing position due to some unexpected factors. I.e. Visual Stability of the page
- 17. What is a good CLS score? To provide a good user experience, sites should strive to have a CLS score of 0.1 or less. *
- 18. Measuring the CLS score Lighthouse - Chrome Dev Tools Rendering Options
- 19. What are some CLS contributors? Delay in loading relevant CSS file , space is allocated after browser starts downloading the image Advertisements (Promotions/offers) , added at runtime App installs,iFrame injections, Third Party content etc. Component should not be rendered based on API response Courtesy: Chrome Web Developers’ 2020 Summit,image showing the Cumulative Layout Shift (CLS) Reasons.
- 20. Optimizations Before: After: Placeholders for banners at the top and middle section of the page Move components to the bottom of the page such that they are not visible on the initial load Change up the animations/loaders used on the page 2 Image Dimensions 1 3 4
- 21. Impact Domain Ranking percentage Date Improved Domain Ranking/ SEO ranking Improvements in TTI score. Quicker site = greater chance of users converting Provided a better user experience 1 2 3
- 22. Use the Chrome Rendering Section: Largest Contentful Paint
- 23. What is LCP? Courtesy: https://blockthrough.com/ LCP is measured when the largest element of a webpage becomes visible in the user’s browser The LCP element is usually the hero image or a large text paragraph
- 24. What is a good LCP score? To provide a good user experience, sites should have an LCP of 2.5sec or lesser *
- 25. How can we measure the LCP score? Lighthouse - Performance Tab PageSpeed Insights Lighthouse - Chrome Dev Tools
- 26. What are some major LCP contributors? Unoptimised Images Courtesy: 1) Dominik Scythe on Unsplash 2) https://serverguy.com/ 3) https://blog.duda.co/ Increased server response time Render-blocking Resources
- 27. Optimizations Courtesy: seo-hacker.com Optimising Images 1 Preloading critical resources like fonts, above the fold images, css and javascript Using inline critical css and deferring non critical resources Making use of CDN, caching and service worker 2 4 3
- 28. Use the Chrome Rendering Section: First Input Delay
- 29. What is FID? First Input Delay measures the interactivity of your webpage. Few Examples : Courtesy of : Quantummetric Choosing an option from a menu Clicking on a link Tapping on an accordion and it opening up 1 2 3
- 30. What is a good FID score? Your FID should happen within 100 milliseconds *
- 31. Causes for Poor FID: Long Tasks Heavy Javascript Execution Time Large Javascript Bundles Render Blocking JS 1 2 3 4 Courtesy: Chrome Web Developers’ 2020 Summit,image showing the FID Reasons.
- 32. Optimizations Lazy loading JS chunks Use of Web workers Minifying CSS files Deferring non-critical JS, third party libraries Optimize DOM size 1 5 4 3 2 Courtesy: https://moz.com/learn/seo/performance-metrics
- 33. Impact Impact in loading time of PER/COL mobile website by ~1.5-2 sec Total block time was reduced from 1.2 sec to ~ 0.72 sec Improvement in TTI of the page and speed index of the page 1 2 3
- 34. Measuring Web Vitals Lighthouse - Chrome Dev Tools Rendering Options Page Speed Insights
- 36. E#E#ju4N8@Courtesy of KatieLingo k$87ju4N8@k$87E#ju4N8@k$87 What is Observability? An ‘observable’ system centralizes information and continuously monitors the system to detect undesirable behaviours and lets debug production issues efficiently.
- 37. Why Observability? Greater control over complex systems. Aids visibility in terms of debugging and performance tuning.
- 38. Real User Monitoring (RUM) RUM captures real user interaction on a web browser to quantify and measure the user experience performance of the application.
- 41. Developer productivity. Customizable data visualization. Real User Monitoring - Impact 1 4 Visibility into user distribution to measure performance. 2 Quick turnaround on issues before impacting production. 3
- 43. Error Tracking At redBus, we have error dashboards to identify and track down the errors.
- 44. Error Dashboard
- 45. How we track Errors ?
- 46. What caused the error?
- 47. Machine Learning (Anomaly Detection) Spot anomalies according to configuration using unsupervised learning. Data pulled from elastic search for analysis and anomaly results are displayed in Dashboards. To determine when the request rate on your web site drops significantly.
- 48. ML Watcher Alert Watcher alerts/notifies on scanning for recently created anomalies over a certain interval.
- 49. Anomaly Explorer You can see an overall score and shared influencers for all the metrics and all the entities in the job Observability Credits : ELK Stack (ElasticSearch and Kibana)
- 51. Browser and Beyond @ redBus PART 2