PAGESPEED WORDPRESS – DOES NOT USE PASSIVE LISTENER
In wordpress when we enable comments we find the warning in pagespeed and we can go a little crazy looking for where the problem is generated, being said comments the cause in this case.
WordPress automatically loads certain JavaScript scripts that manage the comment functionality, such as validation and submission. Some of these scripts may include event listeners that are not configured as passive, which causes the warning in PageSpeed.
If you search on the internet you will see many functions to disable this but it makes nested comments stop working, many others simply do not work in your installation.
That is why we want to share with you a direct solution, although it may be somewhat overwhelming for some, but it is simple following the steps.
The problem is in wp-includes/js/comment-reply.js where we find several listener events without the passive:true
We could simply add { passive: true } after each of the touchstart events, leaving something like this for each of them, example:
element.addEventListener( ‘touchstart’, clickEvent, { passive: true } );
But with a WordPress update it will go away again if the WordPress team has not added it in subsequent versions. If we want it to be permanent, we have to do it in the child theme, where we create a folder called js and inside a file called comment-reply-custom.js, where we could copy all the content of the original, make the changes and then in the functions.php unregister the original and register our custom, but this is not good enough either, because as it is the core of WordPress there will come a time when our custom will give problems for not being up to date.
So what do we do?
We create the js folder in our childtheme if we don’t have it and in the function.php of our child theme we add the following code. Of course, make a backup copy of the functions.php in case you have any problems when editing, like your cat suddenly jumping on the keyboard, hehe (It usually happens to me, they love the keyboard)
//passive comments
function modificar_comment_reply_js() {
$ruta_original = ABSPATH . WPINC . '/js/comment-reply.js';
$ruta_modificada = get_stylesheet_directory() . '/js/comment-reply-custom.js';
// If the original file has changed, regenerate the custom one
if (!file_exists($ruta_modificada) || filemtime($ruta_original) > filemtime($ruta_modificada)) {
$contenido = file_get_contents($ruta_original);
// Replace all addEventListener without options
$contenido = preg_replace('/addEventListener\(([^,]+), ([^,]+)\)/', 'addEventListener($1, $2, { passive: true })', $contenido);
// Save the new modified file
file_put_contents($ruta_modificada, $contenido);
}
// Use the modified file instead of the original
wp_deregister_script('comment-reply');
wp_register_script(
'comment-reply',
get_stylesheet_directory_uri() . '/js/comment-reply-custom.js',
array('jquery'),
null,
true
);
}
add_action('wp_enqueue_scripts', 'modificar_comment_reply_js', 100);
With this code we compare the original with the one we have in the js folder of the child theme and if it has changed we add the new one with the corresponding events with passive:true. If it does not exist it will simply create it with said events corrected if it does not have them.
Once this is done, we delete the caches we have and in PageSpeed the warning will have disappeared, improving your score and performance.
TL.
Have a nice day
FAQS
An event listener is a function that waits for an event to occur on an element, such as a click, mouse movement, or key press. It is used with addEventListener().
A child theme is a theme that inherits the design and functionality of another theme (the “parent theme”), allowing you to make changes without affecting the original.
If you directly modify a theme and it is then updated, you will lose all your changes. With a child theme, you can customize it without worry.
It is a WordPress file where you can add PHP code to modify or extend the functions of the theme without touching the WordPress core.
Crea una carpeta en /wp-content/themes/, por ejemplo, hello-chiltheme/
Dentro, agrega un archivo style.css con este contenido como ejemplo del child theme de Hello, cambiando obviamente los datos correspondientes a tu tema:
/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*//* Add your custom styles here */
Many themes already give you the child theme to install and there are also plugins that create it for you.
Once created you can activate it from WordPress
