Удалите код препятствующий отображению

Если вам когда-либо приходилось анализировать свои сайты с помощью сервиса 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');