wake-up-neo.com

Verschieben Sie Wordpress native Javascript zum Ende der Seite?

Beim Überprüfen meiner Seite in Google Page Speed ​​Insights wird beanstandet, dass JavaScript den Rest der Seite am Laden hindert. Bei dem fraglichen Javascript handelt es sich um native Wordpress-Skripte

… -Einschließlich /js/jquery/jquery.js? Ver = 1.11.2

… S/jquery/jquery-migrate.min.js? Ver = 1.2.1

Wie bringe ich diese Dateien stattdessen ans Ende der Seite und beschleunige das Laden?

Muss ich sie abmelden und neu registrieren oder auf andere Weise? Gibt es eine Möglichkeit, native Skripte zu bündeln, zu minimieren und nach unten zu verschieben?

jqueryjavascriptwp-enqueue-script
5
Johan Dahl

Zuallererst ist es das, was ich benutze und für mich und es funktioniert. Ich sage nicht, dass mein Code 100% korrekt ist, aber auch Pingdom GTmetrix zeigt einen positiven Effekt und WP ist auch zufrieden , also kann es nicht so falsch sein wie ich.

Die Versionen, die (? Ver = x.x.x) anzeigen, können debetiert werden, wenn diese Dateien zwischengespeichert werden müssen, so dass das Entfernen (Filtern) bereits ein erster Schritt ist.

Das Code-Snippet, das ich dafür benutze, sieht folgendermaßen aus:

function remove_version_parameter( $src ){
    // Check if version parameter exist
    $parts = explode( '?ver', $src );
    // return without version parameter
    return $parts[0];
}
// filter .js files
add_filter( 'script_loader_src', 'remove_version_parameter', 15, 1 );
// filter .css files
add_filter( 'style_loader_src', 'remove_version_parameter', 15, 1 );

Zum Hinzufügen von Verzögerungen (Google liebt es auch, dies zu sehen) * .js-Dateien (für eine positive Seitengeschwindigkeit) verwende ich das folgende Snippet:

Edit - Code unten geändert, um Fehler/seltsames Verhalten im Back-End zu vermeiden. Quelle gefunden hier !

if ( ! function_exists( 'add_defer_to_js' ) && ! is_admin() ) {

    function add_defer_to_js( $url ) {

        if ( FALSE === strpos( $url, '.js' ) ) { 
            // not our file
            return $url;
        }

        // Must be a ', not "!
        return "$url' defer='defer";
    }
    add_filter( 'clean_url', 'add_defer_to_js', 11, 1 );
}

Um jetzt .js-Dateien in die Fußzeile einzufügen (hilft beim Laden von Seiten), können wir sie mit folgendem Snippet einreihen:

Bearbeiten - Zusätzliche Informationen: Entfernen Sie für den normalen Gebrauch die folgenden Punkte aus der unten stehenden Funktion http://yourdomain.com.

function enqueue_scripts_in_footer() {

    wp_deregister_script( 'jquery' );
    wp_deregister_script( 'jquery-migrate.min' );
    wp_register_script( 'jquery', 'http://yourdomain.com/wp-includes/js/jquery/jquery.js', array(), false, true );
    wp_register_script( 'jquery-migrate.min', 'http://yourdomain.com/wp-includes/js/jquery/jquery-migrate.min.js', array(), false, true );
    wp_enqueue_script( 'jquery', 'http://yourdomain/wp-includes/js/jquery/jquery.js', array( 'jquery' ), false, true );
    wp_enqueue_script( 'jquery-migrate.min', 'http://yourdomain.com/wp-includes/js/jquery/jquery-migrate.min.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts_in_footer' );;

Insgesamt sollten diese drei Funktionen (im functions.php) dazu beitragen, dass Ihre Seiten schneller geladen und korrekt zwischengespeichert werden.

Hoffe das hilft ein wenig. Eine Kopie Ihres functions.php zu erstellen, bevor Sie diese Funktionen hinzufügen, ist überhaupt keine schlechte Idee (das Hinzufügen der Funktionen am unteren Rand Ihres functions.php ist der beste Weg).

Hinweis: Ich verwende kein untergeordnetes Thema und bis jetzt verursacht es keinen Konflikt mit den verwendeten Plugins. Ich habe eine kleine Warnung/einen kleinen Hinweis und korrigiere mich, wenn ich mich irre, aber um .js-Dateien für ein untergeordnetes Thema in die Warteschlange zu stellen, sollte das etwas anders sein.

8
Charles