шуточная, НО полезная статья…
Сегодня попробуем распределить загрузку нашего блога браузером более правильно: вдарим карточкой в бубен ♦ чтобы, так сказать, у нас была асинхронная загрузка javascript. Это полезно для скорости сайта в общем движении SEO индульгенции.
А в финале поделюсь защитной молитвой и скриптом удач.
Этой молитве выучил меня один современный монах ослушник.
Итак:
очередь загрузки js перенесём в подвал – wp_footer
…т.е дадим первично подгрузиться одёжке сайта – всей полезной визуальной графической составляющей страницы – незыблемо полезной же для оценки посетителя, а уж потом понтам и эффектам.
Но здесь дело вот в чём: когда мы приступаем к оптимизации блога (после того как нагородили чёрт знает чего), – а теперь, в частности, увеличиваем скорость его загрузки, стоит обращать взор на многие параметры нашей темы и выбранной позы в блогосфере, — всё сугубо классически — что хорошо Васе , то — плохо Василисе, по-началу) …точно также и со скриптами – могут быть конфликты!
Техника развивается стремительно, а поэтому и внимань к антихристу поисковику требуется острее!
Некоторые шаблоны уже могут иметь какие-то SEO-фишки оптимизации, так что изучите свою тему внимательнее – ибо если перенасыщенность — ваш блог падёт пред краплёной картой Явана или Гоги .
Да и вообще, нахрен эти шашни с сео коррупцией.
…магия труда в сайтостроении велика мощностью того, что, начинающие веб разработчики, как известно, хаотично подходят ко всем правилам оптимального интернета, забывая напрочь о каких-то уже ранее выполненных «редакциях» в коде. А это нехорошо — дублирование и хаос действий – поисковик сочтёт вас мазуриком ♠ ♣ ♥ ♦
А посему, как говорилось в каком-то видео (кстати, и этот пост прикручен к ролику)) будет полезно, в корневой папке файлов темы, создать какой-нить документ с любым аглицким названием и расширением txt или даже css (чтоб он отображался в редакторе консоли блога) и тогда вы сможете, не разбрасываясь… записывать какие-то свои пояснения (комментарии) на будущее, касательно ваших всевозможных правок кода.
Хотя !! – редактор файлов в консоли советую отключить для защиты сайта от взлома и вольного пользования непрошеного охальника!
Добавьте такую чудо-строку в файл wp-config.php
– путь таков, для тех которые не знают: ваш_домен/wp-config.php
/**запрет редакции файлов в админке*/
define('DISALLOW_FILE_EDIT', true);
Как только пропишете, редакция в админке будет запрещена!! С этого момента все правки только в файловом менеджере хостинга.
Но – вперёд по теме!
…метнём-ка банчи́шко да пристроим выполнение отработки javascript после загрузки основного содержания страницы: это сократит время развёртывания сайта и привнесёт скоростной эффект. А это важно!
…продолжаем песню о JS: предлагаю, для начала, прописать такую строчку у себя в подвале – т.е. в файле footer.php
(код чуть ниже) — сравнивая его показания, вы сможете отслеживать время загрузки и количество запросов к БД. …и вообще…
счётчик параметров загрузки блога на WordPress
пословица к слову…
…от не соблюдения техники безопасности, люди нИ только умирают, но и рождаются…
Место прописки кодовой строки, то бишь вариант отображения и удовольствия от увиденного, выбирается опытным путём (кто читает этот блог, уже многое знает о способах индийских охальников) так что повторяться не буду… окромя одной моей молитвы о подписках:
Online консультация по настройкам и созданию сайтов на WordPress
Батюшки !! о коде-то забыл…
Вот он:
<?php echo get_num_queries(); ?> запросов. скорость: <?php timer_stop(1); ?>
Вот ещё один вариант (более продвинутый) добавления кода счётчика проверки запросов к БД и скорости загрузки сайта вообще…
…Ну и основное наше сегодняшнее сакральное действо: добавьте нижеследующий код в файл functions.php
(или перед закрывающим тегом ?>
, или как я всегда советую – организуйте в файле ячейки для определённых функциональных циклов: так правильнее и легче ориентироваться).
// перенос js в подвал
add_action('after_setup_theme', 'footer_enqueue_scripts');
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);/* и это группа ВК*/
}
Обращаю ваше внимание на то, что код (вызов функций) может лёгонько конфликтовать, например, с плагином VKontakte API – оцените одну из своих статей, а именно, отключится ли отображение «кнопок соцсетей» или реже «баннер группыВК в сайдбаре» (это если все эти причиндалы были включены посредством плагина – но вот коли пользовались каким-то кодом, подключая эти расширения, то поломки может и не быть).
Всё очень просто: код показанный выше, с англосаксонского сайта, а значит на такую группу ВК не рассчитан, а, соответственно и плагин на все индусские новшества (это если просто).
Дело в том, что такие пёстрые в своих изысках плагины, в коих присутствует великое множество эффектов-дурилок – неизбежно будут конфликтовать: в индустрии js
сосуществует множество полезных библиотек, но вот будут ли они сосуществовать вместе без конфликтов на вашем сайте, коли пользоваться ими бездумно – вопрос!
Так что нагородить js
костылей возможно и без плагинов: но ничего !! станем учиться работать !! и в скором времени многое рассмотрим в плане правильной оптимизации.
Нетерпеливые могут посмотреть линейку моих услуг – обращайтесь…
Однако продолжим – вот упрощённый код (все кнопочки будут работать), но это для тех админов, которые уже имеют представление об изысках SEO оптимaza и ловко лавирует среди беспредела мирового интернетколлапса ))
add_action( 'wp_enqueue_scripts', 'custom_clean_head' );
function custom_clean_head() {
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_enqueue_scripts', 1);
}
…далее узнаем…
как отключить JS скрипт jquery-migrate.min.js
…или вот ещё код: кстати сказать, здорово заработал на одном из тестируемых блогов… (кстати, с этим кодом можно поиграться: ссылка на полезную статью чуть ниже… также узнаем подробно зачем нужно подключение скрипта jquery-migrate.min.js)
/*** отключим JS скрипт jquery-migrate.min.js ***/
add_action( 'wp_enqueue_scripts', 'jquery_in_footer' );
function jquery_in_footer() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', includes_url('/js/jquery/jquery.js'), array(), null, true );
}
/*** ФИН отключим JS скрипт jquery-migrate.min.js ***/
…и вы тестируйте, но – не спеша. Сиюминутно результата можно и не разглядеть… Опять же всякие плагины, кэши и т.п. …словом, с скоропалительными выводами и костылями не торопитесь…
…нужно подробнейшими образом отслеживать правильную работу блога/сайта не только на экранах компьютера, но и на всевозможных мобилках-телефолках))
В общем, понаблюдайте визуально: смотрите в исходнике Ctrl + U какие js-строки уходят из шапки в футер и что из этого получается.
А также стоит ещё раз припомнить какие из сторонних скриптов вами подключались… и как работают связанные с ними опции теперь.
И не сомневайтесь, что оглоблей проблематично поправить психику свирели. Но возможно морально урегулировать. А вот испорченное или упущенное время воспитывать сложнее…
Настройте всё однажды (пока новенький сайт) — и работайте, не возвращаясь взад…
Совет: старайтесь как можно меньше использовать непроверенные плагины. И промоушен неизбежен…
Помните: качественный плагин никак не тормозит сайт (т.е не влияет на скорость загрузки) – влияет величина кода плагина и ошибки – а также тормозить загрузку сайта может и неправильно /ошибочно/ организованный файл functions.php.
Вот более подробная статья… о том, как можно некоторые функции файла функций вынести в плагин: т.е создать как бы добавочный “файл функций”.
…разбить файл функций на отдельные функциональные (тематические) части.
Кстати: вот ещё очень полезная статья о том, как подключить jQuery библиотеки от CDN Google — рационально в плане стремления ко всяким там скоростям загрузки сайта и прочего!
Пример использования: кнопка скопировать текст, ссылку – на чистом JS
На этом занавес представления опускается…
…на рампы пыль печальная ложится…
Касаемо сакральной (упомянутой над куполом статьи) молитвы и удачного скрипта — всё просто: я решил этому посвятить отдельную статью и видеоролик… так что не пропустите.
mihalica.ru !
Спасибо за полезный гайд! Очень пригодился.
Не за что, Кирилл!
…я ещё в финале этой весёлой статьи кое-какие полезные ссылки добавил… ))
день добрый!
3-й код (отключение JS) его пробовать отдельно от первых 2-х? или вместе с первым (перенос в footer)?
Утро доброе Максим!
Нет, третий код отдельно тестируйте.
Прочтите эту статью… там примеры кода более наглядно показаны: библиотеки CDN Google и правила подключения. Возможно, вам будет яснее.
Михаил, добрый день!
На ваш блог попал по запросу “как переместить js в подвал”. Стал пробовать, но изменений не обнаружил, нагрузка не изменилась.
Нашел у вас статью “Как удалить из кода атрибуты сценариев и стилей text/javascript или type text/css”. Проверил свои страницы на валидаторе, нашлось множество ошибок со строками подключения js и css.
Стал у себя искать как организованно подключение js, и…запутался.
В коде страницы обнаружил такой код:
Получается библиотека js у меня подгружается не с серверов google?
1 –
Сначала постарайтесь выяснить причины нагрузки! Обычно НАГРУЗКА из-за ошибок в синтаксисе кода, либо конфликтов (функций, например)…
…а уж потом переносите JS в подвал.
…
Коды атрибутов сценариев и стилей – все атрибуты убрать по статье не получится! Некоторые придётся убирать руками… да и в плагинах их может быть много: так что особо не заморачивйтесь.
– это у вас инъекция Касперского (антивируса) это не совсем то, о чём вы спрашиваете…
Эта строка – инъекция убирается в настройках Антивируса.
Чтобы JS погружались из ядра сайта, файлы нужно закачать на сервер (в корень сайта/шаблона)
Вы ссылку на сайт пришлите, посмотрю… поясню… а так в “слепом” состоянии ничего более дельного подсказать не могу.
Спасибо и от меня))
в комментах нашел для себя кое какие ответы)
Здравствуйте Виталий!!
…да не за что…
Посмотрите повнимательнее (в исходном коде/гл.стр) строки:
366
jquery.flexslider-min.js
и, к примеру – 372
flexslider-setting.js
Попробуйте поиграться с очерёдностью загрузки…
Все эти файлы подгружаются у вас из корня шаблона storexmas.
Неплохо бы всё это как-то организовать на уровне шаблона… (хотя, в шаблоне, насколько я вижу, нормально сделано)
P|S
вообще, вы имеете в виду НАГРУЗКУ НА СЕРВЕР… или всего-то ваша цель оптимизировать скорость загрузки сайта?
спасибо за комментарий!
все верно – оптимизация скорости загрузки!
Ну, если оптимизация, то тогда – да! пробуйте переносить подключаемый в шаблоне JS в подвал… (т.е оптимизировать!)
Только всё это нужно делать осторожно!
У вас в принципе нормальная скорость загрузки! а все незначительные “подтормоза” – это от слайдеров и прочего картинного) …
Михаил, огромное спасибо за разъяснения!
Надеялся в вашей статье “Что такое Яндекс? SEO оптимизация сайта за пределами Google” найти решение проблемы с мета-тегом , почему Yandex упорно не хочет видеть описание. Не сталкивались с подобным?
…мета-тег description
Эта статья более теоретическая…
Где не видит Яндекс метатег? в Вебмастере…
Метатег у вас сделан правильно: https://prnt.sc/l36bl1 и все валидаторы (которыми сейчас проверил) замечательно видят дескрипшн вашего сайта!
Всё стальное решайте в вебмастере: проверьте доступ страницы… и пр.
Яндекс должен видеть все метатеги вашего сайта!
…
Если имеете в виду то, что Яндекс не видит теги в смысле микроразметки, то нужно внедрять schema.org, тогда всё будет ОК.
Именно Вебмастер не видит дескрипшн. Возможно просто надо подождать…
Спасибо вам, Михаил, за внимание! Много полезного в вашем блоге!
Вам, Максим, спасибо за внимание и вопросы непраздные))