> Better Lighthouse scores What does that mean? What is Lighthouse?
[deleted]
Critical CSS
51–60 of 124 posts
Re: Critical CSS
#52> Better Lighthouse scores What does that mean? What is Lighthouse?
The performance audit in Chrome.
Re: Critical CSS
#53Is there any limit etc. It gives an error on my first try.
{"error":true,"name":"Error","message":"css should not be empty","stack":"Error: css should not be empty\n at module.exports (/usr/src/app/node_modules/penthouse/lib/index.js:206:14)\n at file:///usr/src/app/server.js:153:31\n at process.processTicksAndRejections (node:internal/process/task_queues:95:5)"}
Re: Critical CSS
#54Feels like premature optimisation to me. Are there really cases where the CSS is so complex or the page loads so many resources that this effort is worthwhile? Maybe with the most complex web apps, I guess, but for almost all cases, I would have thought writing clean CSS, HTML, and JavaScript would render this unnecessary or even counterproductive.
Oh my god, yes, this is useful. I do some freelance dev work for a small marketing agency, and I inherit a lot of Wordpress sites that show all the hallmarks of passing through multiple developers/agencies over the years, and the CSS and Javascript are *always* crufty with years of accumulated bad practices. I'm eager to try this.
Re: Critical CSS
#55When I tested mine, I got the following: Built on Astro web framework HTML: 27.52KB uncompressed (6.10KB compressed) JS: Critical CSS: 57KB uncompressed (7KB compressed) — tested using this site for performance analysis. In comparison, many similar sites range from 100KB (uncompressed) to as much as 1MB. The thing is, I can build clean HTML with no inline CSS or JavaScript. I also added resource hints (not Early Hint…
Yeah, it's a neat trick but kinda pointless. In a world with CDNs and HTTP/2, all this does is waste bandwidth in order to look slightly better in artificial benchmarks. 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.
Imagine this: before serving the page, a filter seeks out the critical css, inserts it, and removes all css links. Greatly improving page load times and reducing CDN loads.
Edit: on second reading, it seems like you are saying when another page from the same server with the same style loads again, the css would have to be reloaded and This increases bandwidth in cases where a site visitor loads multiple pages. So yes it is optimum for conditions where the referrer is external to the site.
Re: Critical CSS
#56This comes in handy with the bloated codebase I am running from, bravo.
My problem is the codebase I am running towards. I am making headway with scoped CSS, however, Firefox does not have it yet. I keep checking in on Firefox to see when that is going to support scoped CSS but I have not been able to determine what the hold up is.
Does anyone have scoped CSS working with a workaround or compromise for Firefox?
Re: Critical CSS
#57Nice one. Would be cool if this also handled responsiveness. The need to dedupe responsive critical styles has made me resort to manually editing all critical stylesheets I've ever made. I also see that this brings in CSS variable definitions (sorry, ~ custom properties ~) and things like that. Since critical CSS's size matters so much, it might be worth giving an option to compile all of that down. > Place your orig…
Wouldn't this be blocked by a CSP that doesn't allow unsafe-inline?
[deleted]
Re: Critical CSS
#58Nice one. Would be cool if this also handled responsiveness. The need to dedupe responsive critical styles has made me resort to manually editing all critical stylesheets I've ever made. I also see that this brings in CSS variable definitions (sorry, ~ custom properties ~) and things like that. Since critical CSS's size matters so much, it might be worth giving an option to compile all of that down. > Place your orig…
the prefetch attribute and other HTTP header hints, combined with proper CDN setups does almost the same. and would not require critical CSS to be nonstop rebuilt as the page develops. a properly configured CF is insanely fast.
[deleted]
Re: Critical CSS
#59Seems to only work if the CSS is an external file.
(Not embedded within the HEAD/STYLE tag)
Re: Critical CSS
#60Wordpress plugins and builders like Divi and Elementor has been inserting all css for every page part or component anywhere in the body for years. I hate it. But, thas this critical css means they have beeing doing it right all along?
No, having an external file makes it cacheable locally. If every new page loads some of the same css again and again, it's a waste of bandwith. You should already have the stylesheet on your computer by then.
thank you.
anybody can tell me why I got two downvotes from my question?