Das Entfernen oder besser gesagt das Verhindern, dass WooCommerce unnötige JavaScript- und CSS-Dateien auf jeder einzelnen Seite Ihrer Website lädt, sondern nur auf den Seiten, auf denen WooCommerce aktiv ist, kann die Ladezeiten verbessern und damit auch das Nutzererlebnis.
Einige Dinge sollten vor dem Vorgehen beachtet werden:
- Abhängigkeiten: Gibt es Elemente auf Ihrer Website, die von diesen WooCommerce-Skripten abhängig sind und die für bestimmte WooCommerce-Seiten (wie die Zahlungsseite, den Warenkorb oder Produktseiten) unerlässlich sind? Dazu könnten beispielsweise das Warenkorbsymbol im Header oder Widgets in der Seitenleiste gehören.
- Entwicklungsumgebung: Es wird dringend empfohlen, Änderungen lokal (auf Ihrem persönlichen Computer) oder in einer Entwicklungsumgebung zu testen, falls Sie eine solche haben.
- Fachkenntnisse: Sie sollten wissen, was Sie tun, und sich mit dem Code auskennen.
- Backups: Stellen Sie immer sicher, dass Sie ein ordnungsgemäßes Backup Ihrer Website haben, bevor Sie Änderungen vornehmen.
Entfernung der standardmäßig geladenen Dateien durch WooCommerce Standardmäßig lädt WooCommerce drei CSS-Dateien und fünf JavaScript-Dateien. Diese Dateien sorgen für die korrekte Darstellung und Funktionalität des Shops und seiner Elemente. Wenn Sie diese Skripte und Stylesheets nicht auf Seiten verwenden, auf denen sie nicht benötigt werden, können Sie die Ladezeiten Ihrer Website verbessern.
<!--CSS Files-->
<link href='.../plugins/woocommerce/assets/css/woocommerce-layout.css' rel='stylesheet' type='text/css' />
<link href='.../plugins/woocommerce/assets/css/woocommerce-smallscreen.css' rel='stylesheet' type='text/css' />
<link href='.../plugins/woocommerce/assets/css/woocommerce.css' rel='stylesheet' type='text/css' />
<!--Javascript Files-->
<script src='.../plugins/woocommerce/assets/js/jquery-blockui/jquery.blockUI.min.js'></script>
<script src='.../plugins/woocommerce/assets/js/frontend/add-to-cart.min.js'></script>
<script src='.../plugins/woocommerce/assets/js/js-cookie/js.cookie.min.js'></script>
<script src='.../plugins/woocommerce/assets/js/frontend/woocommerce.min.js'></script>
<script src='.../plugins/woocommerce/assets/js/frontend/cart-fragments.min.js'></script>Es ist ziemlich offensichtlich, dass Sie das Skript, das für das Hinzufügen von Produkten zum Warenkorb verantwortlich ist (add-to-cart.min.js), nicht auf der Kontaktseite benötigen, richtig? Und sicherlich sollte die CSS-Datei, die für die Gestaltung des Store-Layouts verantwortlich ist (woocommerce-layout.css), nicht bei Ihren Blog-Posts geladen werden, oder?
Sie können den Quellcode einer beliebigen Seite Ihrer Website überprüfen und sehen, ob diese Dateien geladen werden. Natürlich, wenn Ihre Seite bereits für Geschwindigkeit optimiert wurde, sehen Sie diese Dateien vielleicht gar nicht, außer auf WooCommerce-Seiten, wo sie notwendig sind.
Sie möchten, dass diese Dateien nur auf relevanten Store-Seiten geladen werden, wie zum Beispiel auf Produktseiten, Checkout-Seite, Warenkorbseite usw. Um dies zu erreichen und unnötige JS- und CSS-Dateien von Nicht-WooCommerce-Seiten zu entfernen, fügen Sie den folgenden Code in Ihre functions.php-Datei ein:
<?php
function savvy_remove_woocommerce_css_js() {
// Kontrolle ob WooCommerce aktiv ist
if( function_exists( 'is_woocommerce' ) ){
// Kontrolle ob es sich um eine WooCommerce Seite handelt
if(! is_woocommerce() && ! is_cart() && ! is_checkout() ) {
// CSS von WooCommerce entfernen
wp_dequeue_style('woocommerce-layout');
wp_dequeue_style('woocommerce-general');
wp_dequeue_style('woocommerce-smallscreen');
// JS von WooCommerce entfernen
wp_dequeue_script('wc-cart-fragments');
wp_dequeue_script('woocommerce');
wp_dequeue_script('wc-add-to-cart');
wp_deregister_script( 'jquery-blockui' );
wp_dequeue_script( 'jquery-blockui' );
wp_deregister_script( 'js-cookie' );
wp_dequeue_script( 'js-cookie' );
}
}
}
add_action( 'wp_enqueue_scripts', 'savvy_remove_woocommerce_css_js' );Achten Sie auf die bedingten Tags in Zeile 10. Wenn Sie diese Skripte auf anderen Seiten als WooCommerce-Seiten laden müssen, können Sie diese Bedingungen entsprechend anpassen.
Anhang A Diese Lösung funktioniert sowohl für CSS- als auch für JavaScript-Dateien perfekt. Es ist jedoch erwähnenswert, dass Sie, wenn es um die von WooCommerce geladenen CSS-Dateien geht, diese mit dem folgenden Filter vollständig von allen Seiten der Website, einschließlich der WooCommerce-Seiten, entfernen können:
// Alle Stylesheets entfernen
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );Alternativ, wenn Sie eine spezifische CSS-Datei entfernen möchten, können Sie es so machen:
function sv_dequeue_styles( $enqueue_styles ) {
unset( $enqueue_styles['woocommerce-general'] ); // Remove the gloss
unset( $enqueue_styles['woocommerce-layout'] ); // Remove the layout
unset( $enqueue_styles['woocommerce-smallscreen'] ); // Remove the smallscreen optimization
return $enqueue_styles;
}
add_filter( 'woocommerce_enqueue_styles', 'sv_dequeue_styles' );