Перейти к содержанию

Рекомендуемые сообщения

Всем известно что гуглевский 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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

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

 

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

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

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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();
// ... и какой-то код ...

Сохраняем.

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

 

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

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

  • +1 4

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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';
		 } 	 
	});

}); 

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

 

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

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.