Schließen Sie Dateien, die zu JavaScript gehören, von der Zurückstellung durch Jetpack Boost aus

In diesem Artikel wird erklärt, wie Sie verhindern können, dass Jetpack Boost bestimmte Dateien mit JavaScript oder ganze Seiten zurückstellt. Sie können einzelne Skripte anhand ihres Handles ausschließen, fügen Sie das data-jetpack-boost="ignore" Attribut zu einem Skript-Tag hinzu oder überspringen Sie die JS-Zurückstellung auf ganzen Seiten, die dem Muster einer URL entsprechen. Verwenden Sie diese Ausschlüsse, wenn das Zurückstellen von JavaScript zu Layoutproblemen führt oder die Funktionalität der Seite beeinträchtigt.

Wann JavaScript von der Zurückstellung ausgeschlossen werden sollteMD

Wenn beim Zurückstellen von JavaScript (JS) mit Jetpack Boost, kann die betroffene Funktionalität davon abhängen, dass die Dateien von JavaScript in einer bestimmten Reihenfolge geladen oder der Seite so schnell wie möglich zur Verfügung gestellt werden.

Jetpack Boost bietet Ihnen zwei Möglichkeiten, damit umzugehen. Sie können einzelne Skripte ausschließen, sodass der restliche Teil der Seite weiterhin von der Zurückstellung profitiert, oder eine ganze Seite ausschließen, wenn die Zurückstellung auf der gesamten Seite Probleme verursacht.

• Ausschlüsse auf Skriptebene verhindern, dass Jetpack Boost ein bestimmtes Skript zurückstellt, während die anderen Skripte auf der Seite weiterhin zurückgestellt werden. Verwenden Sie diese Methode, wenn ein Skript sofort oder in einer festen Reihenfolge geladen werden muss.
• Seitenausschlüsse verhindern, dass Jetpack Boost beliebiges JavaScript auf Seiten verzögert, die einem Muster für eine URL entsprechen. Verwenden Sie diese Methode, wenn das Verzögern zu Problemen beim Layout oder bei der Ausführung von JavaScript auf einer ganzen Seite führt, etwa auf einer Checkout-Seite oder einer Galerie-Seite.

Ein einzelnes Skript von der Zurückstellung ausschließenMD

Sie können Jetpack Boost anweisen, eine bestimmte Datei nicht zurückzustellen, indem Sie das Attribut data-jetpack-boost="ignore" zum Skript-Tag hinzufügen. Die verwendete Methode hängt davon ab, ob das Skript-Tag fest codiert ist oder mit wp_enqueue_scripteingereiht wird.

Wenn Ihr Skript-Tag fest codiert ist, fügen Sie das Attribut direkt zum Tag hinzu:

<script data-jetpack-boost="ignore">

Ein mit wp_enqueue_script eingereihtes Skript ausschließenMD

Wenn Ihr Skript-Tag mit wp_enqueue_script wie im folgenden Beispiel eingereiht wird:

function wpdemo_enqueue_scripts() {
    wp_enqueue_script( 'wpdemo', get_template_directory_uri().'/js/wpdemo.js' );
}
add_action( 'wp_enqueue_scripts', 'wpdemo_enqueue_scripts' );

Sie können das folgende Beispiel-Snippet verwenden und es zur Datei functions.php Ihres Themes hinzufügen:

function add_data_jetpack_boost_tag( $src, $handle ) {
    if ( $handle !== 'wpdemo') {
        return $src;
    }
    return str_replace( ' src', ' data-jetpack-boost="ignore" src', $src );
}
add_filter( 'script_loader_tag', 'add_data_jetpack_boost_tag', 10, 2 );

Denken Sie daran, wpdemo durch das Handle der Skriptdatei zu ersetzen, die Sie ausschließen möchten.

Eine ganze Seite von der Zurückstellung ausschließenMD

Ab Jetpack Boost 4.6.2 umfasst die Funktion zum Zurückstellen von nicht essenziellem JavaScript eine seitenbezogene Ausschlussliste für URL-Muster. Diese Liste verhindert, dass Jetpack Boost auf Seiten jegliches JavaScript zurückstellt, deren URL einem von Ihnen eingegebenen Muster entspricht, ohne die Funktion zum Zurückstellen von JavaScript auf Ihrer gesamten Website zu deaktivieren.

Führen Sie die folgenden Schritte aus, um einen Ausschluss auf Seitenebene hinzuzufügen:

1. Gehen Sie zu Jetpack → Boost und öffnen Sie das Einstellungsfenster von Jetpack Boost.
2. Suchen Sie nach der Funktion Defer Non-Essential JavaScript.
3. Geben Sie ein oder mehrere Muster für URL ein. Das Fenster zeigt ein Inline-Beispiel für das erwartete Format.
4. Speichern Sie Ihre Änderungen.

Syntax für Muster von URLMD

Die Syntax von Mustern für URL bei Seitenausschlüssen entspricht der Syntax für Ausschlüsse im Page Cache. Sie können ein einfaches Textfragment wie checkout oder ein Muster mit einem Platzhalter, zum Beispiel gallery/(.*) eingeben. Jede Seite, deren URL einem Muster in der Liste entspricht, wird von der JS-Zurückstellung ausgeschlossen.

Weitere Informationen dazu, wie der Mustervergleich funktioniert, finden Sie unter Bestimmte Bereiche der Website vom Caching ausschließen.