Advanced Custom Fields
Do not output scripts & CSS in the frontend
Howto: ACF PageSpeed Hotfix
If form fields are output in the frontend by Advanced Custom Fields, the pageload increases massively. Learn how to prevent this.
About Advanced Custom Fields
With Advanced Custom Fields, structured input masks can be added in the WP admin – and output in the frontend.
The core function of Advanced Custom Fields: Additional input fields for categories or posts can be created and, for example, new front-end components can be developed from them. Meanwhile, Advanced Custom Fields also supports the creation of simple individual Gutenberg blocks.
The problem
If form fields for front-end components are added via Advanced Custom Fields, for example for user comments, you have a PageSpeed problem.
Because Advanced Custom Fields then loads CSS and Javascript frameworks, which are also loaded in the WP admin for the form fields. This has significant disadvantages:
- All form scripts are loaded, no on-demand loading depending on the field types used
- Due to dependencies on frameworks such as jQuery and jQueryUI, additional scripts are loaded
- Incompatibilities and unexpected behavior due to WP-Admin optimized scripts, for which e.g. other scripts are not prepared by the theme used or other plugins.
- Significant PageSpeed impact, bad for SEO
The solution
Prevent Advanced Custom Fields from being able to output even one script in the frontend.
All it takes is one line of code
if(!is_admin()){ add_action('acf/init', function(){ acf_update_setting( 'has_done_ACF_Assets::add_actions', true ); }); }Code language: PHP (php)This line can be inserted in the functions.php of the theme or as a plugin. A simple plugin would consist of only one file (acf_prevent_frontend_scripts.php) and would have the following content:
<?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 language: PHP (php)result
This can be done better
Advanced Custom Fields offers an official solution for this so far, let alone a filter.
The solution described here fools Advanced Custom Fields into believing that scripts loading has already been executed in the frontend – not an official way, but as a hotfix it is sufficient.
If you value performance, you should check which CSS and JS are loaded in the frontend. It is a pity that providers of very successful plugins hardly think about PageSpeed.
Advanced Custom Fields is a terrific tool for some websites, which is used correctly and massively increases project quality. However, an improvement with regard to PageSpeed would be desirable.