Load the gpt.js script as soon as possible
Load the gpt.js script as the first one on the page or after the Consent Management Platform (CMP) script, because you need to first ensure the user is allowed using cookies to serve ads properly. That means CMP scripts and gpt.js should be the very first scripts you are loading on your site inside the head html element.
Load gpt asynchronously
Load the gpt.js script asynchronously to prevent it from blocking other resources on the page. This allows the rest of the page to render while the gpt.js loads in the background. You would like to use the async option in the script tag to start loading the gpt.js as quickly as possible.
Use browser caching
To utilize browser caching for caching gpt.js scripts you can set appropriate HTTP headers on the server hosting these resources. Use Cache-Control header to specify caching directives for the browser. Use Expires header to specify a date and time after which the specified resources should be considered stale and must be revalidated with the server.
Use preconnect and dns-prefetch
You can use preconnect technology to start connecting to needed website to load scripts faster, but some browsers do not support preconnect yet and you should use dns-prefetch, here’s the example for gpt.js:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example preconnect and dns-prefetch for gpt.js</title>
<link rel="dns-prefetch" href="https://securepubads.g.doubleclick.net" />
<link rel="preconnect" href="https://securepubads.g.doubleclick.net" />
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
</head>
<body>
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(() => {
// Request and render an ad for the "banner-ad" slot.
googletag.display("banner-ad");
});
</script>
</body>
</html>
Use preload if gpt.js is loaded by different provider or third-party code
Using preload starts downloading gpt.js from the official google publisher tags website immediately. This is important if you are not in direct control of when and how GPT is loaded. For example when using third-party ads scripts which load GPT on your behalf.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example of preload for gpt.js from different provider</title>
<link rel="dns-prefetch" href="https://securepubads.g.doubleclick.net" />
<link rel="preconnect" href="https://securepubads.g.doubleclick.net" />
<link rel="preload" href="https://securepubads.g.doubleclick.net/tag/js/gpt.js" as="script" />
<script async src="https://another.gpt.provider/gpt.js"></script>
</head>
<body>
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(() => {
// Request and render an ad for the "banner-ad" slot.
googletag.display("banner-ad");
});
</script>
</body>
</html>
Load slots that are displayed on visible part of the page first, the rest should be lazy loaded
When you’re visiting your site and for example have 1 banner at the top of the page and all other banners that are displayed after news or articles, but you need to scroll the page to actually see them - consider loading the top banner slot in the head and for all other banner slots consider using lazy loading. This speeds up page loading and you are not wasting user’s time for loading additional ads until they actually need to see them and instead you present a fully rendered page to the user faster. You should load additional ads when the user scrolls the page and approaches the viewport area of the site where a certain ad will be visible. That means starting to load the ad slot slightly before the user scrolls to that area and sees the content.
Here is an example of defining the banner-top ad slot inside head script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example defining banner-top ad slot</title>
<link rel="dns-prefetch" href="https://securepubads.g.doubleclick.net" />
<link rel="preconnect" href="https://securepubads.g.doubleclick.net" />
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(() => {
// Define the "banner-top" ad slot
var adUnitPath = "/123456/bannerTop";
var size = [728, 90];
var divId = "banner-top";
googletag.defineSlot(adUnitPath, size, bannerTop).addService(googletag.pubads());
googletag.enableServices();
});
</script>
</head>
<body>
<div id="banner-top"></div>
<script>
googletag.cmd.push(() => {
// Request and render an ad for the "banner-top" slot.
googletag.display("banner-top");
});
</script>
</body>
</html>
Similarly you can define slots that are not visible on the page yet and when the user scrolls to their view area you would need to execute googletag.display command on them.
Use Single Request Architecture (SRA)
When working with multiple ad slots you might want to reduce the number of network requests made to google services, and also make sure that there won’t be two ads on page that would compete with each other. By default if SRA is enabled it will fetch all ad slots that were defined in the head element when you perform googletag.display call. However SRA only supports a batch requesting 30 ad slots, so you would need to split them in separate batches to load all slots successfully and also it would be a good idea not to define more than 30 ad slots inside the head element of your application.
This is an example from GPT docs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Single Request Architecture Example</title>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || { cmd: [] };
var adSlot1, adSlot2;
googletag.cmd.push(function () {
// Define ad slot 1.
adSlot1 = googletag.defineSlot("/6355419/Travel/Europe/France", [728, 90], "banner-ad-1").addService(googletag.pubads());
// Define and configure ad slot 2.
adSlot2 = googletag.defineSlot("/6355419/Travel/Europe/France", [728, 90], "banner-ad-2").setTargeting("test", "privacy").addService(googletag.pubads());
// Enable SRA and services.
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
</head>
<body>
<div id="banner-ad-1" style="width: 728px; height: 90px;"></div>
<div id="banner-ad-2" style="width: 728px; height: 90px;"></div>
<script>
googletag.cmd.push(function () {
// This call to display requests both ad slots with all
// configured targeting.
googletag.display(adSlot1);
});
</script>
</body>
</html>
Catch Metrics is the leading solution to help solve ad stack performance problems.Get in touchto learn more from our experts