![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.](https://image.slidesharecdn.com/performancepresentation-200130131729/85/Performance-presentation-22-320.jpg)
![Bundle overlaps [ Before ]
We had 228 bundles that has overlaps](https://image.slidesharecdn.com/performancepresentation-200130131729/85/Performance-presentation-26-320.jpg)
![Bundle overlaps [ After ]
From 228 to 175 overlaps. And 23 files less](https://image.slidesharecdn.com/performancepresentation-200130131729/85/Performance-presentation-27-320.jpg)
![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](https://image.slidesharecdn.com/performancepresentation-200130131729/85/Performance-presentation-31-320.jpg)
Performance presentation
- 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
- 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.
- 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.
- 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