async & defer в WordPress — ускоряем загрузку JavaScript

async & defer — это очень полезные механики, которые позволяют существенно ускорить загрузку страниц и их отрисовку для посетителей. Однако они относительно новые в мире JavaScript. И потому в мире WordPress еще существует много скриптов которые не используют их. Но это легко решается через wp_script_add_data.

Описание метода wp_script_add_data есть тут https://developer.wordpress.org/reference/functions/wp_script_add_data/

Как настроить?

Выглядит это примерно так:

function wpdemo_enqueue_scripts() {
    wp_enqueue_script( 'wpdemo-respond', get_template_directory_uri().'/js/respond.min.js' );
    wp_script_add_data( 'wpdemo-respond', 'conditional', 'lt IE 9' );
 
    wp_enqueue_script( 'wpdemo-html5shiv',get_template_directory_uri().'/js/html5shiv.js');
    wp_script_add_data( 'wpdemo-html5shiv', 'defer', true );
}
add_action( 'wp_enqueue_scripts', 'wpdemo_enqueue_scripts' );

Пример как добавляют async & defer в TwentyTwenty

Еще для общего развития полезно посмотреть как внедряют async & defer в новой теме для WordPress TwentyTwenty https://github.com/WordPress/twentytwenty/pull/30/files

Источник: https://wpcraft.ru/blog/async-defer-v-wordpress-uskoryaem-zagruzku-javascript/

Анатолий Юмашев

Настоящий шаман, планирует жить до 150 лет. Родом из Тюмени, жил в Санкт-Петербурге, Москве и землянке (по его словам). Думает, что знает WordPress лучше всех в мире, кроме еще 10 человек. Делает всякие безумные вещи, которые иногда даже работают. Может зарядить или полностью отнять энергию у 50 человек. Один из ярких участников российского WordPress сообщества, а также создатель самого продаваемого и обсуждаемого плагина для синхронизации Woocommerce и МойСклад. Умеет исчезать сквозь землю. Любит WordPress, кальян, сигары и Льва Толстого. Может жить и работать вообще без еды. Делает сайты от 10 млн рублей.

Добавить комментарий

%d такие блоггеры, как: