Eliminiere Render-blockierendes Javascript

Nach dem Ausführen meiner WordPress-Seite durch Page Speed ​​Insights wurde mir gesagt, dass ich Render-blockierendes Javascript beseitigen muss. Also habe ich die große Mehrheit von Javascript direkt vor das schließende Body-Tag verschoben, aber die Warnung erscheint immer noch in Page Speed ​​Insights.

Kann mir jemand vorschlagen, was ich tun kann, um dieses Problem zu lösen?

Die Website ist http://www.stewartandsonsroofingliverpool.co.uk/

Danke im Voraus

Solutions Collecting From Web of "Eliminiere Render-blockierendes Javascript"

Sie können ein Plugin installieren, um Ihr JavaScript asynchron zu laden, oder versuchen, es manuell zu tun, indem Sie Ihrer functions.php Code hinzufügen, um Ihre Skripte asynchron zu laden.

Das kann dich beginnen,

Warnung

Das asynchrone Laden von JavaScript führt zu mehreren Problemen mit Abhängigkeiten:

 /*function to add async to all scripts*/ function js_async_attr($tag){ //Add async to all scripts tags return str_replace( ' src', ' async="async" src', $tag ); } add_filter( 'script_loader_tag', 'js_async_attr', 10 ); 

Sie müssen also Ihren JS-Code überprüfen und aktualisieren.

Verwenden Sie das defer Attribut

Anstatt das gesamte Skript async konvertieren, wie es diese Antwort vorgeschlagen hat , ist es besser, defer zu verwenden. Auf diese Weise haben Sie keine Abhängigkeitserrors.

Zum Beispiel verwenden Sie ein benutzerdefiniertes Skript und dieses Skript hängt von jQuery . Da jQuery wahrscheinlich größer als Ihr benutzerdefiniertes Skript ist, wird es wahrscheinlich vor jQuery , sodass sich Ihr CODE unvorhersehbar verhält.

Stattdessen können Sie den folgenden Code verwenden, um sicherzustellen, dass die Abhängigkeit funktioniert:

 function js_defer_attr( $tag ){ // add defer to all scripts tags return str_replace( ' src', ' defer="defer" src', $tag ); } add_filter( 'script_loader_tag', 'js_defer_attr', 10 ); 

Hier ist mehr über das defer Attribut.

Alternative: Platzieren Sie das Skript in die Fußzeile

Es ist auch möglich, alle Skripte in der Fußzeile zu ersetzen. Verwenden Sie den folgenden Code (anstelle des oben genannten), um alle Skripte in die Fußzeile zu platzieren:

 function move_scripts_to_footer() { remove_action( 'wp_head', 'wp_print_scripts' ); remove_action( 'wp_head', 'wp_print_head_scripts', 9 ); remove_action( 'wp_head', 'wp_enqueue_scripts', 1 ); add_action( 'wp_footer', 'wp_print_scripts', 5 ); add_action( 'wp_footer', 'wp_enqueue_scripts', 5 ); add_action( 'wp_footer', 'wp_print_head_scripts', 5 ); } add_action( 'wp_head', 'move_scripts_to_footer', -1 );