Отложить загрузку скриптов, пока не загрузится весь сайт, как?

Question

[xonar]

Здравствуйте.

Есть сайт, на нём есть внешние js скрипт, аля метрика, фейсбук, гугл и т.д. Из-за них PageSpeed = 57, без них 93.

Как лучше будет их впихнуть в window.onload? Чтоб они не конфликтовали?

//////UPDATE. Хотя ток ща понял, что window.onload не поможет, а только понизит показатели. Так как сначала загрузится страница, потом скрипты и увеличит время загрузки страницы в целом. Как справиться с этими внешними скриптами?

Comments

[Алексей Ярков]

Хз поможет или нет, но атрибут async указан у внешних скриптов?

[xonar]

Алексей Ярков, Я уже и async и defer пытался, изменений от них вообще никаких. А проблему решить надо, меня заказчик задолбал с этим PS, а куда я ему его эти скрипты засуну хз.

[xonar]

Алексей Ярков, И тут ещё одна проблема, defer и async срабатывают только если у скрипта есть src атрибут. Но, в моём пример большая часть скриптов имеет такой вид:

<script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[10];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', '41453454353968701');
  fbq('track', 'PageView');
</script>

Answer 1

[xonar]

Нашёл рабочее решение.

<script>
var fired = false;

window.addEventListener('scroll', () => {
    if (fired === false) {
        fired = true;
        
        setTimeout(() => {
            // Здесь все эти тормознутые трекеры, чаты и прочая ересь,
            // без которой жить не может отдел маркетинга, и которые
            // дико бесят разработчиков, когда тот же маркетинг приходит
            // с вопросом "почему сайт медленно грузится, нам гугл сказал"
        }, 1000)
    }
});
</script>

Comments

[Torvolf]

Здравствуйте. Столкнулся с подобной проблемой, можете для менее опытного человека написать куда и как это вставить?)

[AstonMartin]

Если надо внешний скрипт подключить, то можно так:

setTimeout(function() {
    var headID = document.getElementsByTagName("head")[0];         
    var newScript = document.createElement('script');
    newScript.type = 'text/javascript';
    newScript.src = 'http://www.somedomain.com/somescript.js';
    headID.appendChild(newScript);
}, 3000);

[john_vinchester]

AstonMartin, А если несколько скриптов как их подключить.

Answer 2

[Виталий]

Решение для корректного отображения счетчика в метрике. Проверяем на ботов и выдаем скрипты без задержки. Лишних ботов из списка можно убрать.
Этот метод улучшает показатели PageSpeed.

<?php
	function isBot(){
	/* Эта функция будет проверять, является ли посетитель роботом поисковой системы */
	  $bots = array(
		'rambler','googlebot','aport','yahoo','msnbot','turtle','mail.ru','omsktele',
		'yetibot','picsearch','sape.bot','sape_context','gigabot','snapbot','alexa.com',
		'megadownload.net','askpeter.info','igde.ru','ask.com','qwartabot','yanga.co.uk',
		'scoutjet','similarpages','oozbot','shrinktheweb.com','aboutusbot','followsite.com',
		'dataparksearch','google-sitemaps','appEngine-google','feedfetcher-google',
		'liveinternet.ru','xml-sitemaps.com','agama','metadatalabs.com','h1.hrn.ru',
		'googlealert.com','seo-rus.com','yaDirectBot','yandeG','yandex',
		'yandexSomething','Copyscape.com','AdsBot-Google','domaintools.com',
		'Nigma.ru','bing.com','dotnetdotcom'
	  );
	  foreach($bots as $bot) 
		if(stripos($_SERVER['HTTP_USER_AGENT'], $bot) !== false){
		  return true;
		}
	  return false;
	}
if( isBot() ) { ?>

// script для ботов

<?php } else { ?>
		window.onload = function() {
			setTimeout(() => {

// script с задержкой

			},3000);
		}
<?php } ?>

Comments

[xonar]

Классное решение.

[Андрей]

А нужно ли в раздел "// script с задержкой" прописывать скрипт в тегах ?
Или можно без них ?

[Виталий]

Андрей, пишите так, как если бы вставляли на страницу html

[Виталий]

Для PageSpeed Insights можно оставить только:

$bots = array('Chrome-Lighthouse');

или добавить к массиву

[AfanasievAM]

Кроме как улучшить оценку в Google Page Speed это ни к чему не приведет.
Если нужно показать красивую оценку клиенту, 90-100 пунктов, решение годится.

Для оценки сайта Google смотрит загрузку страницы империческим путем, те смотрит среднюю оценку по посетителям вашего сайта. А на посетителях показатели будут плохими при таком решении.

[spido]

Имхо, такое решение ацессор поисковой системы объявит спамом за разный контент для робота и посетителя сайта. И сайт попадет в нарушители.

[Виталий]

spido, полностью с тобой согласен. алгоритмы поисковиков не стоят на месте. это решение применялось для временного использования 2 года назад, тогда применение санкций к сайтам не было замечено.

Answer 3

[ProAI]

Попробуйте:
<script src="file.js" defer></script>
или
<script src="file.js" async></script>

Comments

[xonar]

В моём примере скрипты имеют такой вид:
Атрибута src у них нет, а значит defer и async не сработает для них.

<script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[10];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', '41345645668968701');
  fbq('track', 'PageView');
</script>

[Maksim-Lisak]

xonar, а что мешает добавить атрибут?

[xonar]

Maksim-Lisak, Просто пустой атрибут добавить?

<script src="">
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[10];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', '41345645668968701');
  fbq('track', 'PageView');
</script>

[spido]

xonar, вот так добавь:
<script type="module" defer>

Answer 4

[Максим Морев]

Отложите их загрузку через window.onload => setTimeout с задержкой 2-3 секунды. Это работает для того, чтобы не влияло на показатели PageSpeed.
Достоверно известно, что при этом подходе Яндекс Метрика не показывает, что скрипт Метрики установлен на сайт. Данные нормально поступают, но в панели Метрики значок красный. :)

Comments

[xonar]

Хм, а вот это интересненько.... А я просто без setTimeout пробовал. Конечно, то что метрика не будет отображаться, что она установлена это не айс, но что поделать)

Сейчас попробую.

[xonar]

@Sealnside, Стало ток хуже, потерял ещё 10 баллов) Вроде всё верно сделал.

window.onload = function () {
		setTimeout((function (d, w, c) {
        (w[c] = w[c] || []).push(function() {
            try {
                w.yaCounter43772654 = new Ya.Metrika2({
                    id:43772654,
                    clickmap:true,
                    trackLinks:true,
                    accurateTrackBounce:true,
                    webvisor:true
                });
            } catch(e) { }
        });

        var n = d.getElementsByTagName("script")[10],
            s = d.createElement("script"),
            f = function () { n.parentNode.insertBefore(s, n); };
        s.type = "text/javascript";
        s.async = true;
        s.src = "https://mc.yandex.ru/metrika/tag.js";

        if (w.opera == "[object Opera]") {
            d.addEventListener("DOMContentLoaded", f, false);
        } else { f(); }
    })(document, window, "yandex_metrika_callbacks2"), 3000);
	}

[xonar]

sashabeep, Есть решение, чтоб браузер не занимать этим и поднять скорость загрузки? Потому что defer, async, onload не помогают, уже не знаю как быть.

[Nayro TV]

xonar, чё как решил?