延迟加载响应式 Adsense 广告

您一直在努力优化您的网站。 您已经做了诸如 延迟加载 Google 地图 之类的事情，并且想知道是否还有其他可以做的事情。 例如，我们能否做些什么来改善广告的加载？ 好消息是，您可以做一些事情。 您可以尊重用户的移动数据计划，仅在广告可能出现在视口区域时才加载广告。 您还可以根据设备屏幕提供合适的广告尺寸。 这样做会很好。 这不仅具有响应性，而且负责任。

问题

Google Adsense 的本质是广告及其脚本文件会自动加载：这可能会不合理地减慢其他重要内容（如样式、字体或其他脚本）的显示速度。

此外，正确的广告尺寸仅在广告加载前确定一次。 这意味着如果用户调整浏览器大小或旋转平板电脑，广告尺寸将保持不变，并且很可能不再适合上下文。

论点

• Google Adsense 考虑了许多用于获利的因素，但“点击率”在收入中发挥着重要作用。 因此，从长远来看，专注于点击而不是仅仅关注浏览量可能会导致收入增加。 通过使您的网站对用户看起来和感觉都值得信赖，您可以获得更多点击。 您可以通过优先考虑网站的哪些部分首先加载来获得这种信任。 首先提供广告，而不是用户想要获取的实际内容，这会导致广告点击次数和展示次数减少。
• 逻辑上，当广告从未进入视口区域时，Google Adsense 不应跟踪广告浏览量。 我不知道 Google Adsense 是否已经具备这种跟踪功能，但由于该技术基于 JavaScript，因此他们拥有实现此功能的所有手段。
• 智能手机和平板电脑用户不断在纵向和横向模式之间切换以找到最舒适的模式，这很常见。 为每种模式提供最合适的广告尺寸可以提高获得更多点击的可能性。

解决方案

我制作了一个 JavaScript 插件来提供帮助。 它有助于延迟加载广告

无论广告位于视口上方还是下方，如果广告位于视图之外，则不会加载。

它还有助于调整广告大小

横幅将在特定断点处重新加载。

JavaScript

插件本身是一小段 JavaScript 代码，我制作了两个版本：原生版本和 jQuery 版本。 我称之为 adsenseLoader。 您可以在此处获取文件

• adsenseloader.js；无依赖项（IE 9+）。
  最小化并 gzip 后为 1.1KB。
• jquery.adsenseloader.js；jQuery 依赖项。
  最小化并 gzip 后为 835 字节。

以下是初始化方法

// vanilla
var instance = new adsenseLoader( '.adsense' ); // accepted argument types: Selector String, Element, NodeList, Array
 
// jQuery
$( '.adsense' ).adsenseLoader();

您还可以自定义它。 默认选项如下

var options =
{
    laziness: 1,
    /*
        @int (<=0)
        This sets the laziness of loading the ads: (viewport height) * laziness . For example:
        0 – ad load starts when at the least a tiny part of it gets in the viewport;
        1 – ad load starts when the distance between the ad and the viewport is no more than the height of the viewport;
        2 – 2x viewports, etc.
    */
 
    onLoad: false
    /*
        @bool
        A callback function which is fired when the ad is fully loaded.
        A single argument (object) of the ad element is passed. For example:
        onLoad: function( ad )
        {
            alert( ad.getAttribute( 'data-ad-slot' ) + ' ad is loaded' );
        }
    */
};
 
// vanilla
var instance = new adsenseLoader( '.adsense', options );
 
// jQuery
$( '.adsense' ).adsenseLoader( options );

此外，还有一个方法函数 destroy，顾名思义：销毁广告并将相应的 DOM 片段恢复到默认状态。 您可以对整个实例以及单个元素调用该函数

// vanilla
var instance = new adsenseLoader( '.adsense', options );
 
instance.destroy();
// or
document.querySelectorAll( '.adsense' )[ 0 ].adsenseLoader( 'destroy' );
 
 
// jQuery
$( '.adsense' ).adsenseLoader( options );
 
$( '.adsense' ).adsenseLoader( 'destroy' );
// or
$( '.adsense' ).eq( 0 ).adsenseLoader( 'destroy' );

最后，您可以更改一些对所有插件实例具有全局影响的选项。 您可以在任何地方调用该函数，但它旨在在创建任何插件实例之前使用。 默认选项如下

var options =
{
    scriptUrl: '//#/pagead/js/adsbygoogle.js',
    /*
        @string (url)
        URL for Google Adsense's executive script file
    */
 
    throttle: 250
    /*
        @int (miliseconds)
        This defines how often the plugin should make
        calculations during the processes such as resize
        of a browser's window or viewport scroll.
        250 means that this happens 4 times in a second.
    */
};
 
// vanilla
adsenseLoaderConfig( options );
 
// jQuery
$.adsenseLoaderConfig( options );

HTML

在这里，我们必须简化 Adsense 代码片段，只保留两个参数并将它们全部放入容器元素中

<div class="adsense">
  
</div>

CSS

这部分负责控制广告的大小。 使用 CSS，我们将使用预期广告的确切尺寸定义容器元素的宽度和高度。 在媒体查询和伪元素的帮助下，我们将为插件设置指南，插件稍后将能够确定何时调整/重新加载广告。

.adsense {
    width: 970px;
    height: 90px;
    display: block;
}
.adsense:before { display: none !important; }
.adsense ins    { width: 100%; height: 100%; display: block; }
 
@media screen and ( max-width: 1024px ) {
    .adsense        { width: 728px; height: 90px; }
    .adsense:before { content: '1024'; }
}
 
@media screen and ( max-width: 800px ) {
    .adsense        { width: 468px; height: 60px; }
    .adsense:before { content: '800'; }
}

/* etc. */

幸运的是，Adsense 本身能够根据给定的尺寸选择正确的横幅尺寸。 选择器 .adsense 的 width 和 height 属性确定伪元素的预期值。

使用媒体查询和伪元素 ::before，我们告诉插件何时应该重新加载广告。 JavaScript 部分检查 content 值的差异。 检测到差异时，广告会自动重新加载。 您可以在媒体查询中使用任何不同的整数。 在我的示例中，我将值与媒体查询的宽度参数等同，以便于维护。

调整横幅大小是跨两个学科的工作：CSS 是逻辑，JavaScript 是执行。

演示

请记住，如果您使用阻止 AdSense 的广告拦截器，则可能无法正确查看此效果。

查看 Osvaldas 在 CodePen 上创作的笔 延迟加载响应式 Adsense 广告（@osvaldas）。

欢迎您关注并参与 GitHub 上的项目。

处理多个广告

以下是如何管理多个不同尺寸的广告的快速提示。 假设我们有两个横幅：一个在内容区域，另一个在侧边栏。 我们可以为每个横幅分配不同的类名

<div class="adsense adsense--main">...</div>
&nbsp;
<div class="adsense adsense--side">...</div>

现在，我们可以为 .adsense 定义通用样式，并为 .adsense--main 和 .adsense--sidebar 定义单独的样式，如下所示

.adsense{
    display: block;
}
.adsense:before     { display: none !important; }
.adsense ins        { width: 100%; height: 100%; display: block; }
 
.adsense--main      { width: 728px; height: 90px; }
.adsense--side      { width: 336px; height: 280px; }
 
@media screen and ( max-width: 1024px ){
    .adsense--main          { width: 468px; height: 60px; }
    .adsense--main:before   { content: '1024'; }
}
 
@media screen and ( max-width: 800px ){
    .adsense--side          { width: 250px; height: 250px; }
    .adsense--side:before   { content: '800'; }
}

广告加载指示或利用 onLoad()

您可以通过多种方式指示加载过程：提供占位符图像、添加文本、边框、背景或任何其他最符合您的设计方向并在广告加载之前可见的内容

首先，让我们添加一个额外的 HTML 元素和一些样式，这基本上会在广告上方添加一个带有“加载中…”文本的叠加层

<div class="adsense">
  <ins data-ad-client="ca-pub-4676533344420647" data-ad-slot="5741144487"></ins>
  <p class="adsense__loading"><span>Loading&hellip;</span></p>
</div>

.adsense {
    position: relative;
}
    .adsense__loading {
        width: 100%;
        height: 100%;
        background-color: rgba( 255, 255, 255, .9 );
        display: table; /* for vertical centering */
        position: absolute;
        top: 0;
        left: 0;
    }
    .adsense--loaded .adsense__loading { display: none; }
 
        .adsense__loading span {
            text-align: center;
            vertical-align: middle; /* for vertical centering */
            display: table-cell; /* for vertical centering */
        }

使用回调函数 onLoad()，我们可以添加类 adsense--loaded，该类负责隐藏 .adsense__loading 元素

// vanilla
var instance = new adsenseLoader( '.adsense',
{
    onLoad: function( ad )
    {
        if( ad.classList )
            ad.classList.add( 'adsense--loaded' ); // IE 10+
        else
            ad.className += ' ' + 'adsense--loaded'; // IE 8-9
    }   
});
 
// jQuery
$( '.adsense' ).adsenseLoader(
{
    onLoad: function( $ad )
    {
        $ad.addClass( 'adsense--loaded' )
    }
});

感谢您的阅读，并成为一位负责任的网页设计师/开发人员。