Sixt experiment to optimize website performance.

1. Hello!
I am Hashem, Frontend engineer
@sixt.
I am Javascript lover and web
performance engineer.
You can find me @HashemKhalifa

2. Improving the development
experience and the performance for
Sixt website

3. You can't optimize what you can't measure.

4. Page load cannot be measured by single metric.
Visual Metrics Interactive Metrics
• First Paint
• First Contentful Paint
• First Meaningful Paint
• Visually Complete
• Speed index
• Time to Interactive
• First CPU Idle

5. Visual Metrics

7. First Paint
The First Paint after navigation:
• Includes basically any paint
• Includes background paint
• Considerations: it can fire when body {
background : #fff } is painted.

8. First Contentful Paint
First Paint of Content
includes:
• text
• Images
• Canvas
• SVG

9. First Meaningful Paint
The Primary content is visible
Marks the paint that follows most
significant change to layout

10. Visually Complete
Visually, the page is done loading

11. Speed Index
How quickly does the page approach visually complete.

12. Interactive Metrics

13. Time To Interactive
The metric Time to interactive (TTI) marks the
point at which your application is both visually
rendered and capable of reliably responding to
user input
Requires:
Network to be fairly quiet

15. First CPU Idle Time AKA First Interactive
The first point at which page could respond quickly just after FMP.
Requires:
Most, but maybe not all, UI elements on the screen are interactive.

16. Map Metrics with User’s Questions.

17. Top Priority Metrics
1. Time To Interactive
2. Speed Index
3. First Contentful Paint

18. Measuring tools

19. Why this matters
Experiences that ship down this
much JavaScript take more than
15+ seconds to load and get
interactive on mobile devices.

20. Case study

21. Performance before / Mobile - Desktop

22. What was the ROOT Causes
• Bundle size
• Dev bundles was shipped to production
• Dependency Duplication
• Typo3 [ monolithic CMS] managing 40 to 50% for the performance.
- Short term solution.
- Long term solution.

23. Journey
• Three Iterations

24. • Reduce the bundle size 50%
• Eliminate bundle overlaps.
• Moment localization.
• React dom development.
First Iteration

25. Bundle size from 1.74MB to 870kb

26. Bundle overlaps [ Before ]
We had 228 bundles that has overlaps

27. Bundle overlaps [ After ]
From 228 to 175 overlaps. And 23 files less

28. Performance after first iteration / Mobile - Desktop

29. • From 28 to 49 Mobile
• From 27 to 44 Desktop
Iteration 1 Results 75%

30. How?

31. Second Iteration AKA short term without typo3
- Rebuild the home page using vanilla JS/static html.
- Lazy loading. [IntersectionObserver]
- Preload font/styles.
- Reduce the number of requests from 259 to 71

32. After Second Iteration (mobile – desktop)

33. • From 49 to 6. Mobile
• From 44 to 81 Desktop
Iteration 1 Results 75%
Iteration 2 Results 6%

34. Third iteration AKA long term solution
- Headless CMS
- Gatsby for static content.
- Precaching resources with service worker.

36. Why Gatsby?

37. After the third iteration (Mobile – Desktop)

38. Our home page with static content

39. Our home page with HCMS and Gatsby

40. Iteration 1 Results 75%
Iteration 2 Results 5%
Iteration 3 Results 50%

41. Comparing the bounce rate on home of July (orange) vs. August (blue). It dropped by 20% after
moving the Homepage out ofT3 end of July. Interestingly: impact is same on Mobile and
Desktop.

42. Conclusion
• Time to interact for Mobile was 15 and now its 5.7 seconds
• Time to interact for Desktop was 17.5 seconds and now is 1.1 seconds
• Reduced bundle size 50%

43. • https://developers.google.com/web/fundamentals/performance/criti
cal-rendering-path/measure-crp
• https://webpack.js.org/configuration/optimization/
• https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-
7d8950fbb5d4
Resources

44. Thank you