Lighthouse Report: Improve Performance, accessibility and best practices

[ychoy]

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

• Background and foreground colors do not have a sufficient contrast ratio.
• or <iframe> 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