Lazy loading means that your ads will load based on if the ad is visible in the device’s viewport. This usually depends on a user scrolling through a site and allows ads to load as they come into view instead of all at once as a user lands on a page.
You can use lazy loading and only load ads as the user scrolls through the page and approaches the ad location. If a user doesn’t scroll to the end of the page, you won’t have wasted load time on an ad they never even scrolled to at the bottom!
Think of it like studying for an exam, rather than cramming the night before a test, you spread the information out!
Follow the instructions below to add lazy loading to your Broadstreet ads.
Implement Lazy Loading
To implement lazy loading on ads served through Broadstreet, you must adjust the Broadstreet script on the page.
The first thing to do is locate the broadstreet.watch configuration on your page code. This is often placed in the header of a page and can be found there.
To enable lazy loading, add the parameter onlyVisible and set it to true. For example, the code would look something like this:
<script src=”https://cdn.broadstreetads.com/init-2.min.js”></script>
<script>broadstreet.watch({ networkId: {networkId}, onlyVisible: true })</script>
For more advanced control over the lazy loading then you can set the onlyVisible parameter to an object that has two properties:
-
- renderMarginPercent: This property is a number based on the percentage of the viewport’s height. For example, a value of `200` will load the ads that are two viewport heights away from being visible. (The default is 0 which will load the ad when the zone is within the current viewport height)
- mobileScaling: This property is a number that multiplies the renderMarginPercent property specifically for mobile users. This is useful as mobile users tend to scroll much faster than the average desktop user so it can be effective to load the ads much earlier than you would on a desktop. For example, a value of `3` will make the renderMarginPercent of `200` on desktop become `600` on mobile devices. (The default is 1 which will keep the renderMarginPercent for desktop and mobile the same)
An example using the two advanced properties is below:
<script src=”https://cdn.broadstreetads.com/init-2.min.js”></script>
<script>broadstreet.watch({ networkId: {networkId}, onlyVisible: {mobileScaling: 2.0, renderMarginPercent: 200} })</script>