#yes, well `use` the newer thing, for
stuck path
I think I have partly explained it; I added another css file (a smaller one), and it seems to like 150ms as a number i.e. it's made up but there's some truth to it.
When it visits the page, it downloads the css at the same time as the html, not synchronously but the dom has to wait for the css to finish so there is blocking.
dom parsing continues while css downloads (parallel)
cssom construction waits for css to finish downloading
render tree can't be built until both dom and cssom are ready
first paint is blocked until render tree exists
tldr, I think I have to include the critical css in the html, if the css is larger than the html itself
hearty nova
yeah, i think the principle is that everything above the fold should be embedded in the HTML itself
does unlighthouse have an estimation for savings?
hearty nova
everything that's on the first view prior to the page scrolling
everything that fits on the screen
stuck path
oh because after scroll it's rerendering?
omg i am a moron, so i could have abovethefoldcss which literally gets injected into my gohtml
hearty nova
yeah, it will optimistically load/paint only what's pertinent to the initial view where possible
stuck path
that's a hassle and a half omg
hearty nova
but it's ... pretty much impossible or impractical depending on the nature of the site
in your specific case i think you can do it
if nothing in view upon loading relies on any libraries (preact)
stuck path
preact is just the admin panel stuff
so that can do whatever
but yeah hmm i could make a readfile script which injects... what a pain omg
stuck path
bloats the html and makes things bigger because you get duplicates, and apparently that's meant to be faster lol
hearty nova
well-formed, well-designed CSS is not local to any part of the page. you shouldn't be ---
exactly
stuck path
at least i understand the concept, this could be a blog post of mine
hearty nova
and it's probably true if you're counting ms to first render / interactivity
stuck path
how i wasted an entire weekend on 3 lines of css
hearty nova
😁
stuck path
yeah i think so
hearty nova
CSS moment
stuck path
css has been some of the harder things lol
hearty nova
it's a pain for sure. it's much easier to do everything now than it was when i started 15 years ago, but also things are a lot more complicated to chase that last 5%
stuck path
and just to clarify, if the css is smaller than the html in size, it's not needed? because they download at the same time? or not because it will only start the css after the html has got so far
yeah i hear you
wait i remember we import css at the top, not bottom, for a reason... so it obviously doesn't just wait until the end
hearty nova
yeah, it's going to depend on network conditions too
the HTML is itself streamed; once the browser hits the links, it will start pulling CSS. but adverse network conditions can make the latency higher than the actual time to download the files regardless of their respective sizes
stuck path
i think because my site is fairly minimal it doesn't need to be injected, because the css is small g
yeah i get you
stuck path
that's what i think too
when built it loads in like 12-20ms now lol
locally that is but still
hearty nova
i wonder what the optimal choices are with respect to caching as well
stuck path
that I have solved
hearty nova
i.e. for successive page loads, when the browser already has the CSS, the inlined styles are only a burden
stuck path
ohh i get you
hearty nova
my GPU keeps crashing and taking my PC with it ❌
stuck path
there's a logical flaw in that i think; I thought the same
oh nooo
you visit the home page --> blog post. that's not the same as --> go straight to blog post
hearty nova
exactly
i wonder if anyone is tracking session & sending pages with/without inline based on that
stuck path
oh go away! jk
hearty nova
everything should be an SPA in 2025 anyway 👼
stuck path
not more work for me lolol
hearty nova
you know what though?
hearty nova
i don't know what's being a/b tested right now with google or what you'll see if you load it up right now
but i have been phenomenally impressed with how they've implemented the View Transitions API
switching between search -> images -> AI
and it's all buttery smooth and very fast
stuck path
oh I see, i haven't seen that
i have seen some tricks sites do and copied those tricks lol
but i have the advantage im on a newer stack than some of these sites
hearty nova
yeah, google moment. they roll things out slowly, they revoke them, they A/B/C/D/E test everything, yadda yadda
when they were developing View Transitions i found that all of the examples were terrible and bad and i thought it was a dead end
but i think i'm eating crow on that one, and aside from being able to do the very coolest stuff, it might be a perfectly great solution
stuck path
must be nice to have a huge budget
haha
because what you described sounds like the result of a big budget. correct me if I am wrong
stuck path
this css issue bugs me because it seems like a disgusting thing to have to do
hearty nova
going from the simple idea of "we want page transitions", to devising a working standard for describing them, to making intricately optimized implementations, to having the browser/engineering share to get it adopted
yeah, it's definitely a hack
stuck path
going from the simple idea of "we want page transitions", to devising a working ...
yeah that is incredible!
hearty nova
sloppily reduplicating CSS because bandwidth is fast and the speed of light is slow
almost seems silly
but if it works, it works
stuck path
my beautiful html
my baby! lol
i got the editor looking great though i think. added a table you can resize and do stuff with
hearty nova
very cool
hearty nova
very cool
i really like how you've got this looking
& yeah, i think i'm gonna go with your idea of keeping 2 in parallel
hearty nova
optimize my current one a little to hunt for react gigs
stuck path
that makes a lot of sense, nextjs is super popular especially
hearty nova
build something artsy fartsy for the ad agency play
i don't know how i'll deliver them exactly
i have the domain https://ezm.ac/
stuck path
i think the trick is to just build stuff and have some kind of goal in the back of your head then refine it later
ohh nice!!
hearty nova
i think the trick is to just build stuff and have some kind of goal in the back ...
that's for sure
everything is a cumulative effort
moving in the general direction of your goals is always virtuous
stuck path
i set out with the idea of a minimalist portfolio and then "fast" lol
yeah
maybe worth looking to see waht the competition does too idk
hearty nova
i don't know what % of people applying to these jobs even have websites, or what % of hiring teams even care to look
stuck path
makes me wonder too
that's why i wanted this guy to check my portfolio lol #💠professionals-hangout message
ceos care i think. someone interviewed me and was asking about my project
hearty nova
i haven't had to formally apply to jobs in almost 10 years
always just thru my network
my personaly website absolutely got me jobs then
hearty nova
yeah, i wish my open source projects were better
i think my code quality is alright but none of them have any traction
i need to push out an npm package of some kind
hearty nova
that too
stuck path
i am definitely gonna write a post on this because i thought of something else