Decades saved every month

How 500ms of page load speedups can ad(d) up

Jonas Peeck
Axel Springer Tech

--

NMT (“National Media Tech”) is the tech-division behind many of Axel Springer’s German News Media brands. As a part of the Axel Springer Group, it’s also a member of the Global Axel Springer Developer Community.

Carlos & René of the Ad Technology team are a duo you will remember when you see them. They could also be the leading roles in a TV show about an unlikely duo fighting crime par excellence. Carlos, the native South American, is a charismatic presence, who always seems to be in a sunny mood, while René (Carlos’ “first developer”) is quite a bit shorter than Carlos, but equally energetic, ready to crack a huge grin at any time and according to Carlos “a genius”.

Earlier this year the team (which also includes Johannes, Steffen, Oliver & Tobias) released a new version of their custom built, purely Vanilla JavaScript based ad-tech middleware to manage ad servers on 50+ websites from the Axel Springer universe. The 4.0 release of the “Adlib” (the name of their middleware) lead to page load speed ups of 500ms — 1000ms.

With around 11 billion ad impressions and 1.5 billion page impressions every month, 500ms of reduced page speeds add up to around 24 years (!!) of loading times saved every month.

With big impact comes big responsibility, but the trick the team used will surprise you…

The Nerds inside the Ad Agency

René, Carlos and the rest of the Ad Technology team used to be the nerds among a huge team of ad-specialists. Media Impact the inhouse ad company of Axel Springer is still responsible for directly selling digital advertisement space to companies for some of the biggest websites in Europe — and the team used to be right in the middle of that. As you can imagine, it’s a very sales-driven environment.

“We had to beg even for things like IntelliJ licenses or test devices” Carlos explains — he has been the team lead for 7 years now and was incredibly happy when his team was moved out of the inhouse ad agency into the very tech & product oriented NMT division of Axel Springer.

The move made sense. The team builds technology to manage the programmatic ads on over 50 different websites (including BILD.de, Welt.de, Sport1, Transfermarkt, finanzen.net & many more) — in a sense the polar opposite of the direct advertisement that the teams around them were selling at Media Impact.

A quick primer on programmatic advertisement

Programatic advertisement sounds complicated but is actually pretty simple (on a high level).

Remember when ads were still on large physical displays? (Pepperidge farm remembers!). You had these physical spaces, and when you paid money your advertisement poster was displayed there. If somebody else paid more money, you were probably kicked off and the more visible the billboard, the more expensive it was.

Online ads work in a similar, but in a highly automated way, called programmatic advertisement. If you run a website or an app, you can fill some of your screen space with ads. To offer this virtual space up to advertisers, you would usually use an ad server that you configure in a way that it knows what ads to display.

Adlib — managing ad space for 11 Billion monthly ad impressions

Logo of the “Adlib” library — the brain behind placing ads on 50+ websites throughout the Axel Springer universe

So what do you do when you manage the digital ad space for 50+ websites with billions of ad impressions? You naturally build a middlelayer to manage the complexity.

In the case of the Ad Technology team, that middlelayer is called Adlib and is a Vanilla JavaSript library that is loaded on every pageload — around 1.5 billion times every month.

With great traffic comes great responsibilities and as with anything in tech the question is never if it breaks, but when it breaks. René tells me that a few years ago the Adlib was serving a faulty ad that overwrote the brower’s document.write function. As a result all Axel Springer websites went blank for 2 hours. That’s millions of ad impressions missed.

The team obviously fixed the bug and made sure that in the worst case scenario faulty ads will only break the ads — not the entire site. But it’s a good example of how much responsiblity the team has.

Adlib 4.0 — dramatic speedups through tiny modules

The flip side of being able to cause a whiteout of Germany’s most popular websites is that any improvements to the Adlib directly benefits all of these big websites as well.

Where’s the drop? (Obvious Deadmau5 reference) — Charts showing the drop in page loads after deploying the beta of the Adlib 4.0

Earlier this year René lead a refactor of the Adlib and the team released version 4.0 . This was the version that on average made the websites load 500ms to 1000ms faster. A huge improvement.

The secret sauce? Heavy modulization.

“It used to take 2 network requests to get the Adlib. Today it’s around 50 network requests” René explains. The strategy used to be minimize the number of round-trips to the server, while today it’s rather about consuming only the data that’s needed. The team ended up bundling each of their core-functions of the Adlib into a separate file.

On top of that the Adlib 4.0 release included a cache-buster scheme that allowed the team to additionally only replace files on the CDN that had actually changed and have the rest served from Cache.

High cache performance, and economically loading only the functionality that’s needed. The difference was clearly noticeable.

A|B tests on the CDN & W3C Committee work

A team photo from pre-COVID-19 times: From left to right: Lars (in the back — close collaborator from another team), Tobias, Carlos, Johannes & Oliver (on the picture), Steffen and René

It’s not just the Adlib 4.0 that’s impressive about this team — it’s also the way that they constantly improve performance. CDN level A|B tests, using the inhouse IP range as the beta testing group, or contributing directly to the W3C committee on ad-technology — the Ad Technology team does some very impressive work.

So you will hear more from this team in the future — be sure to subscribe to the TechNewsletter to not miss these future stories.

Connect to Carlos & René:
Carlos on LinkedIn
René on LinkedIn

💼 Curious about working at Axel Springer?
👉🏻 Check out our open positions

— — —

Hi, I’m Jonas and I’m currently building up a Global Axel Springer Developer Community. Subscribe to our Weekly Tech Newsletter to get a fresh story like this every Monday and to receive details on how you can join our global developer community ✌🏻

Want me to help tell your story? Reach out to me 👇🏻

🚀 Subscribe to the Weekly Tech Newsletter

✉️ Get in touch with us

--

--

Jonas Peeck
Axel Springer Tech

Founder of uncloud - the first cloud platform that configures itself