加载整个页面后加载Google广告

Question

如果没有Google广告，我的HTTPS网页会在大约500毫秒内加载。使用Google广告，同一网页需要2-5秒才能加载。我有两个横幅广告（一个在顶部，一个在底部）。是的，它在广告之前呈现整个页面，但我仍然认为在等待广告完成时让浏览器旋转是笨拙的。

有没有办法用Javascript在广告前完成页面加载，然后只在后台加载广告？基本上，欺骗它认为整个页面已经加载了吗？

当前代码：

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- My Ad Banner -->
<ins class="adsbygoogle"
     style="display:inline-block;width:728px;height:90px"
     data-ad-client="myid"
     data-ad-slot="myid"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

查看我的网站的瀑布，看起来adsbygoogle.js不会导致加载指示符。相反，它是实际的广告内容本身。例如，此对象（横幅广告）甚至无法开始加载，直到1.8秒（我的整个页面已经加载后很长时间）：tpc.googlesyndication.com/simgad/AdID

谢谢！

Answer 1

尝试this article。

诀窍是将广告初始化和加载逻辑放在窗口的onload事件中：

<script>
   window.onload = function(){
       ...
   };
</script>

Answer 2

这是我最终的Vanilla JS解决方案：

<script async defer src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
    (adsbygoogle = window.adsbygoogle || []).onload = function () {
        [].forEach.call(document.getElementsByClassName('adsbygoogle'), function () {
            adsbygoogle.push({})
        })
    }
</script>

Answer 3

无论您在页面上放置多少个Google广告，都要将一个外部js副本放在页面的顶部......由于它是异步的，因此它位于顶部。

将谷歌提供的内容放在广告所在的位置。

在页面底部，就在结束正文标记之前，放置脚本来推送广告。

现在广告将在您的网页完成后加载！

如果你想在页面上添加第二个adsense广告，请不要重复adsbygoogle.js（一个副本就足够了）...把第二个放在显示位置...在底部添加另一个推送你的网页看起来像这样：

（adsbygoogle = window.adsbygoogle || []）。push（{}）; （adsbygoogle = window.adsbygoogle || []）。push（{}）;

Answer 4

Vanilla解决方案是将所有广告代码保持不变，除了删除脚本标记，然后将其添加到您的javascript

from PyQt5 import QtCore, QtGui, QtWidgets

class Scrollbar(QtWidgets.QScrollBar):
    geometryChanged = QtCore.pyqtSignal(int, int, int, int, int)

    def __init__(self, parent=None):
        super(Scrollbar, self).__init__(parent)
        self.sliderMoved.connect(self.calculate_geometry)

    def resizeEvent(self, event):
        self.calculate_geometry()
        super(Scrollbar, self).resizeEvent(event)

    def calculate_geometry(self):
        opt = QtWidgets.QStyleOptionSlider()
        self.initStyleOption(opt)
        gr = self.style().subControlRect(QtWidgets.QStyle.CC_ScrollBar, opt,
            QtWidgets.QStyle.SC_ScrollBarGroove, self)
        sr = self.style().subControlRect(QtWidgets.QStyle.CC_ScrollBar, opt,
            QtWidgets.QStyle.SC_ScrollBarSlider, self)

        start = gr.left() if self.orientation() == QtCore.Qt.Horizontal else gr.top()
        left = sr.left() if self.orientation() == QtCore.Qt.Horizontal else sr.top()
        right = sr.right() if self.orientation() == QtCore.Qt.Horizontal else sr.bottom()
        width = sr.width() if self.orientation() == QtCore.Qt.Horizontal else sr.height()
        end = gr.right() if self.orientation() == QtCore.Qt.Horizontal else gr.bottom()
        self.geometryChanged.emit(start, left, width, right, end)

class Widget(QtWidgets.QWidget):
    def __init__(self, parent=None):
        super(Widget, self).__init__(parent)

        hlayv = QtWidgets.QHBoxLayout()
        hlayv.addWidget(QtWidgets.QLabel("start: "))
        self._start_label_v = QtWidgets.QLabel()
        hlayv.addWidget(self._start_label_v)
        hlayv.addWidget(QtWidgets.QLabel("left: "))
        self._left_label_v = QtWidgets.QLabel()
        hlayv.addWidget(self._left_label_v)
        hlayv.addWidget(QtWidgets.QLabel("width: "))
        self._width_label_v = QtWidgets.QLabel()
        hlayv.addWidget(self._width_label_v)
        hlayv.addWidget(QtWidgets.QLabel("right: "))
        self._right_label_v = QtWidgets.QLabel()
        hlayv.addWidget(self._right_label_v)
        hlayv.addWidget(QtWidgets.QLabel("end: "))
        self._end_label_v = QtWidgets.QLabel()
        hlayv.addWidget(self._end_label_v)

        hlayh = QtWidgets.QHBoxLayout()
        hlayh.addWidget(QtWidgets.QLabel("start: "))
        self._start_label_h = QtWidgets.QLabel()
        hlayh.addWidget(self._start_label_h)
        hlayh.addWidget(QtWidgets.QLabel("left: "))
        self._left_label_h = QtWidgets.QLabel()
        hlayh.addWidget(self._left_label_h)
        hlayh.addWidget(QtWidgets.QLabel("width: "))
        self._width_label_h = QtWidgets.QLabel()
        hlayh.addWidget(self._width_label_h)
        hlayh.addWidget(QtWidgets.QLabel("right: "))
        self._right_label_h = QtWidgets.QLabel()
        hlayh.addWidget(self._right_label_h)
        hlayh.addWidget(QtWidgets.QLabel("end: "))
        self._end_label_h = QtWidgets.QLabel()
        hlayh.addWidget(self._end_label_h)

        self.scrollarea = QtWidgets.QScrollArea()
        content_widget = QtWidgets.QLabel()
        content_widget.setStyleSheet('''background-color : red;''')
        content_widget.setFixedSize(1000, 1000)
        self.scrollarea.setWidget(content_widget)
        hscrollbar = Scrollbar()
        hscrollbar.geometryChanged.connect(self.on_vertical_geometryChanged)
        self.scrollarea.setHorizontalScrollBar(hscrollbar)
        self.scrollarea.setHorizontalScrollBarPolicy(QtCore.Qt.ScrollBarAlwaysOn)

        vscrollbar =Scrollbar()
        self.scrollarea.setVerticalScrollBar(vscrollbar)
        vscrollbar.geometryChanged.connect(self.on_horizontal_geometryChanged)
        self.scrollarea.setHorizontalScrollBarPolicy(QtCore.Qt.ScrollBarAlwaysOn)

        vlay = QtWidgets.QVBoxLayout(self)
        vlay.addWidget(QtWidgets.QLabel("<b>Vertical: </b>"))
        vlay.addLayout(hlayv)
        vlay.addWidget(QtWidgets.QLabel("<b>Horizontal: </b>"))
        vlay.addLayout(hlayh)
        vlay.addWidget(self.scrollarea)

    @QtCore.pyqtSlot(int, int, int, int, int)
    def on_vertical_geometryChanged(self, start, left, width, right, end):
        self._start_label_v.setNum(start)
        self._left_label_v.setNum(left)
        self._width_label_v.setNum(width)
        self._right_label_v.setNum(right)
        self._end_label_v.setNum(end)

    QtCore.pyqtSlot(int, int, int, int, int)
    def on_horizontal_geometryChanged(self, start, left, width, right, end):
        self._start_label_h.setNum(start)
        self._left_label_h.setNum(left)
        self._width_label_h.setNum(width)
        self._right_label_h.setNum(right)
        self._end_label_h.setNum(end)

if __name__ == '__main__':
    import sys
    app = QtWidgets.QApplication(sys.argv)
    w = Widget()
    w.show()
    sys.exit(app.exec_())

免责声明：与该问题的其他答案一样，假定是Google不会拒绝改善网页性能的方法

Answer 5

在结束 / body＆gt; 标记

之前，在页面底部放置用于启动广告的代码

Answer 6

（此解决方案需要jQuery）

从代码中删除<script>代码并将其添加到您的javascript：

$(function() {
  $.getScript("//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js");
});

这将执行AJAX调用以获取脚本，而不是使用异步浏览器方法。这应该导致没有加载指示器。

参考：http://api.jquery.com/jquery.getscript/

Answer 7

这是我的工作，注意到adsense会减慢页面加载/渲染的速度：

首先将此代码添加到您的<Body>标记中：

<body onLoad="initialize_page();">

现在，仅在<HEAD>标签上方放置一个adsense脚本代码：

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

从您的所有adsense代码中删除adsense <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>（在标题处复制一个就足够了。）

从页面的adsense代码中删除所有(adsbygoogle = window.adsbygoogle || []).push({});。我们将在初始化函数中使用它们。

向我们的initialize_page（）函数添加以下代码：

function initialize_page()
{
    (adsbygoogle = window.adsbygoogle || []).push({});//this is for the first adsense
    (adsbygoogle = window.adsbygoogle || []).push({});//this is for the second
    (adsbygoogle = window.adsbygoogle || []).push({});//this is for the third
}

此代码适合您页面上的3个adsense。如果仅使用2个或1个adesnes，只需分别从函数中删除(adsbygoogle = window.adsbygoogle || []).push({});。

Answer 8

我放

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

在关闭body标签并将其从每个adsense广告中删除之前。

广告展示良好，页面加载速度非常快。

---

经过多次测试，我发现有时广告不会在野生动物园中展示。

Answer 9

Ads_onscroll_event

自然，这是原始广告单元代码的外观。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- leaderboard -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

首先，从所有现有广告单元中删除以下脚本。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

和

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

现在看起来像这样

<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="1234567890"></ins>

一旦用户滚动您的网页，此方法将加载广告单元，将其添加到有广告的页面上：

<script type="text/javascript">
//<![CDATA[
var la=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===la||0!=document.body.scrollTop&&!1===la)&& (!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),la=!0)},!0);//]]>
</script>

和

<script>
(adsbygoogle = window.adsbygoogle || []).onload = function () {
    [].forEach.call(document.getElementsByClassName('adsbygoogle'), function () {
    adsbygoogle.push({})
  })
}
</script>