it-swarm.com.ru

Как отложить или асинхронизировать этот фрагмент WordPress javascript для последней загрузки, чтобы ускорить загрузку страниц?

У меня есть различные javascripts, которые являются необходимыми плагинами в одном из моих доменов WordPress, и я знаю, откуда в php-файле он вызывается.

Я принимаю все меры, которые могу предпринять, чтобы ускорить загрузку страниц , и каждый тестер скорости в Интернете говорит, что, если это возможно, отложить JavaScript.

Я прочитал о defer = 'defer' и async функциях в javascript, и я думаю, что одна из них выполнит то, что я пытаюсь выполнить. Но я не понимаю, как бы я сделал это в php-файле.

Например, вот фрагмент из php-файла одного конкретного плагина, где вызывается javascript-файл:

function add_dcsnt_scripts() {

    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'dcsnt', dc_jqsocialtabs::get_plugin_directory() . '/js/jquery.social.media.tabs.1.7.1.min.js' );

}

Я читал, что лучше сделать что-то подобное для ускорения загрузки страницы:

<script defer async src="..."></script>

Но я не знаю, как это сделать в php-файле. Я хочу сделать это со всеми моими файлами JavaScript.

Как мне выполнить отсрочку или асинхронизацию этого фрагмента javascript, чтобы он загружался последним и ускорял время загрузки страницы ? Что было бы идеальным способом увеличить время загрузки страницы во всех браузерах? Спасибо за любое руководство, которое может предложить любой!

45
Jason Weber

Это сообщение в блоге ссылки на два интересующих плагина:

Асинхронный Javascript
Повышение производительности загрузки страницы за счет асинхронной загрузки JavaScript с использованием head.js

WP Отложенные JavaScript
Отложите загрузку всех javascripts, добавленных с помощью wp_enqueue_scripts, используя LABJS (асинхронная библиотека javascript).

Я не проверял их, но проверил код, и они делают довольно причудливые вещи с процессом создания сценариев WordPress.

Но тогда WPSE приходит на помощь :

// Adapted from https://Gist.github.com/toscho/1584783
add_filter( 'clean_url', function( $url )
{
    if ( FALSE === strpos( $url, '.js' ) )
    { // not our file
        return $url;
    }
    // Must be a ', not "!
    return "$url' defer='defer";
}, 11, 1 );
26
brasofilo

Или более универсальным способом:

function add_async_forscript($url)
{
    if (strpos($url, '#asyncload')===false)
        return $url;
    else if (is_admin())
        return str_replace('#asyncload', '', $url);
    else
        return str_replace('#asyncload', '', $url)."' async='async"; 
}
add_filter('clean_url', 'add_async_forscript', 11, 1);

так что вы можете добавить асинхронность в любой скрипт без изменения кода, просто добавьте #asyncload в URL скрипта как:

wp_enqueue_script('dcsnt', '/js/jquery.social.media.tabs.1.7.1.min.js#asyncload' )
40
bestlion

Пытаясь сделать вещи несколько модульными и всеохватывающими, следующий подход динамически выбирает, как встроить тег с атрибутами async или defer, просто добавив небольшой идентификатор к имени $ handle:

/**
* Add async or defer attributes to script enqueues
* @author Mike Kormendy
* @param  String  $tag     The original enqueued <script src="...> tag
* @param  String  $handle  The registered unique name of the script
* @return String  $tag     The modified <script async|defer src="...> tag
*/
// only on the front-end
if(!is_admin()) {
    function add_asyncdefer_attribute($tag, $handle) {
        // if the unique handle/name of the registered script has 'async' in it
        if (strpos($handle, 'async') !== false) {
            // return the tag with the async attribute
            return str_replace( '<script ', '<script async ', $tag );
        }
        // if the unique handle/name of the registered script has 'defer' in it
        else if (strpos($handle, 'defer') !== false) {
            // return the tag with the defer attribute
            return str_replace( '<script ', '<script defer ', $tag );
        }
        // otherwise skip
        else {
            return $tag;
        }
    }
    add_filter('script_loader_tag', 'add_asyncdefer_attribute', 10, 2);
}

Пример использования:

function enqueue_my_scripts() {

    // script to load asynchronously
    wp_register_script('firstscript-async', '//www.domain.com/somescript.js', '', 2, false);
    wp_enqueue_script('firstscript-async');

    // script to be deferred
    wp_register_script('secondscript-defer', '//www.domain.com/otherscript.js', '', 2, false);
    wp_enqueue_script('secondscript-defer');


    // standard script embed
    wp_register_script('thirdscript', '//www.domain.com/anotherscript.js', '', 2, false);
    wp_enqueue_script('thirdscript');
}
add_action('wp_enqueue_scripts', 'enqueue_my_scripts', 9999);

Результаты:

<script async type='text/javascript' src='//www.domain.com/somescript.js'></script>
<script defer type='text/javascript' src='//www.domain.com/otherscript.js'></script>
<script type='text/javascript' src='//www.domain.com/anothercript.js'></script>

Спасибо @MattKeys @crissoca за вдохновляющий ответ здесь.

18
Mike Kormendy

Другое решение, использующее другой фильтр, который может использоваться, чтобы предназначаться для определенного дескриптора сценария:

function frontend_scripts()
{
    wp_enqueue_script( 'my-unique-script-handle', 'path/to/my/script.js' );
}
add_action( 'wp_enqueue_scripts', 'frontend_script' );

function make_script_async( $tag, $handle, $src )
{
    if ( 'my-unique-script-handle' != $handle ) {
        return $tag;
    }

    return str_replace( '<script', '<script async', $tag );
}
add_filter( 'script_loader_tag', 'make_script_async', 10, 3 );
13
Matt Keys

Упрощенный метод. Добавьте в свой файл functions.php, чтобы сделать JavaScript асинхронным в Wordpress

// Make JavaScript Asynchronous in Wordpress
add_filter( 'script_loader_tag', function ( $tag, $handle ) {    
    if( is_admin() ) {
        return $tag;
    }
    return str_replace( ' src', ' async src', $tag );
}, 10, 2 );
10
TheRealJAG

Чтобы получить контроль над тем, какие js-файлы следует отложить и избежать конфликтов, вы можете добавить переменную к URL-адресу в функции wp_register_script, как показано ниже.

wp_register_script( 'menu', get_template_directory_uri() . '/js/script.js?defer', array('jquery'), '1.0', true );

Затем измените строку: 

if ( FALSE === strpos( $url, '.js' ))

Для того, чтобы: 

if ( FALSE === strpos( $url, '.js?defer' ))

Новый фильтр выглядит следующим образом.

add_filter( 'clean_url', function( $url )
{
    if ( FALSE === strpos( $url, '.js?defer' ) )
    { // not our file
    return $url;
    }
    // Must be a ', not "!
    return "$url' defer='defer";
}, 11, 1 );
5
Nathan Friend

Очень маленький код модификации Mike Kormendy , который позволяет добавлять 2 атрибута одновременно:

// Async load
function add_asyncdefer_attribute($tag, $handle)
{
    $param = '';
    if ( strpos($handle, 'async') !== false ) $param = 'async ';
    if ( strpos($handle, 'defer') !== false ) $param .= 'defer ';
    if ( $param )
        return str_replace('<script ', '<script ' . $param, $tag);
    else
        return $tag;
}

Результат:

<script async defer type='text/javascript' src='#URL'></script>
4
Marina Lebedeva

Я считаю плохой практикой откладывать/асинхронизировать WordPress jQuery. Лучшим решением было бы исключить jQuery из фильтра:

if (!is_admin()) {
    add_filter( 'script_loader_tag', function ( $tag, $handle ) {    
        if ( strpos( $tag, "jquery.js" ) || strpos( $tag, "jquery-migrate.min.js") ) {
            return $tag;
        }
        return str_replace( ' src', ' async src', $tag );
    }, 10, 2 );
}

Вы можете использовать defer вместо async

2
Abukwaik

Что-то, чтобы добавить решение фильтра clean_url, убедитесь, что оно используется только в конце шрифта, возможно, с использованием популярных плагинов if( ! is_admin() ){}, таких как ACF, может вызвать головную боль.

Обновление

Вот моя модифицированная версия решения:

if( ! is_admin() ){
  add_filter( 'clean_url', 'so_18944027_front_end_defer', 11, 1 );
  function so_18944027_front_end_defer( $url ) {
    if ( FALSE === strpos( $url, '.js' ) )
    { // not our file
        return $url;
    }
    // Must be a ', not "!
    return "$url' defer='defer";
  }
}
1
crissoca

Включите атрибут async в сценарии, чтобы они загружались только после загрузки всей страницы

<script type="text/javascript">
    function ngfbJavascript( d, s, id, url ) {
        var js, ngfb_js = d.getElementsByTagName( s )[0];
        if ( d.getElementById( id ) ) return;
        js = d.createElement( s );
        js.id = id;
        js.async = true;
        js.src = url;
        ngfb_js.parentNode.insertBefore( js, ngfb_js );
    };
</script>

Источник: Здесь

1
Anz Joy