Недавно один из наших читателей спросил нас, как они могут переместить JavaScripts в нижнюю часть в WordPress, чтобы увеличить их Google балл скорости страницы. Мы рады, что они спросили, потому что, честно говоря, мы хотели написать об этом. Ранее мы уже говорили о том, как правильно добавлять JavaScripts и CSS стили в WordPress. В этой статье мы покажем вам, как переместить JavaScripts в самый низ в WordPress, чтобы вы могли улучшить время загрузки вашего сайта и показатель скорости страниц Google.
Преимущества перемещения JavaScripts в самый низ
JavaScript — это язык программирования на стороне клиента. Он выполняется и запускается веб-браузером пользователя, а не вашим веб-сервером. Когда вы размещаете JavaScript в самом верху, браузеры могут выполнить или обработать JavaScript до загрузки остальной части вашей страницы. Когда JavaScript перемещается в самый низ, ваш веб-сервер быстро отрисовывает страницу, а затем браузер пользователя выполняет JavaScript. Поскольку вся работа по рендерингу на стороне сервера уже выполнена, JavaScript будет загружаться в фоновом режиме, что ускорит общую загрузку.
Это улучшит ваш показатель скорости при тестировании с Google скорость страницы или Yslow. Google и другие поисковые системы теперь рассматривают скорость страницы как одну из матриц производительности при отображении результатов поиска. Это означает, что сайты, которые загружаются быстрее, будут более заметно отображаться в результатах поиска.
Правильный способ добавления скриптов в WordPress
WordPress имеет мощную систему регистрации, которая позволяет разработчикам тем и плагинов добавлять свои скрипты в очередь и загружать их по мере необходимости. Правильная загрузка скриптов и стилей может значительно улучшить скорость загрузки страницы.
Чтобы показать вам базовый пример, мы добавим немного JavaScript в тему WordPress. Сохраните ваш JavaScript в .js файл и поместить его .js файл в каталоге js вашей темы. Если в вашей теме нет директории для JavaScripts, то создайте ее. После размещения файла скрипта отредактируйте функции вашей темы.php файл и добавьте этот код:
функция wpb_adding_scripts() < wp_register_script('my-amazing-script', get_template_directory_uri() . 'https://cdn4.wpbeginner.com/js/my-amazing-script.js','','1.1', true); wp_enqueue_script('my-amazing-script'); >add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
В этом коде мы использовали функцию wp_register_script(). Эта функция имеет следующие параметры:
Чтобы добавить скрипт в нижний колонтитул или нижнюю часть страницы WordPress, все, что вам нужно сделать, это установить параметр $in_footer в true .
Мы также использовали другую функцию get_template_directory_uri(), которая возвращает URL для каталога шаблонов. Эта функция должна использоваться для регистрации скриптов и стилей в темах WordPress. Для плагинов мы будем использовать функцию plugins_url().
Проблема:
Проблема заключается в том, что иногда плагины WordPress добавляют свой собственный JavaScript на страницы внутри или в тело страницы. Для того чтобы переместить эти скрипты в самый низ, вам нужно отредактировать файлы плагинов и правильно переместить скрипты в самый низ.
Поиск источника JavaScript
Откройте ваш сайт в веб-браузере и просмотрите источник страницы. Вы увидите ссылку на файл JavaScript с указанием местоположения и происхождения файла. Например, скриншот ниже говорит нам о том, что наш скрипт принадлежит плагину под названием ‘test-plugin101’. Файл скрипта находится в директории js.
Иногда вы увидите, что JavaScript добавлен непосредственно в страницу, а не связан с ней через отдельный плагин .js файл. В этом случае вам придется деактивировать все ваши плагины по очереди. Обновляйте страницу после деактивации каждого плагина, пока не найдете тот, который добавляет скрипт на ваши страницы. Если JavaScript не исчезает даже после деактивации всех плагинов, то попробуйте перейти на другую тему, чтобы проверить, не добавлен ли JavaScript вашей темой.
Регистрация и включение скриптов
После того как вы нашли плагин или тему, которая добавляет JavaScript в раздел заголовка, следующим шагом будет выяснить, где у плагина есть вызов файла. В одном из PHP-файлов вашей темы или плагина вы увидите обращение к этому скрипту .js файл.
Если плагин или тема уже используют enqueuing для добавления JavaScript файла, то все, что вам нужно сделать, это изменить функцию wp_register_script в вашем плагине или теме и добавить true для параметра $in_footer. Например, так:
wp_register_script('script-handle', plugins_url('js/script.js' , __FILE__ ),'','1.0',true);
Предположим, что ваш плагин или тема добавляет необработанный JavaScript в заголовок или между контентом. Найдите необработанный код JavaScript в файлах плагина или темы, скопируйте JavaScript и сохраните его в файле .файл js. Затем используйте функцию wp_register_script(), как показано выше, чтобы переместить JavaScript в самый низ.
Примечание редактора: Важно понимать, что когда вы вносите изменения в файлы ядра и обновляете плагин, то ваши изменения не будут отменены. Лучшим способом сделать это будет отменить регистрацию скрипта и заново зарегистрировать его в функциях вашей темы.php файл. Смотрите этот учебник.
Помимо перемещения скриптов в нижний колонтитул, вам также следует рассмотреть возможность использования более быстрого плагина социальных сетей и ленивой загрузки изображений. Наряду с этим вы также должны использовать W3 Total Cache и MaxCDN для улучшения скорости вашего сайта.
Мы надеемся, что эта статья помогла вам переместить JavaScripts в самый низ в WordPress и улучшить скорость работы страницы. Для вопросов и обратной связи, пожалуйста, оставьте комментарий ниже.
Источник: www.wpbeginner.com