Loading Speed Optimization of Webpages and Advertisements

Table of Contents

1 Introduction
2 Loading MetaTag from website domain
3 Loading MetaTag asynchronous or deferred
4 Usage of "PreConnect" / "DNS Prefetching"
5 Delay the loading process for ad slots (LazyLoad)
6 Measuring changes by employing “Performance” API of web-browsers

Introduction

Advertising is an essential part of a website, naturally this can have an impact on the loading speed and load capacity of a website. Every kind of optimization can influence the website as well as the advertisements differently and have a positive or negative impact.

In order to assess the different benchmarks that can influence loading times on a website, we recommend measuring the following metrics:

First Contentful Paint (FCP)
- This metric shows the time it takes from entering the website URL, until the first content element is rendered on the website.
- Users that wait a long time (more than 3 seconds), in front of an empty white page, tend to stop the loading process and will not return.
- For more information on this metric click here.
Time to Interactive (TTI)
- This metric defines the time frame until the user can interact with the webpage for the first time.
- As soon as users see interactive content, they would like to interact with it. If the user has a negative experience with the website due to ‘shaking’ pictures, non responsive scrolling, or dysfunctional buttons etc. most likely the user won’t come back.
- More information to this metric you can find here.
Ad Impressions (Imps)
- This metric shows the amount of available advertisement impressions. Once an advertisement is visible, it's counted as one “impression”.
- If you have several ad slots on your webpage, it is helpful to evaluate every single slot. Changes on ad/placement/slot “A” could have an impact on ad/placement/slot “B”.
- The ad impressions have a direct impact on the possible revenue of a webpage. The more ad impressions are available, the more revenue is made by the website.
Viewability (View)
- This metric shows how long and how well an advertisement is visible. There are several standards for this metric. The most common is the viewable percentage from a specific slot for a certain amount of time (in seconds), in connection with the percental of ad impressions.
- As an example: Ad “A” reached 80 % of all ad impressions, with a visibility of 50 % for 2 seconds. → viewability 50%/2s:80%
- Viewability is one of the most important metrics for ad agencies and clients. Many advertisement campaigns are booked with a minimum viewability, required by its clients. Placements and websites that do not fulfill this requirement are not considered for delivery.

These 4 metrics are by far not the only ones that should be considered for an optimization. However, these are the best way to evaluate the possible revenue of your webpage. With direct references to the users and booked advertisements, changes to the websites’s revenue are visible quite early. Users and clients do not react as fast as the metrics towards any changes.

Below, we will introduce further optimizations and the possible impact on those 4 metrics explained above.

Please be aware: The following impacts are roughly standard values. Every webpage is individual. An optimization done on webpage A could have less of an impact on webpage B.

You can inform your account manager at Ströer anytime if you would like to see anything from this document in action. We will advise with the implementation and help you by analyzing as well as evaluating the results.

Loading MetaTag from website domain

FCP: +
Imps: +

Our documentation from MetaTag assumes, that you are loading the JavaScript file containing our tag manager from our CDN (Content Delivery Network) within your webpage. A different approach is to save this file on your server and load it from there.

The advantage you gain with this method is that your browser already knows the domain of your website and starts loading pictures and files from there. One single address check costs probably around 20-50 ms. On mobile devices this could even be up to 150 ms depending on the connection. This time can be saved for the browser.

If you choose to use this method, you have to make sure to refresh the MetaTag file on your server at least once every 24 h. In case there are any changes to the file, you will have to download it again. Changes can be done during office hours from 8 am to 8 pm. Matching and comparing the file can be restrained to that time frame. We recommend updating the file automatically per chron job.

A more complicated version of this process would be to merge the MetaTag file with a JavaScript file from your website, so-called “bundling”. Here, both files will be compiled into one big file. This saves time as the browser only has to call and interpret one file. The “bundle” also has to be updated once every 24 h. Implementing this integration is usually complicated due to the fact that this variation requires an automatic “build & Release” processes (e.g. Continuous Integration). We recommend contacting us before implementing this option.

Loading MetaTag asynchronous or deferred

FCP: +
TTI: +
Imps: -
View: -

When implementing our tag manager directly as a <script> tag in the <head> of a webpage (standard implementation), the script will block further loading/rendering of the website for about 50-80 ms. Some mobile devices could even take up to 150-200 ms.

The tag manager loads all further data and scripts asynchronous (non-blocking), therefor only the core of the website would be blocked.

By loading asynchronously, you can reduce the loading time, especially when the webpage is fairly small and contains a minimal amount of a scroll able content (picture galleries, browser games). The longer you delay loading MetaTag, the longer it lasts until the first advertisement is shown. Especially on webpages with a short time of stay, this can accumulate a massive impact on the amount of ad impressions and viewability by up to 20-30%.

Considering the technical implementation, it is important that all interface methods are available after fully loading the tag manager. Please make sure that interface methods are only called afterward.

var tagManager = document.createElement('script');
tagManager.src = "https://myURLtoTagManager.js";
tagManager.addEventListener('load', function(){
	SDG.Publisher.setZone('start');
	SDG.Publisher.registerSlot('banner','mybannerSlot');
	
});
document.head.appendChild(tagManager);

For further information regarding the SRA architecture, click here: https://stroeerdigitalgroup.atlassian.net/wiki/spaces/SDGPUBLIC/pages/3091234971

Usage of "PreConnect" / "DNS Prefetching"

Imps: +
View: +

In most modern browsers, when loading a website they allow delivering a list of Domains to load in parallel to the webpage, so called: ‘PreConnect’. By utilizing this technology, the browser has the information immediately and can start loading from these endpoints as soon as possible.

This saves about ~ 50 ms per address. The effect is clearly visible on mobile devices and works best when the user has a slow data connection.

The advertisement delivery requires a wide range of servers and services. Therefor, it is recommended to implement this variation on webpages, where an immediate delivery is required. Webpages with a short period of stay profit from “PreConnect” the most.

Here is a list of domains that are called the most when delivering advertisements and their respective functions:

https://cdn.stroeerdigitalgroup.de	TagManager origin and further files (still applies when self-hosting MetaTag)
https://cdn-a.yieldlove.com	Yieldlove HeaderBidder
js.adscale.de	Ströer SSP (SupplySidePlatform) CDN
ih.adscale.de	Ströer SSP UserMatching
https://tracking.m6r.eu	Ströer DMP (DataManagementPlatform)
https://securepubads.g.doubleclick.net	Google AdServer Domain
cdn.stroeerdigitalmedia.de	Ströer Advertising CDN

The implementation of this list is very simple and can be done in a HTML site directly. A detailed guide you can find here: Mozilla Developer Network.

Delay the loading process for ad slots (LazyLoad)

TTI: ++
Imps: --
View: ++

Generally speaking, all ad slots will be loaded from the ad server as fast as possible. The faster an ad slot is filled, the faster a website streams revenue. This assumption is based on old product models, where each ad delivery was paid, not taking into consideration the possible viewability from the customer. If ad slots are placed under the fold of the webpage and the user has to scroll to the slot, it can happen that the slot is filled with an advertisement, but the user will never see it (as he did not scroll that far).

Therefor, most agencies measure if the viewability requirements are met and a user at least had the possibility to view the advertisement. Advertisement deliveries that do not fulfill the requirement will not be paid. Which means the advertisement did not bring any revenue, but did create technical expenses for example loading the file, contacting the server etc.

We offer the possibility to load the ad slots at the moment the user is able to see the placement or is on the brink to scroll the slot into his view port. The ad server will only be contacted and delivers the advertisement when certain conditions are met.

This technique could impact your revenue massively - depending on the website itself. Webpages, that are monetized programmatically (meaning: automatic) and use viewability as a core selling point, profit the most. Webpages, that stream their revenue via elder product models of advertisement booking, could lose a big part of their revenue.

If you are interested in using this technology, please contact your account manager at Ströer. We will check the possible impact on your website's revenue and help you discover the best implementation strategies.

Measuring changes by employing “Performance” API of web-browsers

Most current browsers support an internal interface, through which the load performance based on fixed points (“performance.mark()” ) in JavaScript can be measured. Full documentation on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Performance

These fixed marks can be collected and subsequently reported by many analytics tools, like Google Analytics, Speedcurve or by web-based tools such as https://www.webpagetest.org/

You can also measure these marks with the Chrome Developer Tools, through the “Performance” tab.

Available marks	Description

Available marks	Description
`sdg_script-is-loaded_mt`	MetaTag is fully loaded and will now set up modules and start waiting for ad slots to be registered
`sdg_publisher-requests-an-ad_mt_SLOTNAME`	An ad slot with a given name was registered by the website. Can be used to measure how long it takes from starting to load the site, until the first ad slot is registered. On placeholder `SLOTNAME` you will find the name of the ad slot, that you registered with the JS command “SDG.Publisher.registerSlot()”
`sdg_targeting-phase-started_mt`	Consent of user is received, the TagManager will now start to enriche the impressions with user and website data and. In this process multiple external vendors will be contacted and data received. Internally this is called “Targeting Phase”.
`sdg_targeting-phase-ended_mt`	Targeting Phase has ended. Either all vendors have reported back in time, or have timed out.
`sdg_auction-phase-started_mt`	PreBid will now start to auction the impression to all available SSPs. Internally called “Auction Phase”.
`sdg_auction-phase-ended_mt`	Auction Phase has ended, either all SSPs have reported back with valid bids, or have timed out.
`sdg_ad-is-rendered_mt_SLOTNAME`	Ad ad slot with a given name has send back the creative source code to the browser. The ad might still be in the process of loading some assets, but the browser has received all data it needs to display an ad.