Lighthouse Report: Improve Performance, accessibility and best practices

Performance
- [ ] Eliminate render-blocking resources
- [ ] Preconnect to required origins
- [ ] Properly size images
- [ ] Serve images in next-gen formats
- [ ] Ensure text remains visible during webfont load
- [ ] Serve static assets with an efficient cache policy
- [ ] Minimize main-thread work
- [ ] Avoid chaining critical requests
- [ ] Keep request counts low and transfer sizes small

Best Practices
- [ ] Links to cross-origin destinations are unsafe
- [ ] Browser errors were logged to the console
- [ ] Add favicon

Accessibility
- [x] Background and foreground colors do not have a sufficient contrast ratio.
- [x] or elements do not have a title

Manually check these for a11y:
- [ ] The page has a logical tab order
- [ ] Interactive controls are keyboard focusable
- [ ] Interactive elements indicate their true purpose and state
- [ ] The user's focus is directed to new content added to the page
- [ ] User focus is not accidentally trapped in a region
- [ ] Custom controls have associated labels
- [ ] Custom controls have ARIA roles
- [ ] Visual order on the page follows DOM order
- [ ] Offscreen content is hidden from assistive technology
- [ ] Headings don't skip levels
- [ ] HTML5 landmark elements are used to improve navigation