Jump to content

Recommended Posts

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites
А иначе как начал обещать недавно гугл - санкции в ранжировании.

 

Пруф в студию

Share this post


Link to post
Share on other sites

Пруф в студию

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

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

 

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

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

1

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

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

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

2

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

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

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

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

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

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

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

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

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

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

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

 

0KAgLKZI6MGDrl.jpg

Share this post


Link to post
Share on other sites

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

 

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

 

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

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

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

 

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Edited by indevor

Share this post


Link to post
Share on other sites

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

 

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

 

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

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

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

 

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

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

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

Правки делались на стандартном шаблоне версии 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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.