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

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


Recommended Posts

не вышло(

пришлось

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/filterpro.min.js"></script>

вынести в шапку

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


Советы "бывалого":

эээ не стоит все подряд объединять, некоторые скрипты не стоят что бы их писать в отдельный js файл.

эээ зачем ты собираешься грузить библиотеку в начале страницы, даже перед контентом?

эээ а ты посмотрел сколько всего скриптов грузятся, может им правила выделить на загрузку или их объединить? 

эээ а зачем загружать лишние скрипты? 

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


Советы "бывалого":

эээ не стоит все подряд объединять, некоторые скрипты не стоят что бы их писать в отдельный js файл.

эээ зачем ты собираешься грузить библиотеку в начале страницы, даже перед контентом?

эээ а ты посмотрел сколько всего скриптов грузятся, может им правила выделить на загрузку или их объединить? 

эээ а зачем загружать лишние скрипты? 

Это в мой адрес?

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

это к теме топика)

В идеале - да. Но для этого пол движка и модулей перелопатить придется. Или юзать платные модули. Я предложил простой бесплатный вариант, который добавит пару циферок в PageSpeed =)

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

глупости, ничего не надо "перелопатывать". мы наверное по разному смотрим на проблему. 

Я с удовольствием посмотрел бы на вашу реализацию данной задачи

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

Все думал как бы перенести ВСЕ скрипты в подвал. Чтоб Гуглу вообще докопаться было не до чего. Вчера пришла идея - в футере после всех подключаемых скриптов, которые мы уже переместили добавить переменную. А в модулях, которые свой JS-код вставляют внутри <body> реализовать сохранение этого кода в эту переменную. При этом эта переменная будет вызываться только на тех страницах, где используется этот модуль. 
Звучит просто, но долго ломал голову как заставить Опенкарт передавать значение переменной из любого модуля в футер без особых заморочек. 

 

Наткнулся на super global array $GLOBALS. Пока не выяснил возможные подводные камни при ее использовании, но потестил на демке главной страницы - работает  :eek: 

Код правда еще сырой, как допилю и протестирую - выложу. 

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

Пока не выяснил возможные подводные камни при ее использовании

 

Явных камней нет

Но, это практически то же самое, что пользовать  global $var

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

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

 

UPD

Вроде нащупал откуда ноги растут. Тестирую.

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

В общем метод оказался сложным. Пусть лучше jQuery останется в шапке.  :? 
А если сильно хочется все в подвал перенести - то лучше купить модуль. Не такие они и дорогие  ;)

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

  • 3 weeks later...

В общем при одном jQuery в шапке выдает 95/100 в PageSpeed https://developers.google.com/speed/pagespeed/insights/?hl=ru&url=luxmassage.kz&tab=desktop

Думаю вполне неплохо

Спасибо, Dragon, что не поленились описать Ваш метод перенесения скриптов в footer. 95/100 - действительно хороший результат, если не страдает правильная работоспособность скриптов.

 

При первой загрузке Вашего сайта всплыли такие нюансы:

1. Не смог переключиться на отображение товаров "Список / Сетка"

2. Не открывается корзина (не добавляется class="active" к <div id="cart">)

3. Табов вообще нет на карточке товара.

 

1 и 2 начинает работать после перезагрузки страницы. 3 не работает.

 

Вы подключили jquery-ui-1.8.16.custom.min.js после всех скриптов, из-за этого табы скорее всего и не работают.

Если будете исправлять, отпишитесь о результатах.

Спасибо

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


LuckyPerson, вы внимательно читали инструкцию? Я писал что можно оставить jQuery и UI в шапке, а остальное убрать. Потом написал что можно и UI убрать, но надо чинить некоторые скрипты, как раз табы, переключение сетки...

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

не надо ничего чинить, скорее всего ваши скрипты просто должны вызываться после вызова библиотеки, в общем все скрипты после библиотеки ( не считая чистого js)

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


Видимо вам виднее  :-) Проблема в том, что если скрипт jQuery Ui положить в футер, то некоторые модули, перестают работать, потому что разработчики грузят их в теле body, и без правок они работать не будут

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

  • 3 weeks later...

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

}); 

Сохраняем. 

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

 

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

Делаю все как Вы написали! Все замечательно, кроме "SUPER MEGA MENU" - оно перестает отображаться. Как можно решить проблемку не подскажете?

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


Странно. Конфликтов не обнаружил. А есть ссылка где скрипты перенесены в подвал? 
Самый простой способ решения проблемы - вынести скрипты

<script type="text/javascript" src="catalog/view/supermenu/supermenu-responsive.js?v=22"></script>
<script type="text/javascript" src="catalog/view/supermenu/jquery.hoverIntent.minified.js"></script>
в шапку, сразу после jQuery. 
 
Надіслати
Поділитися на інших сайтах

 

Странно. Конфликтов не обнаружил. А есть ссылка где скрипты перенесены в подвал? 

Самый простой способ решения проблемы - вынести скрипты

<script type="text/javascript" src="catalog/view/supermenu/supermenu-responsive.js?v=22"></script>
<script type="text/javascript" src="catalog/view/supermenu/jquery.hoverIntent.minified.js"></script>

в шапку, сразу после jQuery. 

 

 

http://shop1.gontbox.in.ua/ перенесла скрипты в футер и добавила в шапку два скрипта supermenu, но почему-то все равно ничего не получается. Может я что-то делаю не так?

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


Видимо откатили назад к моменту когда я посмотрел =) В коде обнаружил

vde1coxriuzy.png

 

Кавычки то есть, то нет. В теге <a> зачем-то <script> лежит и т.д. С такой версткой возможны глюки. Рекомендую привести код в нормальный вид - с кавычками. Скрипты вынести отдельно или хотя бы в блочные теги <div>
Могу порекомендовать плагин 
https://opencartforum.com/files/file/1337-mcj-%D0%B0%D0%B2%D1%82%D0%BE%D0%BC%D0%B0%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%BE%D0%B5-%D0%BE%D0%B1%D1%8A%D0%B5%D0%B4%D0%B8%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B8-%D1%81%D0%B6%D0%B0%D1%82%D0%B8%D0%B5-css-js-smartoptimizer/

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

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

  • 2 years later...
В 13.04.2015 в 19:13, Dragon сказал:

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

Сохраняем.

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

 

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

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

во втором опенкарте не работает карусель

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


есть вообще какое то реально доказанное влияние на ранжирование коненчно при условии что нет явных косяков и страница (полезный контент) достаточно быстро подгружается без учета скриптов типа метрик и иных скриптов (виджетов вк к примеру) которые реально замедляют загрузку но груузятся уже после собственного контента? 

 

короче сомнительно это все

ради интереса прошелся по вч в регионе своем и проанализировал сайты с топа в гметриксе: у многих очки беспонтовые и время загрузки оставляет желать (у некоторых по 30 с) но тем не менее они в топе. 

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


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

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

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

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

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

Вхід

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

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

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

×
×
  • Створити...

Important Information

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