Если вам когда-либо приходилось анализировать свои сайты с помощью сервиса Google PageSpeed Tools, то вы наверняка уже сталкивались с данной рекомендацией: «Удалите код JavaScript, препятствующий отображению».
Предупреждение сработает при обнаружении в HTML-документе кода, который ссылается на внешний блокирующий отображение страницы файл JavaScript. В результате, до окончания процесса загрузки внешнего скрипта, браузер будет вынужден временно остановить вывод на экран контента страницы.
Вы можете не придавать этому значения, но в своей совокупности эти факторы оказывают влияние на позиции сайта в поисковой выдаче Google. Согласно заявлениям Google, сайты будут в большей мере оцениваться не по количеству ссылающихся на них доменов, а на основе данных, включающих в себя поведенческий таргетинг и скорости загрузки страниц.
Из всего этого можно сделать вывод, что качество технической составляющей сайта, стало одним из факторов ранжирования сайта в поисковой системе Google.
Как удалить код, препятствующий отображению страницы
Перейдем к технической стороне решения вопроса. Чтобы убрать данное предупреждение: «Удалите код JavaScript, препятствующий отображению», нужно убрать подключение скриптов внутри тега <head>, а затем подключить их в низу страницы. Но не спешите слепо выполнять данную рекомендацию.
В зависимости от размера скрипта и его функций, существует следующие рекомендации по размещению JavaScript:
- скрипты участвующие в процессе отображении страницы необходимо подключать внутри тега
<head>;
- если скрипт не участвует в процессе отображения страницы, необходимо его перенести в страницы;
- скрипты небольшого размера лучше добавить в содержимое HTML-документа;
- используйте атрибут async для асинхронного вызова JavaScript.
Пример асинхронного вызова скрипта:
<script async src="code.js">
Как перенести скрипты в подвал WordPress
У WordPress есть встроенная функция wp_register_script, которая добавляет скрипты в очередь и загружает их при необходимости. Для вывода скрипта в подвале WordPress, необходимо изменить один из параметров вызова данной функции.
Для скриптов, которые необходимо выводить в подвале WordPress, необходимо в файле functions.php добавь параметр true в конец вызова функции wp_register_script.
Формат вызова функции wp_register_script():
wp_register_script( $handle, $src, $deps, $ver, $in_footer );
Для вывода скрипта в подвале WordPress, необходимо установить true в значении параметра $in_footer, как это сделано в примере ниже:
function wpb_adding_scripts() {
wp_register_script('my-script', get_template_directory_uri() . '/js/my-script.js','','1.0', true);
wp_enqueue_script('my-script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
Как вариант, чтобы разместить скрипт в подвале WordPress, можно выполнить повторную регистрацию JavaScript:
function wpb_adding_scripts() {
wp_deregister_script('my-script');
wp_register_script('my-script', get_template_directory_uri() . '/js/my-script.js','','1.0', true);
wp_enqueue_script('my-script');
}
add_action( 'wp_print_scripts', 'wpb_adding_scripts' );
Если ваши скрипты не участвуют в отображении страницы, можно переместить загрузку всех внешних скриптов в подвал WordPress. Для этого используем функцию ниже:
function footer_enqueue_scripts() {
# Удаляем JavaScript из заголовка
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
# Выводим в footer
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');