Fine fine fine, here’s some things you could know if you were hip and into knowing things about building websites well.
- You shouldn’t lazy load hero images. It hurts your Largest Contentful Paint metric, and rightfully so, it delays when the page feels done and ready for users. If your LCP it could still be a backend issue.
- Google Fonts has been ruled non-GDPR compliant. You could use google-webfonts-helper to help you self-host (which is OK), or if you happen to use Cloudflare, flip on Cloudflare Fonts and it will change your Google Fonts usage to be self-hosted for you.
- Speculation Rules are an awfully powerful new tool in the web performance world, capable of pre-rendering a page entirely just before you click on it, a bit like instant.page did/does.
- Inlining SVG into your JavaScript bundles is 3✕ slower/worse than loading it any other way.
- The smallest PNG you can possibly make is 67 bytes.
sizes="auto"pretty much requireswidthandheightattributes on<img>tags.- If you like Zod for data validation, you should be aware of Validbot, a less-than 1KB alternative.
- You can progressively enhance a native HTML checkbox into a toggle UI like this
<input type="checkbox" switch>, which is only supported in Safari for now. - The
color-mix()function in CSS is pretty great for producing color-shared grayscale color palettes.