Speed Design

Sergey Chernyshev

June 07, 2024

Tweet Share

Transcript

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%

   tra ffi c, +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% fi rst 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 AWAY SLOWNESSKILLS.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 COMPLETION

    NAVIGATION STARTS LAYOUT TIME WITH SKELETAL DESIGN NO SKELETAL DESIGN USE OF CONTENT UNDERSTANDING CONTENT STRUCTURE REDUCED PERCEPTION TIME SPEED PATTERNS.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