WordPress carga excesivamente lento en Firefox (y es por culpa de los emojis) [Solución]

Desde hacía tiempo venía observando que cuando accedía a este blog desde Firefox (y únicamente me ocurría desde Firefox) la web no se mostraba de forma instantánea, a diferencia de Chrome y Edge.

Descartado un problema de red, empecé a jugar con la herramienta "Rendimiento" de Firefox, de la que soy padawan pero que tras varios tiras y aflojas me sirvió para encontrar el problema (y su solución).

Lo sorprendente es que nadie haya puesto el grito en el cielo antes, ya que buscando por Google no he encontrado mención ninguna a este problema que es de bulto.

Básicamente, el script que busca y reemplaza los caracteres de los emoji por imágenes compatibles con todos los navegadores (viejos y modernos) es muy lento ejecutándose, tal que se convierte en el javascript más lento de la web (casi 700ms) y además, impide el primer dibujado del sitio web en Firefox.

La solución que he encontrado, manteniendo funcionalidad y sin romper nada, consiste en moverlo de la cabecera del html y al footer, y además (v0.2), hacer que se ejecute cuando el contenido del DOM está cargado.

Para ello, basta con añadir al functions.php del tema del sitio web lo siguiente:

Script WP Emoji al Footer v0.2
https://imojito.com/wordpress-carga-lento-en-firefox-solucion.html

function emoji_script_imojito($js) {
$js = str_replace( 'javascript">','javascript">document.addEventListener("DOMContentLoaded", function(event) {', $js);
$js = str_replace( '</script', '});</script', $js);
return $js;
}

function print_emoji_detection_script2() {
static $printed = false;

if ( $printed ) {
return;
}

$printed = true;
ob_start();
_print_emoji_detection_script();
$codigojs = ob_get_clean();
echo emoji_script_imojito($codigojs);
}

remove_action('wp_head', 'print_emoji_detection_script', 7);
add_action('wp_footer', 'print_emoji_detection_script2', 7);
//

Tagged as: WordPress