Speed Design by Sergey Chernyshev at NY Web Performance Meetup, June 5, 2024

Proper speed design is a collaboration between product managers, UI designers and developers as all the aspects of the page composition must be balanced to achieve fast experience.

In his talk, Sergey Chernyshev discusses how to start bringing speed into the design process early on and looks at the most common set of design patterns that can help you drive design decisions.

1. SPEED DESIGN
Sergey Chernyshev | @SergeyChe

2. SPEED
MATTERS
to your users and to you

3. SLOW MEANS LOWER CONVERSION
RUM data. Aaron Kulick, Cliff Crocker @ Wallmart Labs

4. WPOSTATS.COM
➤Carpe: -52% LCP & -42% CLS => +10% traffic, +5% conversion, +15% revenue (2023)
➤Sunday Citizen: -25% LCP & -61% CLS => -4% bounce, +6% conversion (2022)
➤Renault: -1s in LCP => -14% bounce, +13% conversion (2021)
➤Vodafone: -31% LCP => +8% sales, +15% cart visits (2021)
➤Yelp: -45% FCP @ 75%ile => +15% conversion (2021)
➤Tokopedia: -55% LCP => +23% session time (2021)
➤Carousell: -65% Page Load => 3x in ad clickthrough, +46% first time chatters (2018)
➤Zolando: -100ms load time => +0.7% revenue (2018)
➤DoubleClick: 5s vs. 19s => up to 2x revenue on mobile (2016)
➤Trainline: -0.3s => +$11.5M / year revenue (2016)
➤Etsy: +160Kb => +12% bounce rate (2014)
➤DoubleClick: -1 redirect => +12% CTR (2011)

5. SEO WEB.DEV/WEB-VITALS
CORE WEB VITALS

6. % OF DAILY BUDGET
http://www.disney.com/
WHATDOESMYSITECOST.COM

7. SLOWNESS TAKES TIME AWAYSLOWNESSKILLS.COM

8. PROCESS
CHANGE
include speed early

9. SOFTWARE DEVELOPMENT LIFE CYCLE (SDLC)
https://www.mindbowser.com/software-product-engineering-lifecycle/

10. SOFTWARE DEVELOPMENT LIFE CYCLE (SDLC)
https://www.mindbowser.com/software-product-engineering-lifecycle/

11. DESIGN
FOR SPEED
with progressive enhancement

12. MOVIES OR PAINTINGS?
Speed vs. Fluency, What drives user engagement?
Kent Alstad, Velocity NY 2015

13. PERFORMANCE CHOREOGRAPHERS
Performance Choreography
Tim Kadlec, WebPerfDays NY 2014

14. REVEAL
FEATURES
as page is being downloaded
and constructed

15. RENDER & INTERACTION STAGES
1.Verify destination
2.Provide primary content
3.Allow interaction
4.Show secondary content
5.Invisible tasks
Acknowledge action
1.Verify destination
2.…
Experience

16. YOUTUBE HOME MOCKUP

17. INCREMENTAL MOCKUP 1

18. INCREMENTAL MOCKUP 2

19. INCREMENTAL MOCKUP 3

20. INCREMENTAL MOCKUP 4

21. FINAL MOCKUP

22. UX & PRODUCT: STORYBOARD WIREFRAMES

23. DESIGN: STORYBOARDS IN FIGMA OR SKETCH

24. YOUTUBE HOME STORYBOARD
http://bit.ly/yt-animated-storyboard

25. STAGES & TECHNICAL CONSTRAINTS
Stage
1.Verify destination
2.Provide primary
content
3.Allow interaction
4.Show secondary
content
5.Invisible tasks
Acknowledge action
Technology Constraints
1.Inline CSS & Logo, 14K
2.no JS, CSS, just HTML,
1/2 images
3.Skeletal CSS, async JS
4.All CSS, above the fold
images, fonts, AJAX-in
content
5.The rest
Pre-transition feedback,
fake transition
Experience
Complexity

26. SPEEDPATTERNS
speedpatterns.com

27. FAST START

28. FAST START

29. FAST START

30. FAST START
FIRST CONTENTFUL PAINT

31. FAST START
LARGEST CONTENTFUL PAINT

32. IMMUTABLE LAYOUT

33. IMMUTABLE LAYOUT

34. IMMUTABLE LAYOUT

35. IMMUTABLE LAYOUT

36. CUMULATIVE LAYOUT SHIFT
IMMUTABLE LAYOUT

37. Luke Wroblewski: Mobile Design Details: Avoid The Spinner: http://www.lukew.com/ff/entry.asp?1797
SKELETAL DESIGNS

38. SKELETAL DESIGNS

39. SKELETAL DESIGNS
CONTENT
AND
LAYOUT
CONTENT TASK COMPLETION
TASK COMPLETIONNAVIGATION STARTS
LAYOUT
TIME
WITH SKELETAL DESIGN
NO SKELETAL DESIGN
USE OF
CONTENT
UNDERSTANDING
CONTENT STRUCTURE
REDUCED PERCEPTION TIME
SPEEDPATTERNS.COM

40. SKELETAL DESIGNS USE IMMUTABLE LAYOUT

41. SKELETAL DESIGNS USE IMMUTABLE LAYOUT

42. DON’T USE SLOWNESS-INDICATORS

43. THANK YOU
@SergeyChe | [email protected]
Q&A