wake-up-neo.net

Wie kann ich dieses WordPress-Javascript-Snippet verschieben, um es für schnellere Ladezeiten zu laden?

Ich habe verschiedene Javascripts, die notwendige Plugins in einer meiner WordPress-Domänen sind, und ich weiß, von wo aus die PHP-Datei aufgerufen wird.

Ich ergreife jede Maßnahme, die ich ergreifen kann, um das Laden von Seiten beschleunigen, und jeder Geschwindigkeitstester im Web sagt, dass Javascripts nach Möglichkeit verschoben werden sollen.

Ich habe über die Funktionen defer = 'defer' und die Funktionen async in Javascript gelesen, und ich denke, eine davon wird das erreichen, was ich zu erreichen versuche. Aber ich verstehe nicht, wie ich das in einer PHP-Datei machen würde.

Hier ist zum Beispiel ein Ausschnitt aus der PHP-Datei eines bestimmten Plugins, in der die Javascript-Datei aufgerufen wird:

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

}

Ich habe gelesen, dass es am besten ist, etwas zu tun, um die Seiten schneller zu laden:

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

Aber ich weiß nicht, wie ich das in einer PHP-Datei erreichen kann. Ich möchte dies mit all meinen Javascript-Dateien tun.

Wie würde ich das Verschieben oder Asynchronisieren dieses Javascript-Snippets als letzte Last ausführen und das Laden der Seiten beschleunigen? Was wäre der ideale Weg, um die Seitenladezeiten in allen Browsern zu erhöhen? Danke für jede Anleitung, die jeder anbieten kann!

45
Jason Weber

Dieser Blogbeitrag verlinkt zu zwei interessanten Plugins:

Asynchrones Javascript
Verbessern Sie die Seitenladeleistung durch asynchrones Laden von Javascript mithilfe von head.js

WP Verschobene Javascripts
Das Laden aller mit wp_enqueue_scripts hinzugefügten Javascripts mithilfe von LABJS (einer asynchronen Javascript-Bibliothek) zurückstellen.

Ich habe sie nicht getestet, aber den Code überprüft und sie machen ziemlich schicke Sachen mit dem Einreihen von WordPress-Skripts.

Dann kommt WPSE zur Rettung :

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

Oder universeller:

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

sie können also einem Skript ohne Codeänderungen asynchron hinzufügen. Fügen Sie einfach #asyncload zur Skript-URL hinzu:

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

Um die Dinge ein wenig modular zu halten und umfassend zu gestalten, wählt der folgende Ansatz dynamisch aus, wie das Tag mit den Attributen async oder defer eingebettet werden soll, indem lediglich ein kleiner Bezeichner an den $ handle-Namen angehängt wird:

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

Verwendungsbeispiel:

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

Ausgänge:

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

Danke an @MattKeys @crissoca für die Anregung meiner Antwort hier.

18
Mike Kormendy

Eine andere Lösung, die einen anderen Filter verwendet, der auf ein bestimmtes Skript-Handle angewendet werden kann:

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

Eine vereinfachte Methode. Fügen Sie Ihrer Datei "functions.php" hinzu, um JavaScript in Wordpress asynchron zu machen

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

Um zu steuern, welche js-Dateien verschoben werden sollen, und um Konflikte zu vermeiden, können Sie eine Variable an die URL in der Funktion wp_register_script wie folgt anhängen.

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

Dann ändern Sie die Zeile: 

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

Zu: 

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

Der neue Filter sieht so aus.

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

Sehr wenig Modifikationscode Mike Kormendy , mit dem Sie zwei Attribute gleichzeitig hinzufügen können:

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

Ergebnis:

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

Ich glaube, es ist eine schlechte Praxis, WordPress jQuery aufzuschieben/asynchron zu machen. Eine bessere Lösung wäre, jQuery aus dem Filter auszuschließen:

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

Sie können defer anstelle von async verwenden.

2
Abukwaik

Wenn Sie die clean_url-Filterlösung hinzufügen möchten, stellen Sie sicher, dass Sie sie nur für das font-end verwenden. Möglicherweise verwenden Sie if( ! is_admin() ){} populäre Plugins wie ACF.

Update

Hier ist meine modifizierte Version der Lösung:

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

Binden Sie das async-Attribut in die Skripts ein, sodass sie erst geladen werden, wenn die gesamte Seite geladen ist

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

Quelle: Hier

1
Anz Joy