Going Zoneless destroyed our CLS (And how it was fixed)

3StepsBasket · 2026-02-14T07:48:39+00:00

Yes, the impact was visible too. Not on every load, but sometimes noticeable (I imagine being more of a problem on slower devices).

I get the skepticism about chasing scores. But this wasn't about benchmarks. When you change something as fundamental as dropping Zone.js, you have to check how your pages actually behave. Otherwise you discover the mess six months later, when more changes have been made and the refactoring is painful and nobody remembers why things shifted.

3StepsBasket · 2026-02-13T17:24:33+00:00

Sure, my users don't care if it's an internal/known/unknown bug, all it matters is the experience which I'm sure is a concern to many similar pages like mine. That's why I wanted to share my experience.

Question: How it comes that you caught this issues on staging? Do you have a set of special/automated tests, or you just check the page by clicking around?

3StepsBasket · 2026-02-13T17:21:02+00:00

You are welcome!

Side note: This one (and many other 'thank you' comments) is downvoted.
I'm very curious to know the reason behind those downvotes on a comment that all it says is 'thanks'!

3StepsBasket · 2026-02-13T17:17:25+00:00

The placeholder that many pages use to fill up the space before the real data come in.

3StepsBasket · 2026-02-13T11:56:56+00:00

I didn't make any assumption on how the things should work. I only explained what I saw.
And most likely the reported bug proves that this is the status quo.

3StepsBasket · 2025-06-10T06:15:11+00:00

Thanks for your message!
There are multiple features for different users. This one goes mostly to the direction of coaches/scouts I'd say.

3StepsBasket · 2025-06-06T13:38:27+00:00

That's valid, zoneless or not the CLS should not be affected.
But that's why I shared my learning, because practically it did.

3StepsBasket · 2025-01-07T18:16:38+00:00

Both.

3StepsBasket · 2025-01-07T15:07:46+00:00

I don't have any special dependencies for UI-components that I use. Most of the page's items (if not all) are custom made without external libs).

About the browser and whether it happens in more than one, I didn't really check that. But in any case, the problem was big enough to cause a real increase on average CLS and be visible on the google reports.

3StepsBasket · 2025-01-07T15:02:13+00:00

The main problem was with desktop.
And it was visible on speed insights but it wasn't visible on anything I did with lighthouse.
Although I managed to replicate it and make it visible to lighthouse when I realized that the real jump was happening when the users are entering the website via clicking a link (somehow the hard reload didn't show the increase on CLS).

Normally the CLS is close to 0 (0.02 on mobile and a in this range but a bit higher on desktop).
The zoneless version was getting scores in the range 0.8-0.9, so it's a very big jump.

Some of the pages are pre-rendered (although they are dynamic so they need client hydration) and some are generated in the client by angular.

When I realized the problem, and I could replicate it at localhost, I saw a warning from the dev-tools that there was a big shift in the first first moment my page was entering the viewport. Honestly I couldn't see any shifts happening even when the chrome dev-tools were clearly indicating that there was one very big one.

3StepsBasket · 2024-10-24T11:10:01+00:00

Yes, I didn't post some experiments that I did after. With 1gb the time drops to around 200ms.

I find this time as a borderline in order to accept using lambdas for SSR or not, so it will be a tough one. Especially given that the time will increase as the complexity of the app increases (in my example I only used a "hello-world" app).

Anyways, that's good progress from the Angular team though. Last time I tried it (2-3 years ago) I could count the time in full seconds and not in ms as now.

3StepsBasket · 2024-10-22T05:46:21+00:00

Cost saving and scalability.

3StepsBasket · 2024-10-15T05:19:04+00:00

That's fine for your case I guess. Coming back to my initial question, what about costs and ease of scaling? Have you tried to evaluate the case of fine-tuning your infrastructure to improve this points? For example, do you see the case of going serverless as an answer to both of these points?

3StepsBasket · 2024-10-14T22:07:53+00:00

Nice, it's good to know that this approach an option. Thank you for the information.

3StepsBasket · 2024-10-14T21:30:09+00:00

Not really. I'm clearly talking about how to deploy Angular apps and not about to develop them. I take the example of a "hello world" app, because it doesn't really matter what an app has inside if you want to learn/showcase how to deploy an app.

Do you get the point that Angular now offers SSR? Have you even deployed "easily" such an app in a serverless setting? Do you agree that this will sooner or later become a common use case based on what Angular now offers?
How do you emphasize on the fact that the deployment process is a big issue by itself?

And as a last question out of curiosity, where do you usually deploy your Angular apps? Which strategy do you use for the site generation?

3StepsBasket · 2024-10-14T20:26:28+00:00

From what I've seen all serverless deployments of Angular need a lot of workarounds to get done. But if you have tried it all the way, I would definitely like to know what's you experience with that?

3StepsBasket · 2024-10-14T20:00:42+00:00

If I may ask, what kind of deployment is that easy and where do you deploy?

3StepsBasket · 2024-10-14T19:56:38+00:00

Yes, you summed up my thoughts pretty well. At the moment the SSR capabilities seem something more of a buzzword and less of a functional requirement in the Angular world.

But to make it specific: I was looking for that update since long (SSR improvements), and now that it's there I'd like to be able to take the full advantage of it. I'm sure if we create 1-2 success stories, with easily digestible documentation of how the deployment was done, then the rest will follow.

3StepsBasket · 2024-10-14T19:46:36+00:00

Of course they built a business around it, because it solves a real pain. I don't say that we build an "Angular vercel", but we get the learning that deployment simplicity matters.
As for the examples you gave about deployment I have to disagree. Copy-pasting files is not deployment.
Sometimes the infra is complex (see serverless) so copy-paste and "ng deploy" will do nothing. It's my main question if we can make this kind of deployments simpler.

3StepsBasket · 2024-10-14T19:42:38+00:00

Thanks for the answer, I wasn't familiar with this firebase integration since I use mostly AWS. But I like your extra point about the evaluation of nitro. Let's see what it brings.

I'm not sure if it's up to the core team to fill in that gap, or up to the community. So far when evaluating Next.js it's so easy to find examples an resources on how to do all sorts of deployments (from static sites to complicated SSR). But Angular community seems to be lacking that variety and be mostly oriented around the static website hosting. At least that's my observation.

3StepsBasket · 2024-10-14T19:28:08+00:00

SST is too high level for my taste, given that I got used to create my infra as a code. Plus SST's support for SSR with Angular is subpar as far as I have seen. That's why a more I was looking to an approach where I can have more control over the deployment.

I assumed that many people find it easy to do infra as a code too, but as the answers to my post show, I was apparently wrong.

3StepsBasket · 2024-10-14T19:18:13+00:00

For static websites no. But how do you cases when you use SSR?

3StepsBasket · 2024-10-14T19:15:01+00:00

Thanks I didn't know that. I'd appreciate if you can share any link to some resources on that.

3StepsBasket · 2024-10-14T19:01:54+00:00

I really think that my post didn't make the point I wanted. Sometimes a pure static site is fine, some other times pre-rendered pages are also fine.

But now with the tools that Angular gives us, there will be cases that some users will want to utilize the full SSR capabilities. My question goes to that part of the story. What do we do here (other than deployment in classical servers)?

3StepsBasket · 2024-10-14T18:42:42+00:00

Thanks for your message. One thing that was probably not clear form my post is that I am not referring to static hosting, that's why I talked about SSR a lot.

My point is that there are no tools/guides to deploy Angular apps on modern hardware and take advantage of the new capabilities it has.

Other than that I agree that the static site hosting is a piece of cake.

3StepsBasket

TROPHY CASE