Performance Updates

[aubundy]

• [x] optimize images
• [x] optimize delivery
• [ ] critical render path
• [x] code splitting (Part 2)
• [ ] React Performance Optimizations
  • [ ] Change out moment.js
  • [ ] Create notifications component so the whole navbar doesn't rerender on notification updates
  • [ ] why do components render multiple times? Should I change how data is loaded? they should render twice
  • [ ] add react bootstrap
  • [ ] add react window
• [ ] PWA checklist
• [ ] caching

WebPageTest Feedback

• [ ] compress API responses (Part 3)
• [x] compress Cloudinary images
• [x] use progressive JPEGs
• [ ] cache static assets in the browser (Part 3)

PageSpeed Insights Feedback

• [x] text compression (Part 3)
• [x] next-gen image formats
• [x] encode images
• [x] defer offscreen images
• [x] properly size images
  • [x] change standard breads image
• [x] code split (Part 2)
• [ ] use efficient cache policy (Part 3)

---

See above

• [ ] remove unused CSS
• [ ] remove unused JS
• [ ] eliminate render-blocking code
• [ ] avoid enormous payloads
• [ ] minimize main thread work
• [ ] reduce JS execution time
• [ ] avoid chaining multiple requests
• [ ] add performance budgets/reduce requests count and transfer sizes
• [ ] limit large contentful paints
• [ ] avoid long main tread tasks

[aubundy]

Image formats -> https://images.weserv.nl/docs/format.html#output

[aubundy]

Lazy-loading -> https://web.dev/browser-level-image-lazy-loading/#browser-compatibility

[aubundy]

Properly size images -> https://web.dev/serve-responsive-images/