reduce page size, network connections, layout shifts, and time to paint

To reduce the page size, I

• added WOFF2 versions of the font files (while adding the missing Josefin italic),
• enabled CSS and HTML minification (which only helps to shave off a few bytes, but those come free, so why not),
• removed unused CSS, and
• used the WebP format for the banner due to its better compression performance than JPEG, and re-exported the Phosh logo as a grey scale PNG at lower resolution (but still enough for a scale-factor of 3).

To reduce network connections, I

• moved the dark mode CSS to the base.css. (Its media query was only apparent after loading, so it was loaded unconditionally. And moving the media query to the <style> element would not have improved performance for dark mode users, and introduced a delay for first-time light mode to dark mode switching.)

To reduce layout shifts, I

• added fallback fonts based on Arial, and to it metrically compatible fonts, due to their widespread use, with adjustments so that they become metrically similar to the not yet loaded target fonts, and
• added aspect ratios to images on the front page, because then the final layout can be allocated with the final height being calculable from the CSS-given width or vice versa.

To reduce the time to painting, I

• added a minimal green bubble–only SVG version of the front page's banner as a data URI. That increases the overall page size by a mere kilobyte, but makes sure the green bubbles are drawn before the banner is loaded. It reduces the time until something is painted there, which (a) helps guide users on very slow connections when scrolling, and (b) reduces the flashing during loading for everyone else.

While at it, I added alt text to the front page's UI row.