DEV Community

Discussion on: Make the web fast again

peerreynders profile image
peerreynders • Edited on

And when I decided to switch my website from Eleventy to Astro

Hypothetically with that transition you should be able to go full astro components.

And looking at the package.json it looks like that's exactly what you did.

Moving forward are you going to stick with full vanilla or is there already a contender for future client side functionality?

  • React - popular choice especially considering the nature of the blog being focused on "web development" but bit weighty for a server-side routed platform.
  • Preact - good React stand-in however isn't taken seriously by the React community at large. So might as well pick something else?
  • SolidJS - Top pick for JSX enthusiasts while also being performant (my personal favorite and I'm not partial to JSX).
  • Svelte - Not bad either given that it has a larger support base than SolidJS. But there still is time…
  • Vue - Not sure about this one. My concern is that it brings too much potential capability to the table that ultimately is of little value in this particular use case, making something much more light weight a more reasonable choice.

As well as using semantic HTML elements that help define the correct website structure.

With that you already kind of stick out. There isn't the prevalent focus on JavaScript that can be observed in most places (which is a good thing). Though given your earlier focus on vanilla CSS I was a bit surprised to see Tailwind (I know I'm showing my bias here) in there.

Though thinking about it could make perfect sense to use it now (in the prototyping sense) to discover your design system which can then be later solidified and dropped in place.

So what can we do to fix this?

I'm constantly surprised at the variation that exists just within JPEG itself. Playing around with squoosh can be a bit of an eye opener.

I can't host multiple sizes and render them back on demand.

Okay… otherwise we would be talking about the srcset attribute here.

but I decided to go with Cloudflare images.

Did you have already other reasons to be with Cloudflare though?

Cloudflare can determine the best format for a user based on their request!

Okay… the site is statically generated.

I imagine for that to work, requests have to go through Cloudflare (given that the browser needs the correct metadata on the <img> tag in order to plan layout correctly and efficiently). That would imply that there is something like a server side include (SSI)/edge-side include (ESI) going on.

I would expect that their infrastructure is super-optimized but TANSTAAFL. It would be interesting to see how a DIY static srcset solution would compare to this.

Anyway I like these "holistic" web development treatments rather than the predominant "duct tape a web app with items you can find in your own home" articles.

Keep em' coming.

dailydevtips1 profile image
Chris Bongers Author

Hi Peer,

First of all thanks for this massive comment, appreciate it.

I do leverage Astro components and actually want to move to zero JavaScript.
I really don't need much rendering for my website.

To adhear to that I even created a static Twitter embed on Astro 🤯

Well let's hope people keep dropping JavaScript when it's not really needed and native HTML/CSS can help us out 💪

As for the images, yep totally crazy what we can actually do.
And I went with srcset + picture as you can read about in this article

I was already using cloudflare pages and workers for my website, so Images was on the list to try out.
I'm really, really surprised by how good and fairly priced it is.

Glad you enjoyed this article 🥳

peerreynders profile image

I even created a static Twitter embed on Astro

Oh, I'm aware.


Thread Thread
dailydevtips1 profile image
Chris Bongers Author

Oh nice!
I actually use it fully cached myself now 🤯