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.
*
*
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.
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
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
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
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
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
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)
