Skip to main content

Optimize website loading speed

Advertising is an essential part of a website, naturally this can have an impact on the loading speed and load capacity of a website. Optimizing this can influence the website and advertisements differently, having 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, please visit developer.chrome.com.

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 on this metric, can be found on developer.chrome.com

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’ revenue are visible quite early. Users and clients do not react as fast as the metrics towards any changes.

Possible optimizations​

Please be aware: Every webpage is individual. An optimization done on webpage A could have less of an impact on webpage B.

Fell free to contact your account manager at Ströer, if you would like to see anything from this document in action. We will advise with the implementation and help you to evaluate the results.

Loading MetaTag from website domain​

FCP: ✔️ Imps: ✔️

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

The advantage gained is that a browser "knows" the domain of your website, already loading pictures and files from there. A domain address check for our CDN is avoided, resulting in 100-200 ms of the loading process saved. On slower mobile devices the advantage will be most prevalent.

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. We recommend updating the file automatically per chron job. A guide detailing this is available at Self-hosting MetaTag

note

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 with commandQueue​

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%.

To avoid sending commands to the TagManager before it finished loading, you can employ a commandQueue. All command inside this queue will only execute after TagManager is fully loaded.

<script>
  window.SDG = window.SDG || {};
  window.SDG.cmd = window.SDG.cmd || [];
  window.SDG.cmd.push(function() {
      SDG.Publisher.setZone('homepage')
      SDG.Publisher.setPageType('rubrik')
  })

  (function() {
      var channel = !!document.location.href.match(/sdgmt=preview/i) ? 'preview' : 'live';
      var script = document.createElement('script');
      script.type = 'text/javascript';
      
      script.async = true;
      script.setAttribute('fetchpriority', 'high');
      
      script.src = 'https://cdn.stroeerdigitalgroup.de/metatag/' + channel + '/beispielseite/metaTag.min.js';
      document.head.appendChild(script);
})();
</script>

Usage of "PreConnect" / "DNS Prefetching"​

Imps: ✔️ | View: ✔️

In modern browsers (excluding Safari), when loading a website, browsers can receive a list of domains to "Pre-Connect" to. Files served from these pre-connected domains, will download at once, instead of creating the connection in the first place.

This saves about ~ 150 - 300 ms per domain, favoring mobile devices or users with slow data connections especially.

Our services include a handful of critical and most often used domains, which benefit the most when you used with "pre-connect". A detailed guide for implementation can be found on Mozilla Developer Networks - X-DNS-Prefetch-Control.

DomainUsage
https://cdn.stroeerdigitalgroup.deTagManager origin
https://cdn-a.yieldlove.comYieldlove PreBid / HeaderBidder
https://js.adscale.deStröer Supply Side Platform
https://ih.adscale.deStröer SSP UserMatching
https://tracking.m6r.euStröer Data Management Platform
https://securepubads.g.doubleclick.netGoogle Ad Manager

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 generates 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 Mozilla Developer Network.

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.

Performance MarkDescription
sdg_script-is-loaded_mtMetaTag is fully loaded and will now set up modules and start waiting for ad slots to be registered
sdg_publisher-requests-an-ad_mt_SLOTNAMEAn 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_mtConsent 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.
sdg_targeting-phase-ended_mtTargeting Phase has ended. Either all vendors have reported back in time, or have timed out.
sdg_auction-phase-started_mtPreBid will now start to auction the impression to all available SSPs. Internally called “Auction Phase”.
sdg_auction-phase-ended_mtAuction Phase has ended, either all SSPs have reported back with valid bids, or have timed out.
sdg_ad-is-rendered_mt_SLOTNAMEAd 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.