Advanced Custom Fields
Scripts & CSS nicht im Frontend ausgeben
Howto: ACF PageSpeed Hotfix
Werden durch Advanced Custom Fields Formularfelder im Frontend ausgegeben, erhöht sich der Pageload massiv. Erfahren Sie, wie Sie das verhindern können.
Über Advanced Custom Fields
Mit Advanced Custom Fields lassen sich strukturierte Eingabemasken im WP-Admin hinzufügen – und im Frontend ausgeben.
Die Kernfunktion von Advanced Custom Fields: Es lassen sich zusätzliche Eingabefelder für Kategorien oder Beiträge anlegen und daraus beispielsweise neue Frontendkomponenten entwickeln. Inzwischen unterstützt Advanced Custom Fields auch die Erstellung einfacher individueller Gutenbergblöcke.
Das Problem
Wenn via Advanced Custom Fields Formularfelder für Frontend-Komponenten hinzugefügt werden, beispielsweise für Nutzerkommentare, haben Sie ein PageSpeed Problem.
Denn Advanced Custom Fields lädt dann CSS und Javascript-Frameworks, die auch im WP-Admin für die Formularfelder geladen werden. Das hat erhebliche Nachteile:
- Sämtliche Formularscripts werden geladen, kein on Demand Loading je nach verwendeten Feldtypen
- Durch Abhängigkeiten zu Frameworks wie z.B. jQuery und jQueryUI werden noch weitere Scripte nachgeladen
- Inkompatibilitäten und unerwartetes Verhalten durch an WP-Admin optimierte Scripte, auf die z.B. andere Scripts vom verwendeten Theme oder anderen Plugins nicht vorbereitet sind.
- Erhebliche PageSpeed Auswirkungen, schlecht für SEO
Die Lösung
Verhindern Sie, dass Advanced Custom Fields auch nur ein Script im Frontend ausgeben kann.
Dazu reicht eine Zeile Code
if(!is_admin()){ add_action('acf/init', function(){ acf_update_setting( 'has_done_ACF_Assets::add_actions', true ); }); }Code-Sprache: PHP (php)Diese Zeile kann in der functions.php des Themes eingefügt werden oder als Plugin. Ein einfaches Plugin würde nur aus einer Datei bestehen (acf_prevent_frontend_scripts.php) und hätte den folgenden Inhalt:
<?php
/*
Version: 1.0.00
Plugin Name: ACF Prevent Frontend Scripts
Text Domain: acf_prevent_frontend_scripts
Description: Stop ACF enqueuing Scripts & CSS in Frontend
Plugin URI: https://straightvisions.com/
Author: straightvisions GmbH
Author URI: https://straightvisions.com
Domain Path: /languages
License: GPL-3.0-or-later
License URI: https://www.gnu.org/licenses/gpl-3.0-standalone.html
*/
if(!is_admin()){
add_action('acf/init', function(){
acf_update_setting( 'has_done_ACF_Assets::add_actions', true );
});
}Code-Sprache: PHP (php)Fazit
Das geht besser
Advanced Custom Fields bietet hierfür bislang werde eine offizielle Lösung noch einen Filter geschweige denn eine Einstellung.
Die hier beschriebene Lösung gaukelt Advanced Custom Fields vor, dass im Frontend das Scripts Loading bereits ausgeführt wurde – kein offizieller Weg, aber als Hotfix reicht es aus.
Wer Wert auf Performance legt, sollte kontrollieren, welche CSS und JS im Frontend geladen wird. Es ist schade, dass gerade Anbieter von sehr erfolgreichen Plugins sich hinsichtlich PageSpeed kaum Gedanken machen.
Dabei ist Advanced Custom Fields für manche Websites ein grandioses Werkzeug, das richtig eingesetzt die Projektqualität massiv erhöht. Eine Nachbesserung hinsichtlich PageSpeed wäre aber wünschenswert.