Transforming Lar's E-commerce with Next.js and Vercel for Speed

[Music] [Applause] Hello everyone. I'm Thomas Jansson, soft

principal software engineer at Lar. Uh I'm really excited to be here today and honored to be among so many great

speakers. And over the next 20 minutes, I will talk about our transformation that we made at Airep. Going from a

bloated, slow air commerce site to a fast simplified ecommerce setup powered by Nex.js and Versell. This is not just

a story about technology. It's also about performance, simplicity, iteration velocity, and delivering value

to actual customers in all our countries. first give a quick road map what we're

going to talk about today. uh where did we all start doing this and then I would talk about where did we end up and and

how how did it impact both the commercial side of it and also uh performance

and I also show you a little bit more on the process and technology changes we made and and how that's uh played out.

Lastly, I'm going to show you what we think we will be doing the next couple of months, I would say.

So, let's start. Since we're in the US, I assume that most of you have not heard about Lar.

Uh, so we give a quick introduction about Lar to understand the scale of the challenge and also the impact of the

improvements that we have made. You can think of as the best buyer of the Nordics.

We are the largest electronic retailer in the Nordic region, meaning Sweden, Norway, Denmark, and Finland. We have

about 27% of the markets, so I think a pretty large market share. We have more than 400 physical stores as

well. So, the store employees are among our best customers when it comes to the e-commerce site as well because we can

get great feedback from them. We have some franchise in Greenland, Far Islands, and uh Den, Iceland as well.

The e-commerce site is powering only the four core countries. We have around 7 billion edge requests

every single month or more than that as I checked last uh last night. From that we get around 330,000 orders which is

equal to 10 orders almost uh every minute. And with this kind of volume performance

is crucial. If we want to keep the number one spot in in our market, we have to have great performance and that

was not the case. So let's see where we all started. So what you see on the screen now, this

was actually our starting point. I have not like masked out the price or the description on this uh carousel

when the product carousel uh loaded in our old uh ecommerce site. This what could have what you saw and that could

be for like 20 seconds or more and that not acceptable for for any e-commerce site I would argue especially

if they're supposed to be the leader in your market. And this is a huge conversation, a

conversion killer. And our customers were not shy about telling us about it. We saw comments on

Reddit almost every single month. There were comments about this site is so slow, so I ended up going somewhere

else. We know even had internal employees working in the store saying, "Oh, I feel your pain." And and that's

not where you want to go. So we know that we have to act and do something about it.

So fast forward to today, what you see now is the core by vitals as seen from Versel speed insight report

that we have. We are now on almost a perfect 100 on mobile with only 99 but we want to get there. If we go to

desktop we are have a score of 100 but 70% of our traffic is from mobile. So we focus on mobile when look at the

performance scores but this is not just about like performance and and like for our our

developers to be super proud of what we delivered. This has real commercial improvements as well. We see better

engagement, better conversions and a smoother experience overall. Looking at the commercial metrics the

last 12 months we are seeing that they have been better than the previous 12 months every like month by month

comparison I wouldn't say like we have done are the cost for everything but I do think the

faster uh e-commerce site has definitely helped and the most important part of that just

on making it fast making it fast and smooth for the customers really up. Here's where the difference will become

really clear. I'm going to play you three video clip at the same time. On the left side, you have the site as it

was when we started and in the middle we have it running on Nex.js on Versel, but we have a CDN on top of it. And then the

last one to the right is um on Versel without a CDN. So I started video and as you can see

like the first one nothing basically happens when you click it start loading and loading and waiting. The one in the

middle is definitely the faster not still like super fast but faster is some some delay when it comes to images.

And the last one is fast. I think it that the last one is probably finished soon. This is basically from a

product discovery adding something to a cart and going to the checkout. And the last one is to finish now I think. And

that took about 30 seconds for that one. The first one takes 2 minutes. So that's a quite huge improvement when

it comes to to customer experience and and how how easy we can make it for our customers.

So how much did we improve? Look at the core vitals we have made made a 100% improvement on on layout

shift and that I think should be any e-commerce site should strive to have that basically meaning zero layout shift

uh because you should server side render most of the content to get that but we also improved the imp with 64% so the

application now really responds to the user when it clicks this link or this button instead of having a spinner for

20 Then we also have the LCP which we improved by 51%. So now you get also a

much faster loading time of most of the content on the page. The last metric the 75% is based on the previous slide. So

the 75% improvement on this product discovery and going to the checkout. That's huge.

And and also our customers definitely notice it. I I haven't I haven't read any bad Reddit post the last year. So I

think it's we're doing quite well right now. The technical upgrade we did was super

important but a lot lot of things that unlocked everything we see was also changing how

we worked with all this. So look at some of the process changes we made uh enabled by NexJSL.

Before when we had the old site everything we did required detailed specifications

as it re reviewed it was bounced between requirement engineers to designers to developers to stakeholders and back down

back to to developers again and and on and on and that slows us down quite a lot when it comes to process. So we

flipped things around quite a lot. Now we focus on getting things live as fast as possible with minimal uh friction.

Of course we do have some tickets. I say we don't do anything but we try to minimize like how much uh specification

we really need and instead try to get feedback on actual running code and the technology we have now makes it

possible to do that quite easy. So we created a much faster feedback loop also with a much more collaboration and that

is frankly also more fun because now we're actually working together and and not only

passing GR tickets back and forth and the result was just more speed in development also better performance and

higher quality. Another thing is iteration velocity for me this is much more important than

automated test. I'm not saying we don't do testing. We do write test quite a lot of test unit test and end to end test

using playright. But we don't treat test coverage as a goal

because it doesn't make sense at least in in my view. Iteration velocity on hand is king when it comes to this

because what we want to have is the feedback from our stakeholders and from our customers as fast as possible.

And also like testing is good. It's good to have for regression, but when you're doing new things, you actually write

tests for what you know and what you think or how do you think the customer will use your product, but you don't

catch what they customers really do because they they will like misbehave and do crazy things with your

applications. So that's also why it's so much more important to have high iteration velocity because then you can

act on the customer behavior rather than the test the test and it's especially important when it

comes to front end because front end in my opinion is slightly more fragile especially if you look in the end to end

perspective because everything in the back end can also uh can change and that will impact the front end

and iteration velocity also gives us quite a lot of feedback and there's a really good positive feedback loop here

because now we have this high velocity. We are confident that we can deploy and every time we deploy we get even more

confidence in our deployment process. So we deploy even more and that's super good.

But it's not like I'm not trying to chase these high deployment numbers or anything. For me it's about removing

fear. any developer in my team should be confident that they can deploy almost

any time during the day and we optimize for that. So we have a fast and very safe deploys and then we

also and have the instant roll back feature. We haven't used that a lot but we have but that also give you

confidence that you can roll back if you have to and this has led to much better outcomes

at least for our customers as I see it. And if you look back for the previous years when we had the black week and

black Friday, we had a really long code freeze period. Last year, I think I deployed like four,

five times during Black Friday because that's how confident we are in our process now.

And for us, there are three big uh enablers when it comes to this. First, we have Nex.js.

Next.js to me is sort of make it possible to create application features without having to think about how is

this application being built and webpack and all those kind of things like the JavaScript ecosystem has been way too

complex for quite some time and having these same defaults makes it so much easier to to work fast.

Versel does the same thing as JS in my opinion but on the infrastructure level. Now I don't have to think about how to

scale and how to set up like the build pipelines etc. That's just there for me and it works very very well.

And the last thing that we have used a lot is feature flags. We are using launch darkly that have really great

integration with edge config on cell. So then we can re read all the flags in the middleware and generate uh segments. So

we can create static pages for all our pages basically. And this also enables our internal stakeholders to try out

features way before we give it to our customers. So we sometimes ship unfinished code to production just to be

able to test it in production because our test data is not always as good as it should be. So being able to put to

production unfinished code so we can test it is gives us so much value and combination of this is scalable both

speed safety and the confidence we need to iterate super fast in an enterprise environment.

I will never forget that one of my state stakeholders told me this used takes seven weeks now it takes one day. I'm

not sure like the actual metrics still uh are accurate, but that's what he said. And this is like with 1/4th of the

team that we had before. So now we have only like I think with five developers at the moment because one on maternity

leave, but we're much smaller team than we had before and also have dropped a lot of the process. So we just get

faster, we get leaner and also more focused and much more effective. And e-commerce or where in our industry is a

really low margin industry. So for us everything we can save is awesome. So this is a huge commercial win.

So look at the technology changes that we made and on a high level the thing we actually did was simplify things.

That's that's basically we try to remove as much complexity and and try to make things just simpler.

So let's walk through how the architecture evolved over the time from the old solution to the new one running

only on next. In the beginning, we had an Angular application running in Kubernetes and then we also had Apollo

as a query layer and uh yeah and that's like the technology for that might sound like a good technology solution to

create a SPA application. I don't think that's a right tool for e-commerce site where you want to have server side

rendered pages etc. So we went to Nex.js and have that on Versel. We still had an external CDN on top in the beginning

mainly to be able to route to the old and new solution so we could have an AB test during the rollout and also because

like the checkout process was also in the old solution for quite some time. Uh but after a while when we were confident

and we had implemented everything we removed also the external CDN and now the architecture on the right

hand side is much more simpler. We have like decreased our Kubernetes cluster size a lot and we don't really think too

much about operations on our cell. It just works and the application now serves readym made HTML from the next.js

and this gives us much better performance. This part here is quite interesting as I

see it. I was very surprised and was quite satisfying when we removed the external CDN. I think you can guess when

we removed the CDN by looking at this graph. The improvement from time to first bite

when we dropped the external CDN was massive. I did not I did not expect it to be this

big. I expected to have an improvement for sure because it is an extra network step we need to make through an external

CDN. But what we saw was 40% decrease in time to first bite. And we also get a much more consistent

uh time to first bite with less variation. And I mean this is so important for us

because time to first bite in my opinion also impact imp. So this was the last thing that actually

pushed us over to uh green and all core vitals. So what next for us going forward like

we done a lot of work now and we we are super happy what we have but I don't think we are done. So a couple of areas

that we're going to focus on going forward. The next evolution for us is slicing up

the application. As you saw during the keynote today, uh there were presentation about micro front ends. We

are definitely going to go there uh and and create more structure in our application and this will enable us also

to have more parallel development which would be another way for us to speed up development because we can onboard more

teams to this. The way we do it is like multisone approach with nejs but we will most likely leverage the versel micro

front ends because that's native in rescell and we get a lot of tooling support in the rescell toolbar.

The next thing we'll focus on is part of rendering and caching. We're just waiting for it to be stable. Been

waiting for quite some time now. I hope it will be soon. For us, we are have a push for personalization going forward

and having part rendering will definitely help us when it comes to personalized content and still serving

static content at the same time to with fast responses to our customers. And combining this with use cache directive

as the luba talked about earlier will be like a huge simplification for us compared to what we're doing now. We can

still do this today, but it requires some more complexity than I would like to to manage.

So that's the story so far. We moved from a slow complex stack to something leaner, faster, and easier to maintain.

And we're already seeing the commercial and also the customer benefits from what we have done.

What I hope you take away is that simplicity scales. when the right with the right tools and

the right mindsets, you can move fast even in a large enterprise organization. And there's still more for us to

explore. Of course, I talked about personalization through part rendering and also how we're going to slice

creating microrends and and streaming with also part of rendering. But now we're much more better positioned to do

all these kind of things uh with confidence. And if you are considering a similar

transformation, try to find something where you can lean into the defaults and hopefully those are sensible defaults

which I think next.js ever and has and prioritize iteration speed and don't be afraid to remove as much complexity as

you can not just add more and more layers. Thanks so much for your time. Uh it's

been a real pleasure. If you have any questions, don't hesitate to grab me outside here and I can answer anything

hopefully. Thank you. [Music] [Applause]