Перейти к содержимому



Не понятная ошибка JS при оптимизации WP под PageSpeed Insights

#1

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



Вячеслав

Вячеслав
  • Пользователь
  • 375 сообщений
  • Репутация: 2
0

Отправлено 20 Февраль 2017 - 15:43

Приветствую!

Выполняю оптимизация сайта на WP под Google PageSpeed Insights

 

Все стили и скрипты перенесены в футер и подключаются асинхронно:

var jQ = false;
function initJQ() {
  if (typeof(jQuery) == 'undefined') {
    if (!jQ) {
      jQ = true;
      document.write('<scr' + 'ipt type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></scr' + 'ipt>');
    }
    setTimeout('initJQ()', 50);
  } else {
    (function($) {
    $(function() {

      // здесь пишем jQuery код
$("head").append('<link rel="stylesheet" href="http://klinkerzakazat.ru/wp-content/themes/tutorial/css/bootstrap.min.css">');
$("head").append('<link rel="stylesheet" href="http://klinkerzakazat.ru/wp-content/themes/tutorial/style.css" type="text/css" media="screen">'); 


$("head").append('<script type="text/javascript" src="/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1"><\/script>');

$("head").append('<script type="text/javascript" src="http://klinkerzakazat.ru/wp-content/themes/tutorial/js/bootstrap.min.js"><\/script>');
$("head").append('<script type="text/javascript" src="http://klinkerzakazat.ru/wp-content/themes/tutorial/js/jquery.mobile-1.4.5.min.js"><\/script>');

//plg contact-form-7
$("head").append('<script type="text/javascript" src="/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js"><\/script>');
$("head").append('<script type="text/javascript">var _wpcf7 = {"recaptcha":{"messages":{"empty":"\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u0412\u044b - \u043d\u0435 \u0440\u043e\u0431\u043e\u0442."}},"cached":"1"};<\/script>');
$("head").append('<script type="text/javascript" src="/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.6.1"><\/script>');
//end plg contact-form-7

$("head").append('<script type="text/javascript" src="/wp-content/plugins/fancybox-for-wordpress/fancybox/jquery.fancybox.js"><\/script>');
$("head").append('<script type="text/javascript" src="/wp-content/plugins/really-simple-popup/js/hs_rsp_popup.min.js?ver=4.5.5"><\/script>');
$("head").append('<script type="text/javascript" src="/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20"><\/script>');

$("head").append('<script type="text/javascript" src="http://klinkerzakazat.ru/wp-content/themes/tutorial/mainslider/js/jquery.easing.min.1.3.js"><\/script>');
$("head").append('<script type="text/javascript" src="http://klinkerzakazat.ru/wp-content/themes/tutorial/mainslider/js/jquery.skitter.min.js"><\/script>');
$("head").append('<script type="text/javascript" src="http://klinkerzakazat.ru/wp-content/themes/tutorial/malihu-custom-scrollbar-plugin-master/jquery.mCustomScrollbar.concat.min.js"><\/script>');

$("head").append('<script type="text/javascript" src="http://klinkerzakazat.ru/wp-content/themes/tutorial/main.js"><\/script>');

$("head").append('<script id="c4s_js_0abb156b87b8333f806d1a2469132348" type="text/javascript" src="http://www.virtualofficetools.ru/c4s/widget.55190.0abb156b87b8333f806d1a2469132348.js"><\/script>');


    })
    })(jQuery)
  }
}
initJQ();

Счетчики в футере я вообще закомментировал (метрика и аналитикс), при загрузке страницы в консоле нет ошибок JS, но вот на странице с формой (http://klinkerzakazat.ru/zakaz/) при клике на кнопку отправить появляется вот такая ошибка (в итоге форма не отправляется): 

 

aba32-clip-49kb.png?nocache=1

 

 

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

 


Если снимаю комментарий с счетчиков и подключаю их, то в консоле вот такие ошибки:

6dc46-clip-80kb.png?nocache=1Что то блокирует счетчики, но не понятно что... может касперский антивирус?


 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. PageSpeed Insights - как считает?
  2. Гугл сказал: "Используйте кэш браузера"
  3. Как довести до ума стандартный шаблон Wordpress?
  4. Конфликт после отправки JavaScript в подвал.
  5. Как оптимизировать кеш браузера?

#2

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



Вячеслав

Вячеслав
    Topic Starter
  • Пользователь
  • 375 сообщений
  • Репутация: 2

Отправлено 20 Февраль 2017 - 16:24

Отключил плагин 717f6-clip-23kb.png?nocache=1

 

вроде теперь нет этой ошибки.


  • 0

#3

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



ShowPrint

ShowPrint
  • Пользователь PRO
  • 2 472 сообщений
  • Репутация: 645

Отправлено 20 Февраль 2017 - 16:43

@Вячеслав, хорошо что решилось.

 

А вы решили в ГугПэйдже 100% результата добиться? Зачем? За это бонусов и преференций будет не так много (если будут вообще), а посмотрите как коряво стал выглядеть сайт при загрузке - грузится одно, а потом прыгает и скачет подгружая стили.

На мой взгляд это не на пользу ПФ пойдёт...


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#4

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



avfinance

avfinance
  • Пользователь
  • 33 сообщений
  • Репутация: 7

Отправлено 21 Февраль 2017 - 13:49

Все стили и скрипты перенесены в футер и подключаются асинхронно

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

Скрипты и стили подключаются через функции wp_enqueue_style и wp_enqueue_script.

Погуглите как это делается. Иначе в будущем вас может ждать очень серьезный геморой :)

 

PS А зачем вам скрипт формы обратной связи плагина contact-form-7 на каждой странице? Этот скрипт можно вывести только на той странице, где расположена форма контактов.

Да, и зачем вам "jquery-migrate"? Есть какие-то проблемы с работой скриптов? Насколько я помню, эта библиотека нужна, если подключена старая версия jquery.

 

PSS Кстати, если подключена сервисы статистики (Метрика, Аналитика,..) то выжать 100% уже вряд ли получится


  • 1

#5

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



Вячеслав

Вячеслав
    Topic Starter
  • Пользователь
  • 375 сообщений
  • Репутация: 2

Отправлено 21 Февраль 2017 - 14:28

@ShowPrint, да были косяки при прогузке, но теперь стили вынесены в head и нет таких дерганий. 100% небыло цели достичь, была цель достичь работоспособности форм и уйти в зеленую зону, теперь это получилось https://developers.g....ru/&tab=mobile

@avfinance, если подключать по кодексу то это только с встраиванием блокирующих стилей и явоскрипта в футер вот так:

/*** FIX Google PageSpeed Insights ***/
function footer_enqueue_scripts(){
    remove_action('wp_head','wp_print_scripts');
    remove_action('wp_head','wp_print_head_scripts',9);
    remove_action('wp_head','wp_enqueue_scripts',1);
    add_action('wp_footer','wp_print_scripts',5);
    add_action('wp_footer','wp_enqueue_scripts',5);
    add_action('wp_footer','wp_print_head_scripts',5);
}
add_action('after_setup_theme','footer_enqueue_scripts');

я пробовал так делать но гугл ругается все равно, и пишет подключайте скрипты асинхронно... Вобщем с этим PageSpeed Insights гемморой конкретный, но все же сайт действительно быстрее прогружается, это даже янекс метрика фиксирует.


  • 0

#6

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



ShowPrint

ShowPrint
  • Пользователь PRO
  • 2 472 сообщений
  • Репутация: 645

Отправлено 21 Февраль 2017 - 14:44

если подключена сервисы статистики (Метрика, Аналитика,..) то выжать 100% уже вряд ли получится

Аха, как минимум будет ругаться на отсутствие кеширования )))

 

 

Вобщем с этим PageSpeed Insights гемморой конкретный, но все же сайт действительно быстрее прогружается

Я забил на "зеленку" - выводил до 90+%, но мой разум и наблюдения показали что это в некоторых случаях выходит боком. Точно пока ничего не скажу - гипотеза на проверке...

 

PS @Вячеслав, подолбите хостинг на предмет времени ответа сервера - показатели еще больше улучшатся  ;)


Сообщение отредактировал ShowPrint: 21 Февраль 2017 - 15:01

  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#7

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



avfinance

avfinance
  • Пользователь
  • 33 сообщений
  • Репутация: 7

Отправлено 21 Февраль 2017 - 15:07

если подключать по кодексу то это только с встраиванием блокирующих стилей и явоскрипта в футер вот так:

А вы не пробовали с помощью плагинов? Например, есть замечательный autoptimize, который и минифицирует, и собирает в один файл, еще и в футер засунет :)

 

Я забил на "зеленку" - выводил до 90+%

Я морду сайта до 90% прокачал:

http://prnt.sc/ebiq9s

Больше всего обожаю, когда гугл ругается на картинки и пишет что-то вроде "чтобы уменьшить их размер на 589 Б (34 %)". 586 байт очень критичный пункт в оптимизации и невероятно препятствует загрузке страницы :)

А вот со внутренними страница все куда печальнее. Там бывает пару сотен комментариев, видео, десяток-другой картинок, соц. кнопки... И все это запросы, запросы, запросы...)))


  • 1

#8

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



ShowPrint

ShowPrint
  • Пользователь PRO
  • 2 472 сообщений
  • Репутация: 645

Отправлено 21 Февраль 2017 - 15:54

@avfinance, а я "чистым" кодом дооптимизировался до того, что в html на морде осталось 138 строк кода и ГПС теперь не успевает загрузить "облегченные" картинки бэкграунда (прописанные в линкованном css внутри head), до того как весь остальной html-код "влетает" в браузер и всё остальное догружает в асинхроне  :wacko:

Теперь получается что 9,11кБ бэкграунда еще не загрузились, а уже </html> настал  :D  и ПэйджСпид ворчит:

Передавайте в первую очередь видимую часть страницы – включите весь необходимый контент непосредственно в HTML-ответ.

После получения всех данных HTML с сервера удалось отобразить только 25 % от общего объема содержания из верхней части страницы

 

Так что теперь стоит обратная задача - замедлить загрузку  :lol:

Ну не совать же стили из кешируемого файла в <head><style>...</style></head> в конце-концов...  :angry:

 


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#9

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



Вячеслав

Вячеслав
    Topic Starter
  • Пользователь
  • 375 сообщений
  • Репутация: 2

Отправлено 05 Март 2017 - 18:05

Вообщем с асинхронным подключением скриптов в футере решил таким кодом\функцией:

<script>
// <![CDATA[
var jQ = false;
function initJQ() {
  if (typeof(jQuery) == 'undefined') {
    if (!jQ) {
      jQ = true;
      ////code.jquery.com/jquery-1.10.2.min.js
      ///wp-includes/js/jquery/jquery.js?ver=1.12.4
      document.write('<scr' + 'ipt type="text/javascript" src="/wp-includes/js/jquery/jquery.js?ver=1.12.4"></scr' + 'ipt>');
      document.write('<scr' + 'ipt type="text/javascript" src="/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1"></scr' + 'ipt>');
      document.write('<scr' + 'ipt type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/bootstrap.min.js"></scr' + 'ipt>');
      document.write('<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/bootstrap.min.css">');
    }
    setTimeout('initJQ()', 50);
  } else {
    (function($) {
    $(function() {

// здесь пишем jQuery код


//plg contact-form-7
$("head").append('<script type="text/javascript" src="/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js"><\/script>');
$("head").append('<script type="text/javascript">var _wpcf7 = {"recaptcha":{"messages":{"empty":"\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u0412\u044b - \u043d\u0435 \u0440\u043e\u0431\u043e\u0442."}},"cached":"1"};<\/script>');
$("head").append('<script type="text/javascript" src="/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.6.1"><\/script>');
//end plg contact-form-7

....


    })
    })(jQuery)
  }
}
initJQ();
// ]]>
</script>

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru