Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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


Recommended Posts

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

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

Надіслати
Поділитися на інших сайтах

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

$(document).ready(function() {
...
$(window).load(function() {
Надіслати
Поділитися на інших сайтах

Пруф в студию

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

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

 

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

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

1

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

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

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

2

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

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

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

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

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

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

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

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

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

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

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

 

0KAgLKZI6MGDrl.jpg

Надіслати
Поділитися на інших сайтах

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

 

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

 

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

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

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

 

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

Надіслати
Поділитися на інших сайтах

  • 1 month later...

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

Надіслати
Поділитися на інших сайтах

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

Надіслати
Поділитися на інших сайтах

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

Надіслати
Поділитися на інших сайтах

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

Змінено користувачем indevor
Надіслати
Поділитися на інших сайтах


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

 

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

 

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

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

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

 

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

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

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

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

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

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

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

Надіслати
Поділитися на інших сайтах


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

модули стоят на офсайте от 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';
		 } 	 
	});

}); 

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

 

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

Надіслати
Поділитися на інших сайтах

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

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

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

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

 

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

Надіслати
Поділитися на інших сайтах

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

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

Надіслати
Поділитися на інших сайтах

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

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

Надіслати
Поділитися на інших сайтах


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

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

Надіслати
Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.