Гугл ругается на JQuery

Добрый день!

Подскажите, пожалуйста, а то всю голову уже сломал:
сайт на MODX 2/6/5 — pl сейчас в head стоит вызов jquery

<script src="[[++assets_url]]components/themebootstrap/js/jquery.min.js"></script>

при этом гугл говорит оптимизируйте этот файл, ставлю асинхронный вызов

<script async src="[[++assets_url]]components/themebootstrap/js/jquery.min.js"></script>

гугл перестает ругаться, но съезжают строки в меню, пропадают картинки в каруселе. Подскажите что нужно сделать. Заранее благодарен.

Алексей

02 ноября 2018, 17:28

1 257

Комментарии: 10

Баха Волков

02 ноября 2018, 18:18

Переместить вниз не пробовали?

Алексей

02 ноября 2018, 18:54

Пробовал, даже менял на вызов с гугловского сайта

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

, история такая же, минут пять работает нормально а потом опять едет шрифт, и разметка.

Сергей

03 ноября 2018, 00:06

Попробуйте defer, а вообще посмотрите, возможно из за асинхронной загрузки не работают другие скрипты, нужно поиграть, какому то поставить defer, а какому то async. По крайней мере у меня так всегда прокатывало.
Или используйте как вариант minifyx

Алексей

03 ноября 2018, 06:59

Спасибо! minifyx стоит, пробовал async — ситуация та же, defer — не прокатывает вообще (сворачивает сайт до отображения в виде перечня ссылок). Попробую сегодня поиграть с вызовом через async другие скрипты.

Сергей

03 ноября 2018, 08:34

Вообще если делать через minifyx, то ругаться перестаёт вообще. И ещё заметил одну странность, когда последние несколько раз использовал компонент, получалось что первая загрузка сайта нормально, но при последующих слетают стили. Не знаю с чем связано… Просто отказался от его использования.

Алексей

03 ноября 2018, 10:08

во во, вот сидим и ломаем голову… сейчас попробуем вызвать как вы написали: «Попробуйте defer, а вообще посмотрите, возможно из за асинхронной загрузки не работают другие скрипты, нужно поиграть, какому то поставить defer, а какому то async.» как получится напишу.

Олег

03 ноября 2018, 09:41

Основные стили в head.
После открытия body jquery, причем советуют с серверов гугла ставить ссылку, т.к. у клиентов кешируется, я все равно ставлю со своего сервера.
В самый низ body остальные скрипты, стили js компонентов.
И будет на вашей улице счастье)

Алексей

03 ноября 2018, 10:07

спасибо, js компоненты вызываются внизу страницы (footer), в head идет вызов css и jquery, пробовали и так и так работает только когда со своего сервера грузишь. пробовали опустить вниз вызов jquery — слетают стили, и дальше в меню, в body где идет карусель — в ней перестает подтягивать картинки. так что вот так…

Олег

03 ноября 2018, 14:39

так async отрубите, понятное дело что карусели спадают

Алексей

03 ноября 2018, 14:48

так нет уже. Вот так выглядит head, который работает:

<meta charset="[[++modx_charset]]">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="[[*description]]"/>
<meta name="keywords" content="[[*seoKeywords]]" />
<meta name="author" content="">
<base href="[[++site_url]]" />
<title>[[*pagetitle]]</title>

<!-- You can add theme from bootswatch.com: just add it into &cssSources=``.
For example: [[++assets_url]]components/themebootstrap/css/slate/bootstrap.min.css-->
[[MinifyX?
	&minifyCss=`1`
	&registerCss=`1`
	&cssSources=`
		[[++assets_url]]components/themebootstrap/css/bootstrap.min.css,
		[[++assets_url]]components/themebootstrap/css/add.css,
                [[++assets_url]]components/themebootstrap/css/yamm.css,
                [[++assets_url]]/components/fancybox/css/jquery.fancybox.min.css
	`
]]

<script src="[[++assets_url]]components/themebootstrap/js/jquery.min.js"></script>
        

<script> 
// YAMM MENU
   $(document).on('click', '.yamm .dropdown-menu', function(e) { e.stopPropagation()})
</script> 
<script>
    $(document).ready(function() {
        $('.level2 ul').removeClass("col-sm-3");
        $('.level1').each(function() {
            if(!$(this).find("ul").length)
                $(this).addClass("col-sm-3");
        });
    });
     $(document).on('click','.level2 > ul > a', function(e) {
            e.preventDefault();
            $(this).parent().find('div.menuhide').slideToggle();
    });
</script>


<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

а вот так footer:

<footer>
	<div class="row">
		<div class="col-lg-3">
[[pdoMenu?
&startId=`269`
&level=`1`
&tplParentRow=`@INLINE <p>[[+pagetitle]]</p>`
]]</div>
<div class="col-lg-3">
[[pdoMenu?
&startId=`280`
&level=`1`
&tplInner=`@INLINE [[+pagetitle]]
`
&tplOuter=`@INLINE <p>[[+wrapper]]</p>`
]]</div>
<div class="col-lg-2">
<a href="http://www.facebook.com/groups/334645603588832/"><img src="assets/images/pages/facebook.png" class="img-responsive"&options=`h=15&w=15&zc=C`></a>
<a href="http://vk.com/naturecosmetic.saratov"><img src="assets/images/pages/vk_2.png" class="img-responsive"&options=`h=15&w=15&zc=C`></a>
</div>

		<div class="col-lg-4">
&copy;2017 [[++site_name]] &ndash; OOO "Компания Элетто"
		</div>
	[[$metrika]]	
	</div>
</footer>

<!-- You can add theme from bootswatch.com: just add it into &cssSources=``.
For example: [[++assets_url]]components/themebootstrap/css/slate/bootstrap.min.css-->
[[MinifyX?
	
	&minifyJs=`1`
	&registerJs=`1`
	&jsSources=`
		[[++assets_url]]components/themebootstrap/js/bootstrap.min.js,
                [[++assets_url]]/components/fancybox/js/jquery.fancybox.min.js
	`
]]

но на него ругается гугл, перепробовал уже все ничего не получается.

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.