Here's a breakdown of the key themes in the Hacker News discussion about the critical CSS tool, supported with direct quotations:
Usefulness and Implementation of the Tool
- Potential utility: Several users expressed interest in the tool's functionality. "This seems like it'd be really useful as a Vite/Astro plugin" (promiseofbeans) highlights a specific use case where the tool could be valuable.
- Manual Alternatives are Painful: "doing this manual copy-paste process every time you change something would count as cruel and unusual punishment" (cAtte_) underscores the tedium the tool aims to alleviate.
- Edge Cases and Error Handling: Some users pointed out potential issues and areas for improvement. "If a site without CSS is passed, it throws an error" (al_borland) illustrates the need for robust error handling.
- Handling Responsiveness and CSS Variables: Features that are missing "Would be cool if this also handled responsiveness." (lelandfe). "Since critical CSS's size matters so much, it might be worth giving an option to compile all of that down [CSS variables]." (lelandfe)
- Incompatibility Issues: "Not working in Safari. Says ‘done’ but Generated CSS box remains empty" (rado)
Alternatives and the Relevance of Critical CSS in the Modern Web
- Existing Tools and Their Maintenance: The discussion brought up existing critical CSS tools like Penthouse. "It's worth noting that penthouse's last release is a few weeks shy of 3 years ago" (robotfelix) points out the maintenance concerns.
- CDNs and HTTP/2 as Alternatives: Several users questioned the necessity of critical CSS in light of advancements in web technologies. "the prefetch attribute and other HTTP header hints, combined with proper CDN setups does almost the same" (larodi) suggests that other techniques can achieve similar results.
- Stylesheet Budgets: Consider a stylesheet budget instead. "But then, we always found it better to set a Stylesheet Budget and work with it." (Brajeshwar)
- Efficiency Concerns: Some argue that the benefits might be marginal compared to the drawbacks. "It might improve time to first paint by 10-20ms, but this is a webpage, not a first-person shooter. Besides, subsequent page loads will be slower." (kijin) expresses skepticism about the real-world impact.
- Zip Styles: "With tools such as PostCSS, and servers serving zipped styles across CDN, maintaining a single request to the styles; does it really benefit from breaking up the styles these days?" (Brajeshwar)
Content Security Policy (CSP) and Inline Styles
- CSP Incompatibility: A significant concern revolved around compatibility with CSPs. "Non-starter for all but hobby websites since it's incompatible with any content security policy disallowing inline style tags" (sublinear) highlights a major limitation.
- Nonce-Based Workarounds: Some users suggested using nonces as a workaround, however, this is also not without its drawbacks. "You could, but in the real world not every frontend dev has control over the CSP on the server allowing nonces to even be an option." (sublinear)
- Debate on the Merits of Disallowing Inline Styles : "content security policy disallowing inline style tags. Wait, why on earth is this a thing?" (pjc50)
Performance and Bloat
- Performance improvements should be measurable: "When I tested mine, I got the following... If every page adds 7KB, isn’t it wasteful—especially when all you need is a lightweight SPA or, better yet, more edge caching to reduce the carbon footprint? " (todotask2)
- Unnecessary data: "Why serve users unnecessary bloat? Mobile devices have limited battery life. It's not impossible to achieve lighting fast experience once you move away from shared hosting territory." (todotask2)
- Loader on Agency Site: "Kind of funny that the agency that made this has a loader on their site." (jer0me)
In summary, the discussion highlighted the potential usefulness of the critical CSS tool, particularly for automating a tedious process. However, it also raised concerns about its relevance in the age of CDNs and HTTP/2, compatibility with CSPs, and potential performance trade-offs. There's a strong current suggesting that modern techniques may negate the need for critical CSS in many cases.