Eliminar recursos .js que bloquean el renderizado en WordPress

Los recursos JavaScript que bloquean el renderizado es uno de los problemas más comunes a la hora de optimizar WordPress.

Por suerte, evitar que los JavaScript en tu WordPress bloqueen el renderizado es muy fácil.

Añade el atributo defer a todas las llamadas a los .js, excepto las imprescindibles para ver la página de forma correcta.

El atributo defer permite que se descargue el JavaScript mientras el navegador analiza el resto del HTML, esperando a ejecutar el script cuando termina el análisis del HTML

Añade esta función en tu plugin de funciones para añadir el atributo defer a todos los archivos .js excepto los imprescindibles.

//Ejecutar defer sólo cuando el usuario no está logado
function defer_nologado()
{
    /*Función para añadir atributo defer a las llamadas a .js*/
function js_async_attr($tag){

# No añadir defer a los siguientes scripts
 $scripts_to_exclude = array('jquery.js', 'script2.js'); //En este array indica las excepciones

foreach($scripts_to_exclude as $exclude_script){
 if(true == strpos($tag, $exclude_script ) )
 return $tag; 
}

# Defer todos los scripts except los indicados arriba
return str_replace( ' src', ' defer="defer" src', $tag );
}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );
add_action('init', 'defer_nologado');

En el caso de este blog, el único archivo imprescindible es la libreria jquery.js, como ejemplo en el código he añadido otro archivo llamado script2.js.

Este código sólo se ejecuta cuando el usuario no está logado. Para evitar tener que añadir excepciones de archivos que son imprescindibles en el menú de administración como los necesarios para editar entradas..

¿Cómo crear un plugin de funciones?

Muy sencillo, sube una carpeta con el nombre mis-funciones a /wp-content/plugins/

Dentro de la carpeta debes alojar un archivo .php con la siguiente información.

<?php
/*
Plugin Name: Nombre del plugin
Description: Descripción del plugin
Version: 1.0
Author: Nombre autor
*/

//Tus funciones
?>

Una vez que hayas creado la carpeta mis-funciones y subido el archivo mis-funciones.php, accede al panel de administración de WordPress.

El plugin mis-funciones aparecerá en la lista de plugins, pulsa “Activar” para activar el plugin y que el código se ejecute.

Revisa tu sitio, confirma que todo funciona como esperas, y que la consola del navegador no muestra errores. (Ej. jQuery is not defined)

Con esta sencilla función mejoraras el tiempo de carga de tu site.