These slides are an integral part of DudaCon https://resources.duda.co/webinars

1. Duda’s CWV
Process &
Fixes
Russ Jeffery

2. Agenda - CWV
Measure
01
Analyze
02
Improve
03
Monitor
04

3. Measurement
● RUM/Field data was required to get
accurate understanding of where we
stood and what real issues exist.
● Leveraging Web-Vitals Library (Web
Performance APIs) to send data
directly to Amazon S3.
● Enriched with data we knew about
the website:
○ Has custom code been added?
○ Page of the site
○ Template ID
○ LCP Element Type (<img>, <p>, etc.)
User S3 Storage
Athena BI Tool

4. Analyzing Data
From data collected, we also merge it with
other site/account information:
● Widget usage Geo/region
● Account Age of sites
● 3rd party app installs
● And many more...
We then slice/dice data to find
commonalities in sites with high LCP, CLS
or FID scores. Once we identify
commonalities, we’ll use dev tools and/or
Lighthouse to replicate the exact issue.

5. Examples of Issues
We’ve Found &
Improved

6. (Loading)

7. Before
After
FCP #1: Prioritize Content Loading

8. ● Load images as you scroll - We use
lozad.js
● Initialize widgets as you scroll - use
IntersectionObserver
● Add “async defer” to all possible scripts
FCP #2: Lazy load all
the things

9. FCP #3: Optimize images
Upload Image
Storage (S3)
01 Upload Image
Site Visitor Browser
View Image -
Send container
size + device
02 Serve Image
Example Image
AWS Lambda
Create optimized image based
on request and cache it
Storage (S3)
Site Editor

10. FCP #4: Cookie
consent
● Duda is using Usercentrics CMP
● Their “smart blocking” mechanism
was too aggressive
● Worked with them to lower their
script when possible so initial content
will be rendered, only use them in the
head when customers are adding non
recommended scripts to the head or
when adding custom iframes

11. FCP #5: Server side
rendering
● We found out that some elements were
rendered using javascript and when
those elements are the LCP, it greatly
reduce the score
● As a result, we re-implemented those
features using server side rendering
○ Video background
○ Background sliders

12. (Visual Stability)

13. CLS #1:
Fonts loading
● We found out that when fonts are
loaded, there is an ugly jump that
causes CLS
● Solution was to inline the “above
the fold” fonts
● Rest of the fonts are loaded
asynchronously after the page is
rendered
Before After

14. CLS #2: Elements dimensions
● We found out that in many cases, images or other media elements without an
HTML height were causing high CLS
● Solution was to to make sure to always help the browser to determine the
height of the element before it is loaded
● Done using the responsive width/height attributes and aspect-ratio css
● For Javascript based elements - preserve height in advance

15. CLS Example 3 - Custom widgets
● Duda is serving large customers who build many sites and can build their own
custom widgets they use across sites
● We worked with those partners to fix those issues
One Partner CLS scores
after fixing custom widgets

16. (Interactivity)

17. FID #1: Long running js
● The main factor that is causing FID are long executed javascript tasks that are
not optimized
● We found that using the chrome dev tools we can identify those scripts and
break them into smaller chunks each executed in a different frame cycle

18. FID #2: Recaptcha
● Duda is using recaptcha in our contact forms to ensure no spam
● Recaptcha has a quite heavy initialization that is hurting FID
● By initializing recaptcha when user focuses on the form input, we were able to
improve FID

19. Monitor Results

20. Consistent Improvement

21. As compared to other CMS platforms

22. Recap on the process
Measure
Know how you perform and
know when you have
impact.
Analyze
Discover and prioritize
improvements
Monitor
Make sure your improvements
have real impact. The faster the
better.
Improve / Fix
Implement technical fixes
01
02
03
04

23. Thank you!
Russ Jeffery | russ@duda.co