Переместить скрипты в footer

[CaptainPower]

Всем известно что гуглевский Page Speed требует переноса скриптов из хедера вниз. А иначе как начал обещать недавно гугл - санкции в ранжировании. В сети боле менее рабочего решения не нашел.

Сам перенести попытался вродебы почти получилось. Но ссылку на  jquery (и что то еще..) все рано надо в хедере оставлять т.к. различные моменты типа на странице продукта - hbas - не работают. Вобщем хочу поинтересоваться кто с этой темой заморачивался?

[Baco]

Тема кстати важная, я пока такой расклад не рассматривал, только асинхронную подгрузку, но, если по сути, то думаю смотреть надо в сторону:

$(document).ready(function() {
...
$(window).load(function() {

[chukcha]

А иначе как начал обещать недавно гугл - санкции в ранжировании.

 

Пруф в студию

[CaptainPower]

Пруф в студию

Вот что пару дней назад начал присылать гугл:

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

 

Мы проверили 22 стр. Вашего сайта и обнаружили, что 100% из них неудобно просматривать на мобильных устройствах. Из-за ошибок на этих 22 стр. у пользователей складывается плохое впечатление о ресурсе. Эти страницы не считаются оптимизированными для мобильных устройств с точки зрения Поиска Google, и они будут отображаться и ранжироваться в результатах поиска на смартфонах соответствующим образом.

Вот что мы рекомендуем сделать:

1

Выясните, какие страницы содержат ошибки

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

Просмотреть отчет

2

Узнайте, как адаптировать сайт для мобильных устройств

Есть много способов сделать сайт удобным для мобильных пользователей. Для начала ознакомьтесь с информацией об ошибках, предоставленной в Инструментах для веб-мастеров.

Изучить рекомендации

3 Устраните ошибки на своем сайте

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

Дополнительные рекомендации

• Если на Вашем сайте применяется система управления контентом (например, Wordpress, Joomla или другая), ознакомьтесь с этим руководством.

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

• Задайте вопросы на форуме для веб-мастеров (не забудьте указать тип сообщения – [WNC-451500]).

© Google Inc., 2014. 1600 Amphitheatre Parkway, Mountain View, CA 94043, США. | Отменить подписку

Добавьте адреса, на которые следует отправлять уведомления Google для этого аккаунта Инструментов для веб-мастеров.

 

[Baco]

[chukcha]

Мне иногда хочется сказать Гуглу - покажи оптимизированную валидную страницу (сайт).

 

Это оптимизация нужна для десктопных или для мобильных девайсов (не спорю - их все больше и больше)

 

Каким образом скрипты и стили могут влиять на контент?

Речь может идти исключительно о ПФ

И, возможно, речь идет о ПФ пользователей мобильных девайсов.

 

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

[natural]

css убрать по моему нельзя в footer. Все сыпется...

Вообщем тоже интересует решение данного вопроса ..

[Гість]

CSS как раз можно без проблем перенести в footer - он по-любому подхватится нормально, только страница будет "дергаться" пока не загрузится. Можно поделить CSS на 2 файла - Основной, который отвечает за отрисовку важных элементов страницы и запихать его в шапку. А все остальные стили от модулей и т.д. - в footer. Вроде даже есть модуль, который собирает все стили в кучу, минимизирует их и кладет в footer.
Вот со скриптами сложнее. Некоторые скрипты должны быть до элемента в DOM, какие-то после, а каким-то вообще пофиг. Пробовал ставить async и defer, Гугл не ругается, а скрипты ломаются. В общем теоретически это выполнимо, правда придется переписывать многие скрипты. 
Оптимизировать по гуглу на 100% сайт можно, точнее у меня получилось сделать это с лендингом (matuvi.kz). Правда для мобилок не оптимизирован. Надо допиливать. Теперь хочу добиться максимума на ocStore. С самим ocStore проблем не возникает, но вот с доп. модулями приходится плясать с бубном. Если что-то получится, то о своих результатах отпишусь.

[Гість]

Вроде бы получилось запихать все в футер чтоб не ломалось ничего. В шапке сейчас только jQuery и jQueryUI, остальное в футере. Тестирую, отлавливаю ошибки. Если все будет хорошо - подробно опишу что и где ковырял

[Runar]

ждем

[d0tb0t]

Статейка с примерами правда на аглицком http://www.smashingmagazine.com/2014/09/08/improving-smashing-magazine-performance-case-study/

 

https://github.com/filamentgroup/enhance

https://github.com/filamentgroup/criticalCSS

 

[Гість]

Выложил на сервер luxmassage.kz Походил по сайту: карточка товара, корзина, оформление заказа - лагов не обнаружил. Походите по разделам. Может я что-то упустил. К выходным постараюсь выложить список внесенных изменений. Про то что сайт сначала липнет влево, а потом нормально я знаю - это плата за то что стили в конец сайта перемещены =) Фиксится переносом основного стиля в шапку. 

[indevor]

Если гугл ругается на "оптимизируйте css" это не значит, что css нужно переносить \ делить в футер. Достаточно его минифицировать и пережать. Вот дельная вещь - объединяет жмет и минифицирует css + html. После её использования Performance grade: 94/100 по http://tools.pingdom.com/
А скрипты да, нужно переносить. Ждем реализации Dragon по переносу.

Змінено 9 квітня 2015 користувачем indevor

[RodgerFox]

Мне иногда хочется сказать Гуглу - покажи оптимизированную валидную страницу (сайт).

 

Это оптимизация нужна для десктопных или для мобильных девайсов (не спорю - их все больше и больше)

 

Каким образом скрипты и стили могут влиять на контент?

Речь может идти исключительно о ПФ

И, возможно, речь идет о ПФ пользователей мобильных девайсов.

 

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

Сейчас доделываю проект, без сжатия и кеша :

мобильные скорость/удобство 81/99-100 (на странице каталога)

для ПК 86(карточка с кучей не оптимизированных картинок)-90

это включая сверху хороший шрифт в 2 начертаниях

не сжимал файлы (кроме js)  

и проверяйте лучше на http://www.webpagetest.org/ 

[Ivan1990]

Напишите кто-нибудь как всё таки переместить скрипты в футер.

[chukcha]

Напишите кто-нибудь как всё таки переместить скрипты в футер.

модули стоят на офсайте от 50$

[Гість]

Правки делались на стандартном шаблоне версии 1.5.5.1.2 ocStore. 

 

1) Итак, идем в \catalog\controller\common
находим там файлы header.php и footer.php

В файле header.php примерно на 15 строчке находим:

$this->data['links'] = $this->document->getLinks();
$this->data['styles'] = $this->document->getStyles();
$this->data['scripts'] = $this->document->getScripts(); 

копируем всю эту радость и вставляем в footer.php
примерно на 5-ю строчку после строк:

class ControllerCommonFooter extends Controller {
protected function index() {
$this->language->load('common/footer'); 

Сохраняем и закрываем, они нам больше не понадобятся.

 

2) Идем в папку \catalog\view\theme\default\template\common

Соответственно если тема не стандартная, то вместо default - название вашей темы

 

Тут нам нужны header.tpl и footer.tpl

Открываем и вырезаем из header.tpl в footer.tpl

В header.tpl находим:
 

<?php foreach ($links as $link) { ?>
<link href="<?php echo $link['href']; ?>" rel="<?php echo $link['rel']; ?>" />
<?php } ?> 

Вырезаем, и вставляем в footer.tpl перед закрывающимся тегом </body>

 

Из header.tpl можно также вырезать этот код:
 

<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/stylesheet.css" /> 

Это главный файл со стилями, если его засунуть в футер, то страница будет "скакать" при загрузке. На ваш выбор. Лучше оставить в хедере

 

Далее ищем: 
 

<?php foreach ($styles as $style) { ?>
<link rel="<?php echo $style['rel']; ?>" type="text/css" href="<?php echo $style['href']; ?>" media="<?php echo $style['media']; ?>" />
<?php } ?> 

Тоже вырезаем и в футер, ниже кода, который вставили до этого

 

Снова в header.tpl ищем: 
 

<?php foreach ($scripts as $script) { ?>
<script type="text/javascript" src="<?php echo $script; ?>"></script>
<?php } ?> 

Тоже вырезаем и в футер ниже кода, который вставили ранее.

Сохраняем файлы. Теперь если обновить страницу в браузере и посмотреть код - все, кроме 
 

jquery-1.7.1.min.js, 
jquery-ui-1.8.16.custom.min.js
jquery-ui-1.8.16.custom.css
javascript/common.js 

Переместилось в футер. 

Но теперь поломались некоторые плагины, т.к. не все они в стандартном виде поддерживают перенос скриптов в подвал.

 

Эх, ломать - так ломать, давайте еще нижних 2 файла в подвал уберем.

Вырезаем из header.tpl 
 

<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/ui/themes/ui-lightness/jquery-ui-1.8.16.custom.css" />
<script type="text/javascript" src="catalog/view/javascript/common.js"></script> 

И в footer.tpl ниже вставленного ранее кода.

 

Подведем итог:

Теперь в шапке только jQuery и jQueryUI, которые можно объединить в один файл. Запихать их в футер не получилось - все ломается. Может потом и их получится, но и так неплохо. Все остальные скрипты и стили от подключаемых модулей теперь будут выводиться в футере.

 

Но есть и минусы - появились ошибки в инспекторе, отвалилась карусель на главной, в карточке товара сломались табы...
Идем чинить...

Начнем с карусели на главной.

 

3) Идем в папку catalog\view\theme\default\template\module

Находим в ней carousel.tpl

Открываем его, находим код
 

<script type="text/javascript"><!-- 

Под строкой добавляем:
 

jQuery(document).ready(function($) { 

Далее находим конец скрипта
 

});
//--></script> 

перед }); вставляем еще такие же скобки
 

}); 

То есть мы обернули код функцией document ready чтоб он срабатывал после загрузки страницы. В итоге у нас должен получиться такой код:
 

<script type="text/javascript"><!--
jQuery(document).ready(function($) {
$('#carousel<?php echo $module; ?> ul').jcarousel({
vertical: false,
visible: <?php echo $limit; ?>,
scroll: <?php echo $scroll; ?>
});
});
//--></script> 

Сохраняем. Все - карусельку починили.

 

4) Чиним табы.

 

Папка catalog\view\theme\default\template\product

файл product.tpl

В самом низу ищем 

<script type="text/javascript"><!--
$('#tabs a').tabs();
//--></script> 

Верхнюю и нижнюю строчки этого кода удаляем, они нам не нужны, оставляем только 
 

$('#tabs a').tabs(); 

Вырезам его, ниже есть код:
 

<script type="text/javascript"><!--
$(document).ready(function() {
if ($.browser.msie && $.browser.version == 6) { 

Между последней и предпоследней строчками вставляем ранее вырезанный код, получится примерно так:
 

<script type="text/javascript"><!--
$(document).ready(function() {
$('#tabs a').tabs(); // то, что мы вставили
if ($.browser.msie && $.browser.version == 6) {
$('.date, .datetime, .time').bgIframe();
// ... и какой-то код ...

Сохраняем.

Все - табы тоже должны работать.

 

Теперь будет глючить переключение вида (сетка/список) в списке товаров в категориях.

и это починим...

[Гість]

5) Чиним список категорий

Папка \catalog\view\theme\default\template\product

Файл category.tpl

 

Примерно 44 строка ищем код:
 

<a onclick="display('grid');">

Меняем на:
 

<a class="switch"> 

Примерно 110 строка:

<script type="text/javascript"><!--

Под ней дописываем:

$(document).ready(function() { 
view = $.totalStorage('display');
if (view) {
	display(view);
} else {
	display('list');
}	 

Примерно 150 строка:
 

$('.display').html('<b><?php echo $text_display; ?></b> <?php echo $text_list; ?> <b>/</b> <a onclick="display(\'grid\');"><?php echo $text_grid; ?></a>'); 

Меняем onclick="display(\'grid\');" на class="switch", получится
 

$('.display').html('<b><?php echo $text_display; ?></b> <?php echo $text_list; ?> <b>/</b> <a class="switch"><?php echo $text_grid; ?></a>'); 

187 строка
 

$('.display').html('<b><?php echo $text_display; ?></b> <a onclick="display(\'list\');"><?php echo $text_list; ?></a> <b>/</b> <?php echo $text_grid; ?>'); 

Снова меняем onclick="display(\'list\');" на class="switch"

на 193 строке удаляем код:
 

view = $.totalStorage('display');

if (view) {
	display(view);
} else {
	display('list');
} 

Перед закрытием скрипта, (последние 2 строчки)
 

//--></script> 
<?php echo $footer; ?> 

Вставляем код:
 

	$(document).on("click", ".switch", function(event) {
	   if (view == 'list') {
			display('grid');
			view = 'grid';
		 } else if (view == 'grid') {
			display('list');
			view = 'list';
		 } 	 
	});

}); 

Сохраняем. 
Если все сделано правильно и я ничего не забыл упомянуть, то должно работать  :-)

 

Больше багов не нашел. Если найдете - отпишитесь. 

[indevor]

Почти всё работает. Совместно с filter pro - не работает слайдер, остальное - ок. (не чинил товар сеткой\списком, так как завелось само)

[CaptainPower]

Подведем итог:

Теперь в шапке только jQuery и jQueryUI, которые можно объединить в один файл.

эээ их лучше грузить c репозитория яндекса

[Helloween]

Эх, многабукафф... Не сегодня...

[Гість]

Почти всё работает. Совместно с filter pro - не работает слайдер, остальное - ок. (не чинил товар сеткой\списком, так как завелось само)

 

Если изначально в стандартном шаблоне выводится списком - то видно как верстка съезжает у описания товара на кнопки. Слайдер можно заменить, к примеру, на бесплатный owl slider - он не конфликтует. Ну или попытаться скрипты обернуть в $(document).ready(function() {    }); 

[Гість]

эээ их лучше грузить c репозитория яндекса

Я против подгрузки файлов с чужих серверов. Особенно в последнее время у нас в РК лежат то сервисы Гугла, то Яндекс через раз открывается. Может наши провайдеры что-то мутят, может сами поисковики что-то обновляют. Но факт в том, что если сторонний ресурс по какой-то причине недоступен у посетителя, то файлы не загрузятся и ваш сайт тоже работать не будет. Лучше объединить, сжать и в кэш браузера на стороне сервера запихать. Все равно эти файлы редко кто обновляет.

[indevor]

Если изначально в стандартном шаблоне выводится списком - то видно как верстка съезжает у описания товара на кнопки. Слайдер можно заменить, к примеру, на бесплатный owl slider - он не конфликтует. Ну или попытаться скрипты обернуть в $(document).ready(function() {    });

Консоль чистая, что то не могу понять, где и что не так....

[Гість]

Консоль чистая, что то не могу понять, где и что не так....

Смотреть исходник страницы, где не работает. Изучать скрипты которые на странице. Искать скрипты которые не обернуты в document ready и пробовать оборачивать.