El Salvador, Centro América
+503 70398489

Quitar el Javascript que bloquea la visualización del contenido

PageSpeed Insights

Quitar el Javascript que bloquea la visualización del contenido

ubiraci November 28th, 2017

WordPress, JavaScript y PageSpeed, una combinación habitual en webs WordPress que no tiene por qué ser un problema y que en este artículo puedes ver cómo hacer que se lleven mejor.

PageSpeed de Google

Hoy en día muchos utilizamos PageSpeed Insights como parte de la optimización de nuestro sitio web, y la mayoria esta creada dentro del CMS WordPress. Esta herramienta creada por Google nos ayuda a identificar problemas de tiempos de carga de un sitio web.

Una recomendación que siempre aparece es:

Eliminar o quitar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página.

PageSpeed y WordPress

Si el sitio que sometemos al analisis de esta creado en WordPress, esto nos significa a nosotros como parte del equipo de IT o dueño del sitio web, mover los archivos javascript que se encuentran en el head al final de tu página.

Como buena práctica el JavaScript debe de cargar al final de la página (footer) o que lo haga de forma asíncrona, para no bloquear o ralentizar la carga de otros elementos.

Hay varias soluciones que puedes aplicar, para evitar que la mayoría de librerías javascript carguen al principio de la página, aunque no siempre es recomendable que todos esos javascript se excluyan de esta posición por razones de funcionalidad, pero sí es bueno enviar todos los que sea posible al final de la misma.

Puedes hacerlo minificando y comprimiendo, eso reducirá su carga y con ello los tiempos de representación de la página.

Además, puedes “cachear” estos contenidos estáticos, si tienes acceso a dichos recursos, ya que, si son externos, no podrás gestionarlos todos, ni tampoco tan fácilmente.

Enviar el JavaScript al footer en WordPress usando functions.php

Date Cuenta del Problema Utilizando el Inspector de Elementos de Chrome o Mozilla

Abre tu página WordPress, y haz clic en cualquier lugar de tu sitio y elige “Inspeccionar elemento” y vete a la Opción Red, pestaña JS (javascript) y empieza a contar:

Inspeccionar elemento

Lo detectas por ejemplo revisando la columna 0 ms que es la que muestra el tiempo de carga.

Recuerda que contra mayor es el tiempo en milisegundos, más tarda la petición externa y esto aumenta el tiempo de respuesta, y ahí encontrarás uno de los muchos motivos por los que tu web tarda más en cargar y el por qué PageSpeed te está pidiendo a gritos que por favor muevas esos javascript al final de la web.

Modifica el Functions.php para resolver el problema

Lista de pasos te va a ayudar a realizarlo de forma sencilla y rápida:

    1. Realiza una copia de seguridad de tu web.
    2. Accede a tu dashboard de WordPress.
    3. Ve a Apariencia, Editor.
    4. Localiza en la parte derecha Funciones del Tema (functions.php).
    5. Clic para cargarlo en el editor central de esa pantalla.
    6. Baja hasta el final del archivo, crea un espacio para separar de la última función existente la nueva.
    7. Añade la función que cito a continuación:
//* Mover javascripts al footer
function scripts_footer() {
    remove_action('wp_head', 'wp_print_scripts');
    remove_action('wp_head', 'wp_print_head_scripts', 9);
    remove_action('wp_head', 'wp_enqueue_scripts', 1);
 
    add_action('wp_footer', 'wp_print_scripts', 5);
    add_action('wp_footer', 'wp_enqueue_scripts', 5);
    add_action('wp_footer', 'wp_print_head_scripts', 5);
}
add_action( 'wp_enqueue_scripts', 'scripts_footer' );

  1. Guarda los cambios en Actualizar archivo.
  2. Limpia caché de tu navegador.
  3. Recarga la página para comprobar que la web sigue funcionando.
  4. Botón derecho de tu ratón, Ver código fuente.
  5. Verifica si ahora los javascript se han desplazado al final (footer).

Revisando y analizando los resultados

Después de añadir el código es tiempo de evaluar si esto realmente tiene algún impacto positivo en tu web.

Primero veamos cómo limpiar caché y cookies de navegador para que no haya nada que perturbe las métricas que quieres obtener.

¿Cómo limpiar la caché y cookies?

Si utilizas algún plugin de cache como WP Super Cache o W3 Total Cache puedes hacer uso de plugins como Clear Cache for Me para vaciar rápidamente la caché.

Algunos de estos plugins ya incluyen su propio botón o enlace para limpiar la caché, por ejemplo:

  • W3 Total Cache (Solo con botón del widget de Escritorio).
  • WP Super Cache (Solo con botón del widget de Escritorio).
  • WP Fastest Cache (Solo con botón del widget de Escritorio).
  • Comet Cache (Incorpora su propio limpiador de caché).

Las cookies en los navegadores se eliminan dependiendo del tipo de navegador:

  • Firefox: historial, Limpiar el historial reciente, marcando la opción “Cookies“.
  • Chrome: menú Chrome, Borrar datos de navegación, marcando la opción “Cookies y otros datos de sitios y de complementos”.
  • Opera: menú Opera, Borrar datos de navegación, marcando la opción “Cookies y otros datos de sitio”.

La mayoría de navegadores disponen de una función similar para eliminar las cookies almacenadas.

No debes confundir el eliminar las cookies con vaciar la caché del navegador, si bien que muchas de estas opciones se gestionan desde la misma funcionalidad que las cookies.

Realizando comprobación de carga

¿Ya tienes un poco más claro el tema de cómo quitar el Javascript que bloquea la visualización del contenido?

Entonces, ahora revisamos nuevamente los tiempos de carga de la web con PageSpeed Insights después de mover javascript al footer de la página y de paso observar los avisos o recomendaciones de la herramienta online, encontramos que ya no hay referencias a archivos javascript bloqueando.

PageSpeed Insights

 

Es posible que tras aplicar estas recomendaciones PageSpeed Insights siga quejándose, ¡no sufras! el es así, un incomprendido.

Notas Relacionados

Escribe un Comentario

Quitar el Javascript que bloquea la visualización del contenido

Eliminar o quitar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página.

¿Te ha gustado el artículo?

Suscríbete al boletín y recibe cada semana los contenidos en tu email.

Shares