PAGESPEED WORDPRESS – NO USA LISTENER PASIVO
En wordpress cuando activamos los comentarios nos encontramos con la advertencia en pagespeed y podemos volvernos un poco locos buscando donde se genera el problema siendo dichos comentarios el causante en este caso.
WordPress carga automáticamente ciertos scripts de JavaScript que gestionan la funcionalidad de comentarios, como la validación y el envío. Algunos de estos scripts pueden incluir listeners de eventos que no están configurados como pasivos, lo que provoca la advertencia en PageSpeed.
Si buscas en internet verás muchas funciones para desactivar esto pero hace que los comentarios anidados dejen de funcionar, muchas otras simplemente no funcionan en tu instalación.
Es por ello, que queremos compartir con vosotros una solución directa, aunque puede ser algo abrumante para algunos, pero es sencillo siguiendo los pasos.
El problema esta en wp-includes/js/comment-reply.js donde nos encontramos varios eventos de escucha sin el passive:true
Podríamos simplemente añadir { passive: true } a continuación de cada uno de los eventos touchstart quedando algo así por cada uno de ellos, ejemplo:
element.addEventListener( ‘touchstart’, clickEvent, { passive: true } );
Pero con una actualización de WordPress se volverá a ir si el equipo de WordPress no lo ha añadido en siguientes versiones. Si queremos que sea algo permanente, tenemos que hacerlo en el child theme, donde creamos una carpeta llamada js y dentro un fichero llamado comment–reply–custom.js, donde podríamos copiar todo el contenido del original, hacer los cambios y luego en el functions.php desregistrar el original y registrar nuestro custom, pero esto tampoco nos vale, porque al tratarse del core de WordPress llegará un momento donde nuestro custom dará problemas por no estar al día.
¿Entonces que hacemos?
Creamos la carpeta js en nuestro childtheme si no la tenemos y en el function.php de nuestro child theme añadimos el siguiente código. Eso sí, haceros una copia de seguridad del functions.php por si en la edición tenéis algún problema como el salto de tu gato encima del teclado de repente, jeje (Me suele pasar, les encanta el teclado)
//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);
Con este código lo que hacemos es comparar el original con el que tenemos en la carpeta js del child theme y si ha cambiado añadimos el nuevo con los correspondientes eventos con passive:true. En caso de no existir simplemente lo creará con dichos eventos corregidos si no los tuviera.
Hecho esto, borramos las caches que tengamos y en PageSpeed habrá desaparecido la advertencia mejorando tu puntuación y rendimiento.
TL.
Que tengáis un buen día
Preguntas Frecuentes
Un event listener (o "escuchador de eventos") es una función que espera a que ocurra un evento en un elemento, como un clic, un movimiento del mouse o una pulsación de tecla. Se usa con addEventListener().
Un child theme es un tema que hereda el diseño y funcionalidades de otro (el "tema padre"), permitiéndote hacer modificaciones sin afectar el original.
Si modificas directamente un tema y luego se actualiza, perderás todos tus cambios. Con un child theme, puedes personalizarlo sin preocupaciones.
Es un archivo de WordPress donde puedes agregar código PHP para modificar o ampliar las funciones del tema sin tocar el núcleo de WordPress.
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 */
Muchos temas ya te dan el child theme para instalar y también hay plugins que te lo crean.
Una vez creado puedes activarlo desde wordpress
