페이지 로드 시간을 단축하려면 이 WordPress javascript 스니펫을 마지막으로 로드하려면 어떻게 연기하거나 비동기화해야 합니까?

페이지 로드 시간을 단축하려면 이 WordPress javascript 스니펫을 마지막으로 로드하려면 어떻게 연기하거나 비동기화해야 합니까?

WordPress 도메인 중 하나에 필요한 다양한 javascript가 있으며 php 파일의 어디에서 호출되는지 알고 있습니다.

저는 페이지 로딩 시간을 단축하기 위해 할 수 있는 모든 조치를 취하고 있으며, 웹상의 모든 속도 테스터는 가능하면 Javascript를 연기하라고 말합니다.

javascript에서 defer='sync 함수에 대해 읽었는데, 그 중 하나가 제가 달성하고자 하는 것을 이룰 수 있을 것 같습니다.하지만 php 파일에서 어떻게 해야 하는지 모르겠어요.

예를 들어, javascript 파일이 호출되는 특정 플러그인의 php 파일의 일부를 다음에 나타냅니다.

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 스니펫을 마지막으로 로드하고 페이지 로드 시간을 단축하려면 어떻게 해야 합니까?모든 브라우저에서 페이지 로딩 시간을 늘리는 이상적인 방법은 무엇입니까?조언해 주셔서 감사합니다!

또는 보다 보편적인 방법:

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);

코드를 변경하지 않고 임의의 스크립트에 비동기 기능을 추가할 수 있도록 스크립트 URL에 #syncload를 다음과 같이 추가합니다.

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

어느 정도 모듈화되어 모든 것을 포함하도록 하기 위해 다음 접근법은 $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 @crisoca 님의 답변에 영감을 주셔서 감사합니다.

이 블로그 투고에서는, 다음의 2개의 플러그 인에 링크 하고 있습니다.

비동기 자바스크립트
head.js를 이용하여 javascript를 비동기적으로 로드하여 페이지 로딩 성능 향상

WP 지연 Javascript
LABJS(비동기 Javascript 라이브러리)를 사용하여 wp_enqueue_scripts에 추가된 모든 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 );

특정 스크립트핸들을 타겟으로 하는 데 사용할 수 있는 다른 필터를 사용하는 다른 솔루션:

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 );

간단한 방법기능을 추가합니다.워드프레스에서 JavaScript를 비동기화하는 php 파일

// 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 );

어떤 js파일을 지연시키고 충돌을 피하기 위해 다음과 같이 wp_register_script 함수의 URL에 변수를 추가할 수 있습니다.

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 );

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>

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 );
}

하시면 됩니다.deferasync

「 」를 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>

출처 : 여기

★★★★★★★★★★★★★★★★를 추가하는 것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";
  }
}

언급URL : https://stackoverflow.com/questions/18944027/how-do-i-defer-or-async-this-wordpress-javascript-snippet-to-load-lastly-for-fas