In our previous post about Answers performance, we mainly discussed the impact that material-ui had on our site. However, we made many more changes to get us to where we are today.
- Pre allocate space for lazy loaded elements
- Reduce some large images that we happened to miss
- Lazy load third party images
- Preload fonts to avoid layout shift
- Inline styles
- Optimize deliverables to the frontend
- Optimize hydration
- Sync SSR HTML hydration
With the changes from removing material-ui and applying the fixes and suggestions from XWP, we were able to hit our goal of a 90+ web vitals score. This, in turn, has led to an overall better experience for the user with faster load times, reduced page shifts, and quicker page interactivity.