Browser Core Presentation Part 1

1. Browser and Beyond @

2. Component Library
Development
Core Web Vitals
Production
Observability
Monitoring
Kaushal Anjali
Ankita
Apoorva
Faiza
Pallavi
Topics and Speakers

3. Kaushal
Anjali

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

35. Observability
Observability
Apoorva
Faiza

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.

40. Distributed Tracing

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)

50. Thank You
https://medium.com/redbus-in/engineering/home
https://github.com/redbus-labs/rbComponentLibrary

51. Browser and Beyond @ redBus
PART 2