Good morning. I'm Tim. I work as a performance specialist at Akamai, but that's not what
my talk is about. And everybody here in this room has two things in common. I assume. First,
we love web performance. And two, how many of you think already about food? Because I'm
starving. And actually, if you don't know what to eat in the next days, when you're
here in Belgium, there is this waffle burger at a Belgian restaurant called Quick. And if
we are performance focused, Quick is also a nice way to get there. Now, next to my day job at
Akamai, I also run the largest scale modeling websites in the world. With 50,000 visitors a
day and 6 million pay juice a month. It's a bit too big for the talk of Tvetan earlier today. And
it's not only the largest scale modeling website in the world. It's also the fastest one. And this,
thank you. Thank you. Thank you. And this, despite the fact that I run banner advertising,
because normally banners means slow, slow, slow and annoying for your end users. And this talk is
all about how I switch to an open source ad server solution in order to give my users a better
privacy. And then also because I love performance, make sure that the performance is lightning fast.
Who remembers this day? One. Yes. GDPR. Correct. This was the this was when GDPR almost six years
ago was introduced. And if we travel back in times to six years ago, my website back then I used Google
AdSense and a few other ad serving solutions. And what is great about these solutions, you can just
add some JavaScript on your website, and you start earning money. That's it. Now, the problem is that
when you then you look at your waterfall that you see all these extra requests to third parties,
third parties calling third parties, fonts are downloaded, CSS, JavaScript, cookies are set,
tracking cookies, a lot of stuff happens. And this is a tool by my ex colleague Simon Herne,
request map that shows you the blue bar, the blue circle at the bottom is the actual website. And
then you have all these spiders crawling off additional requests going to additional things. And
from a privacy perspective, this is not ideal. And this is all you need to do to create a nice
banner of in this case, a hamburger. Now, when I started, this was how my website looked, I was
basically chillax. This was just how the web worked. This was the only way there was no different
way. This was just how the web worked. Now, in April 2018, one month before GTPR, I was like a
little bit in panic. I was hoping that the ad providers, not only Google AdSense, but all the
others would come up with a privacy friendly version for Europe, and would therefore also make
the websites faster. And in April, nothing was moving. So I looked for a plan B. And luckily,
I was able to find a plan B, which was open source. So revive open source ad server. And why did I
pick it? It was PHP based. My website was PHP. So it's good. It was already five years old. So it
was like not brand new. So it was already proven. And it had fairly stable releases at a regular
time. Today, this open source project is maintained by the Aqua platform by Eric and his team. They
also run a, of course, paid hosted version of the solution. But I use the download free version.
So what can you do very quickly? Everything you expect from an ad server. You can manage your
campaigns. People can sign up for to start adding ads on your website. Basically, everything which
is needed to send to serve ads on your website isn't there. And this is the result.
Remember before that spider going everywhere, everything hosted on the same domain. So from
my privacy perspective, I was back in chill X mode. Now, let's talk about performance.
Just by implementing the open source solution on my own systems also gave me some performance
gains by design. And the first is here revive itself does not require all these requests. So
that's the first thing. But as you can see, what is missing here are things like DNS lookups,
TCP connections as a cell handshakes in order to talk to different systems. So that basically means
that everything which is needed to serve that hamburger banner as soon as possible, it's not
delayed, which is good. The other benefit is we already talked about IMP before and JavaScript
performance. The library broadly compressed only 1.7 kilobytes. And typically the more bytes you
ship and JavaScript bytes you ship the less good for things like IMP first input delay total blocking
time. So it's a fairly small library. Other things I work for a CDN so I can run my website on the
CDN. So also use the image optimization services to make sure that I return modern formats like
AVIF or web P, et cetera. And then finally, last but not least, the fact that everything is under
my control also means that I fully control priorities things like fetch priority high,
fetch priority low, preload the order in the page. I fully control the order of things and I
decide do I want the banner to be served first or do I want the actual content to be served
to be served first. This of course assumes that your web server or your CDN listens to the priorities.
Now, this was the basics. Just setting up revive great for performance, great for privacy. Now,
good is not good enough. And in order to get these very, very good results, you still need to do a
little bit more. So let me explain you that. So we'll first look at LCP or largest contentful paint.
Just as an example, what is here the LCP element on this page should be fairly obvious.
It's the largest image on the screen, which is that nice helicopter, which I'm currently building.
Now, that's easy. Second one. What is the largest contentful paint element here?
Sorry, it's early and I'm hungry. It's actually as expected, the top one, because that's the biggest
image. Now, this is not what my users perceive as the LCP element, because they come for that small
picture of the car. Now, what is the problem? This image is late discovered. It's first needs
JavaScript to run, then it needs to do a request to a PHP server to know which ad to serve.
And then only the image will download. So it's late discovered, and it means it will come in
of potentially a few seconds later. So what is the best solution? Just send more bytes.
So my website is driven by a lot of contributors. So when somebody uploads a smaller image,
I basically nudge some other people like, Hey, do you have a bigger image of this one? So
my LCP gets better. Not only my LCP, people also like to watch nicer pictures as well. Now, that's
a plan A. That's the best. Now, I'm not sure, not always sure if it actually happens. So sometimes
I do have pages where the images are too small compared to the banner.
And what is my plan B? I call that a fast fallback banner. And it's exactly what it's doing. It's
fast. And it's a fallback. So in order to make it fast, you need to make sure that it's early
discovered. So it's just it becomes a standard image tag. So basically my PHP code, I check,
Hey, when I generate this page, I already know the size of the image I will embed.
Rather than using the JavaScript based version, which is slow, I fall back to a default image
variant. The downside is that from an ad perspective, I can no longer track revenue. I can no longer
know exactly which banner should be targeted. Yes or no. So I lose some functionality. But
typically on a website, you don't always sell all your potential banner locations. So you anyway
have some, for example, I sponsor certain scale modeling events, or I have some coffee mugs of
my website with internal banners. So I can basically perfectly display these non revenue
generating banners, but keep performance. And here is then what you see is request number four
is the LCP element, which is requested quite soon rather than somewhere at the end.
That was for LCP, making sure that it's green under all conditions. Next is CLS,
CLS cumulative layout shift. And this is something everybody knows, typically on newspaper websites,
you're looking at a page, you're, you're reading the content and then suddenly bam, everything
goes down because the banners start loading. Now the solution for this is quite simple.
Just add a class, add a placeholder that the browser while rendering and painting everything
on the screen makes room for them already reserves the room for that nothing special.
Now, unfortunately, this was not good enough. Why not? Because in add systems, and in all
add systems, you can do you have basically the choice between user experience and making more
experience and making more money. And the top one is the fixed zone. You basically say, hey,
in this location, when it's a fixed zone, I only want to show banners which are this size 300 times
250 pixels. Now, you can also have flexible zones. You hear I can define, you know what I have my
design allows 300 pixels wide, but I can show bigger banners, smaller banners, a variety of things.
From a money perspective, this is better. Why the bigger the pool of ads you can potentially
serve to your users, typically the more money you make. The top one is better for
end user experience because you know, hey, my placeholder is always this, which one did I implement?
Of course, the top one. Now, a new problem arrived.
Page is rendered. You see the nice placeholders. And then suddenly this happens. Watch carefully.
Everything moves to the top. Which same browser would do this? Safari, Chrome, Firefox.
All browsers are same. However, ad blockers are not always same. Ad blockers assume
and assume that when you have advertising, they try to remove everything. So what happens is they
detect the ads on my website. Although they're privacy friendly, although they're fast,
they get removed. And you have this shift. So how do you solve that? Not blocking the ad blockers.
If my users want ad blockers, that's fine. That's okay. If they are free to use that.
This solution is to add an additional container around your ad. So this is the EINS. That's the ad.
Make sure that the container has the placeholders. And then when the ad blocker arrives and deletes
the ad, the container is left. So no layout shifts.
And this is really my mantra. CLS should really be reduced to zero. Every single pixel which moves
is in my view a bad thing, an annoying thing. And CLS should really be reduced to zero.
So we covered privacy. We covered performance. Now let's look at the revenue perspective.
Because in the end, the revenue part is I need the money to fund the hundreds of dollars which
are paid every month on the server cost. And when I started, it was easier. I used ad
sanctions.
task
steamed
student
stock
of
a
sort
of
So, banners does not mean bad.
You can implement it in a positive way.
If you have full control with open source, you are perfectly able to do that.
And it's also possible to make that lightning fast.
Now, I didn't get any money for this.
So, I'm really dreaming already about this burger later on today.
There is just one small problem.
It's Robin.
Robin, do your hand up.
Robin is the next speaker.
Robin is my colleague.
And we also call him Mr. Quick, so the Quick restaurant, but he normally works on the
HTTP protocol and he hates it when I call him Mr. Quick with the K.
He stands between us.
So, Robin, please talk fast so we can all go have a great lunch.
Are there any questions?
Yes.
Thank you.
So, I've heard that your scale mates is very popular in various continents.
So, for the answer, do you need to get practical somewhere in the continent or they're all
like...
Yeah, okay.
Yeah.
So, the question is, so that scale mates, my website is visited by people across the globe,
here in Belgium, in Australia, Japan, Brazil, everywhere the globe.
And the question was, if I need to have a replicated setup, so I use a CDN that gives
you a replication for static content images, etc.
So, that's a given.
But I actually also replicate my servers across the globe, not all.
I have, for example, servers in Australia, in Japan, to make sure that when a user does
a database call or does a search, that they get an instant response.
Thank you for the question.
We have a few more minutes, I think, for questions.
Two minutes.
Otherwise, two minutes.
Any additional questions?
Yes, they're true.
Yes, but the...
Yeah, great question.
So, the question is, in a revive, which ad providers can I introduce?
In theory, in revive, you could also make a non-privacy friendly version, because you
can also say, hey, in case I don't have any direct inventory, let's say, for example,
with a scale modeling company, you can also decide to fall back to, for example, adsense
or anything else.
And it's just the only thing you need to do is add that their JavaScript and your advertiser
code, so in theory, you could integrate any SSP.
But then you're back into the same game, then you're...
You have a performance impact and privacy impact.
So, revive allows you, potentially, to do everything.
Does that answer your question?
Thank you.
There was one question in the back as well.
Yeah.
So, the question is, which frameworks did I use or modules did I use to build a website
or just for the advertising?
Everything builds myself from scratch.
Yes.
Yes, I...
Yeah.
Yeah.
Everything builds from scratch.
The only thing I used was jQuery and I still use jQuery on some admin sites of the thing.
But yeah, saying jQuery in 2024 is not cool, but I'm okay with that.
Now, everything, yeah, PHP built from scratch.
Thanks for the question.
Any additional questions?
Robin can maybe already come up as the next speaker.
There was one question in the back.
Yes.
You can already switch my laptop, Robin.
Yes.
Just to look at it here, you are negotiating with these advertisers directly or...?
Yes, correct.
Yeah.
So, the question is...
Sorry?
They call some people or you can go to them?
Yeah.
So, the question is, how do I get in touch with these advertisers?
Because before, any banner would just show up.
So, Revive also has an API.
So, on my website, I basically have what you can sign up.
You can create an account and register as a business account.
And then I have a simplified interface where you can just upload the banners and you can
ask, hey, is it for all scales or for specific scales?
Are you targeting all scale models or just the aircraft ones or the shipbuilders?
So, I have a simplified interface and they just sign up themselves.
Thank you for that question.
Yes.
So, the whole question, have you had to deal with bad ads and bad actors?
Yes and no.
So, the question was, do I have to deal with bad ads and bad actors?
Because I also have a shop database.
And I basically already have a database of domains which are from scale modeling companies.
So, when somebody signs up with a Revell, which is a brand, the e-domain, I basically
know that it's linked to a, I basically can give them some confidence.
If I'm unsure, they can already start creating their campaigns, but I can't, I still need
to enable them before they're actually published.
And people can't add JavaScript on the website.
And so, in Revive, you can add JavaScript banners, but I blocked that because JavaScript
is bad for performance.
Does that answer your question?
Thank you.
Thank you very much and have a great lunch.
Thank you.