天下熙熙,皆为利来
天下攘攘,皆为利去

如何优化Adsense 加载速度?:高阶优化(二)


说明:上篇文章说到,你可以通过设置异步加载来提高网页广告的加载速度,所以如果你是 Adsense 初级玩家,感觉得装载了 Adsense 广告的网页加载缓慢,那么就按照上面处理即可。当然如果你还觉得慢的话,接下来就可以用到这个比较高级的办法了。我在搜索 Adsense 的速度优化方案的时候,看到了另外一篇老外在关于“如何提高GoogleAdsense广告加载速度”的文章中,提到了广告懒加载的概念,通过制定一些参数方法来实现广告懒加载,以达到提高装载 Adsense 广告的网页加载速度的目的。

注意!!!Adsense 有明确的规定不得更改广告代码

注意!!!我也不太清楚这是否会触及 Adsense 的条款规定

Adsense 加载速度高阶优化:

什么是懒加载?懒加载这个概念用的最多的当属大家都不陌生的网站的图片资源加载情况,意思是只有在某些特定内容出现在可视区域中时,才开始加载的一种技术。下面给大家看一张没有通过延时加载也就是懒加载的网页加载图:





在上图中,我们可以明确的看到第二个 Google Adsense 广告在我们打开网页时也自动加载了,但是此时他并没有达到我们的可视区域,从逻辑上讲,假如当访客只看了第一屏,没有向下滚动,那么下面的广告永远不会进入可视区域时,Google Adsense不会跟踪广告视图,(我不知道 Google Adsense 是否有此类跟踪),但由于Google Adsense加载技术是基于JavaScript的,因此他们是可以完成这些跟踪方法的。

且不论访客能不能看到第二条广告,第二条广告是否可以给我们带来收益,既然不进入视图区域,我自然不希望他去加载来增加网站整体的反应时间,那么延迟加载就变得有必要了,下面我们来看一张延迟加载图片:

 

通过上图,我们可以看到如果广告不在视野范围内,广告是不会加载的,那么技术上如何实现呢?这里有老外制作的一个小插件,该插件本身只是一小段JavaScript代码,老外制作了两个版本:原生JS和依赖jQuery库的代码,并且作者已经将代码放置在了Github上,链接如下:adsenseLoader.js,大家可以自己获取。



原生方式和jQuery库方式的初始化方法如下:

/// 原生
var instance = new adsenseLoader( '.adsense' ); 
// jQuery
$( '.adsense' ).adsenseLoader();

其中 .adsense 为你的广告代码包含的外部框架,你也可以在初始化时传入一些参数如下:


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' );
}
*/
};
// 原生
var instance = new adsenseLoader( '.adsense', options );
// jQuery
$( '.adsense' ).adsenseLoader( options );

其中 .adsense 为你的广告代码包含的外部框架,你也可以在初始化时传入一些参数如下:


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' );
        }
    */
};
 
// 原生
var instance = new adsenseLoader( '.adsense', options );
 
// jQuery
$( '.adsense' ).adsenseLoader( options );

HTML结构如下:

需要从你的Adsense广告代码中取出 ,也就是上面HTML结构中的部分。

简单的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'; }
}

按照原文的指示该插件的加载层级图如下:

所以通过该插件可以实现广告显示前的占位内容,比如图片或者文字,这些内容会在你的广告加载之前显示给网友,具体使用大家参考原文:Lazy-Loading Responsive Adsense Ads,我最神烦JS什么的了。

最后还是希望 Google 能在全球增加布局大量CDN服务器,这样我们的Adsense加载就不会那么缓慢了,当然也建议大家不要在Adsense加载速度上花费太多精力,应该把精力花费在网站的推广上,当你网站每天有10万访问量我相信你就不会纠结Adsense这个问题了,以上就是今天的关于优化 Adsense 页面广告代码加载速的内容,其实标题的提升网站速度,这里指的并非是速度而是网站整体的加载时长,毕竟第三方的资源的优化程度都是有一定限度了,真想提升自己网站访问速度还是从自己的服务器入手吧。



如果本文对你有所帮助,请下方二维码打赏,不论是翻译国外文章还是查找技术类文章都不容易,你们的打赏也是我翻译和提供更多Adsense优秀文章的动力!

赞(2) 打赏一下
未经允许不得转载:iX-九里资讯 » 如何优化Adsense 加载速度?:高阶优化(二)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏