2014-09-16 2 views
3

Без рекламы в Google, моя веб-страница HTTPS загружается примерно в 500 мс. С помощью Google Ads одна и та же веб-страница занимает 2-5 секунд для загрузки. У меня две рекламные баннеры (одна сверху и одна внизу). Да, он отображает всю страницу перед рекламой, но я все еще думаю, что это неудобно, когда браузер вращается, пока он ждет объявления.Загрузка объявлений Google после загрузки всей страницы

Есть ли какой-либо способ с 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

Спасибо!

+0

Как вы загружаете объявления прямо сейчас? –

+1

http://www.aaronpeters.nl/blog/non-blocking-google-adsense-ads-improve-page-speed – Christina

+0

@MaksimVi. Я добавил свой код к вопросу –

ответ

8

Попробуйте this article.

Хитрость заключается в том, чтобы поместить объявление инициализации и загрузки логики в onload случае окна:

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

Hi @Maksim Vi. Я считаю, что эта проблема была устранена, когда Google ввел async javascript (который мы используем). Проблема, похоже, не в рендеринге javascript, а в медленной загрузке самого рекламного контента. –

+0

@PFBilling, попробуйте только поместить '(adsbygoogle = window.adsbygoogle || []). Push ({});' in 'window.onload' event then. Я не уверен, что он делает, но похоже, что он оценивается до того, как на данный момент загружена страница, или может быть что-то, что находится внутри файла 'adsbygoogle.js'. Возможно, я ошибаюсь, но даже если скрипт загружается асинхронно, его содержимое будет выполняться до завершения загрузки страницы. –

+0

Один из сайтов моего клиента использует различные рекламодатели, один из них - это Google AdSense с асинхронным кодом. Однако есть и другие рекламодатели, которые используются параллельно (они используют разных рекламодателей в зависимости от страны пользователя), и я хочу загрузить эти объявления также в самом конце загрузки документа ... Является ли этот подход 'window.onload' еще действительным сегодня в 2015 году? Или есть лучшие, например. используя AMD (определение асинхронного модуля)? – basZero

0

Поместите код для инициирования объявления в нижней части страницы, непосредственно перед закрывающим /тел> тега

0

(Это решение требует JQuery)

Удалите <script> тега из вашего кода и добавить к вашему JavaScript:

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

Это будет делать вызов AJAX, чтобы получить сценарий, а не с помощью метода асинхронного браузера. Это должно привести к отсутствию индикатора загрузки.

исх: http://api.jquery.com/jquery.getscript/

+0

Привет @Khan, глядя на водопад для моего сайта, это не похоже на то, что adsbygoogle.js вызывает индикатор загрузки. Вместо этого это собственно рекламный контент. Подобно этому даже не запускается загрузка до 1,8 секунд (после того, как моя страница уже загружена): https://tpc.googlesyndication.com/simgad/adid –

1

Независимо от того, сколько Google объявлений у вас есть на странице, положить одну копию внешних JS в голову ваша страница ... все в порядке, так как это асинхронно.

Вставьте в комплект поставки Google, где должно появиться объявление.

В нижней части страницы, непосредственно перед тегом тега кузова, поместите скрипт, чтобы нажать объявление.

Теперь объявление будет загружено после завершения вашей страницы!

Если вы хотите добавить второе объявление adense на страницу, не повторяйте adsbygoogle.js (достаточно одного экземпляра) ... поставьте второй, где он будет отображаться ... добавьте еще один нажав на кнопку в нижней части страницы, чтобы она выглядела так:

(adsbygoogle = window.adsbygoogle || []). push ({}); (adsbygoogle = window.adsbygoogle || []).От себя({});

5

Это мое окончательное решение 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> 
Смежные вопросы