Improve Lighthouse Score

[hawkins]

In it's current state, this is a measly 57/100. I know I can do far better than that!

This is an umbrella issue containing a checklist and links to relevant other issues.

Here are the current issues:

Progressive Web App

• First meaningful paint: 1106.8ms / 1600ms (99)
• Perceptual Speed Index: 1204 / 1250 (98)
• Time To Interactive (alpha): 1164.2ms / 5000ms (99)
• Contains some content when JavaScript is not enabled
  • The page body should render some content if its scripts are not available. Progressive enhancement means that everyone can access the basic content and functionality of a page in any browser, and those without certain browser features may receive a reduced but still functional experience.

Best Practices

• Using bytes efficiently
  • Uses 90% of its CSS rules: 6KB (~30ms) potential savings
  • Has optimized images
  • Has appropriately sized images
• Avoids old CSS flexbox
• Avoids <link> that delay first paint: 3 resources delayed first paint by 155ms
• Opens external anchors using rel="noopener"
• Background and foreground colors have a sufficient contrast ratio: 9 elements fail
  • #root > .App > .main > .controls > div:nth-of-type(2) > .theme__field___qDoJ_ > .theme__templateValue___NUF6W.theme__value___3DpnS > div > .item > strong
  • #root > .App > .main > .controls > div:nth-of-type(2) > .theme__field___qDoJ_ > .theme__templateValue___NUF6W.theme__value___3DpnS > div > .item > small
  • #root > .App > .main > .controls > .theme__button___1ikWq.theme__raised___2tddz.theme__primary___zkacG
  • #root > .App > .main > .controls > button:nth-of-type(2)
  • #root > .App > .main > .controls > button:nth-of-type(3)
  • #root > .App > .main > .episode > p:nth-of-type(2) > .dark > span:nth-of-type(1)
  • #root > .App > .main > .episode > p:nth-of-type(2) > .dark > span:nth-of-type(2)
  • #root > .App > .main > .episode > p:nth-of-type(2) > .dark > span:nth-of-type(3)
  • #root > .App > .main > .episode > .theme__button___1ikWq.theme__raised___2tddz.theme__primary___zkacG
• Every form element has a label: 1 element fails
• Manifest's short_name won't be truncated when displayed on homescreen
• Manifest's display property is set

Performance Metrics

• Critical Request Chains: 4
  • Longest request chain (shorter is better): 3
  • Longest chain duration (shorter is better): 1429.09ms
  • Longest chain transfer size (smaller is better): 95.07KB