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

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/

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

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

add_action( 'wp_enqueue_scripts', function(){
    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 support for async and defer params
add_filter( 'script_loader_tag', function($tag, $handle){
    if ( wp_scripts()->get_data( $handle, 'defer' ) ) {
        $tag = str_replace( '></', ' defer></', $tag );
    }
    if ( wp_scripts()->get_data( $handle, 'async' ) ) {
        $tag = str_replace( '></', ' async></', $tag );
    }
    return $tag;
}, 10, 2 );

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

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

У этой записи 2 комментариев

  1. А ты сам пробовал, о чем написал пост?

    1. не; зачем? я ж знаю что за мной следят профи и если я не прав то поправят ))

      просто увидел что в пул реквесте вроде все просто и логично. но как всегда в WP не все и не совсем логично ))

      поправил… спасибо за замечание 🙂

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

Закрыть меню
×

Корзина