Eliminar JS y CSS que bloquean visualización en mitad superior de página
Artículo de Juan Luis Mora, ingeniero informático y consultor SEO, SEM y AEO con más de 15 años de experiencia. Te puede interesar: SEO para programadores.
Como ya os comentaba he empezado a escribir una serie de tips o consejos SEO para WPO en mis últimas entradas basadas en mi experiencia como consultor SEO freelance.
En esta ocasión os voy a explicar cómo eliminar el Javascript que bloquea la visualización y el CSS del contenido de la mitad superior de la página para cualquier tipo de web y verás también un par de apartados orientados a WordPress.
¿A qué afecta el bloqueo de la visualización en la mitad superior de la página?
Este problema afecta tanto al rendimiento de la parte de escritorio como al rendimiento móvil, pero es más grave si cabe en el rendimiento móvil ya que al tener menos cantidad de pantalla para ofrecer la visualización el usuario experimenta una peor experiencia de navegación con dispositivos móviles, es por eso que si has usado Google Page Insigths probablemente veas como un 10% menos de puntuación en la parte móvil que en la de escritorio.
Quitar el JavaScript que bloquea la visualización de contenido
En ocasiones lo mejor es mirar las líneas de código que están dando ese y error en caso de no ser necesarias eliminarlas directamente, para otros casos se puede aplicar un código como este:
downloadJSAtOnload() { var element = document.createElement("script"); element.src = "deferredfunctions.js"; document.body.appendChild(element); } // Check for browser support of event handling capability if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; //>
Este código se implementaría normalmente en la cabecera HTML de la web
Plugin para WordPress
Si estás usando WordPress también te puedo recomendar este plugin que te ayudará a hacerlo de forma sencilla sin tener que tocar el código de tu WordPress http://wordpress.org/plugins/footer-javascript/.
El anterior plugin sencillamente coloca los fragmentos de CSS y JS que se están ejecutando en la parte superior de la página en el footer y así no entorpecen la visualización de la primera parte del código.
¿Tienes problemas usando el plugin «Footer Javascript» para WP?
Lamentablemente esto es algo que te puede pasar normalmente por alguno de estos motivos:
- El theme que usas lleva cargas de JS o CSS que necesitan ser cargados desde le pricipio y de lo contrario pasaría que se pierden funcionalidades, se descoloca el diseño o sencillamente se pierde todo el CSS y se ve el texto en una página plana.
- Estas usando algún plugin que necesita cargar JS o CSS al principio de la página o de lo contrario pasa lo que he descrito en el punto anterior.
La solución para el punto uno pasa por una revisión manual de los fichero JS y CSS que se cargan y una optimización de las esas cargas que en ocasiones no es muy complicada pero en otras ocasiones la verdad que si y puede convenir más cambiar el theme. Si el punto es el 2 lo mejor es localizar el plugin que da ese problema y dejar de usarlo buscando otro alternativo y ideando otra solución.
Alternativa al uso del plugin para Wordprees
Es lógico que si estás mejorando el rendimiento de WordPress no quieras utilizar demasiados plugins, así que te paso una función PHP que hace lo mismo que este plugin.
function footer_enqueue_scripts() {
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('after_setup_theme', 'footer_enqueue_scripts');
function footer_enqueue_scripts() {
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('after_setup_theme', 'footer_enqueue_scripts');
Pero ojo! aunque no uses el plugin si este te daba problemas es muy probable que esta función también lo haga ya que en esencia es el mismo proceso.
¿Qué hacer si el problema deriva de un JQuery?
Lo que tienes que tener muy claro en este caso es que si o si tendrás que cargar ese Jquery antes de ser usado, con lo cual si lo usas en la parte superior de tu web tendrás una difícil solución, pero tranquilo porque normalente no es así siempre, pudiendo darse estos casos:
- En la mayoría de ocasiones esto se usa para cargar una slider que solo sale en la home de la web o en algunas páginas, en tal caso puedes hacer que la librería JQuery cargue solamente en esa página lo que al menos hará que el resto de la web no tenga el problema.
- En otras ocasiones el elemento que necesita la librería Jquery no está al principio por tanto puedes retrasar la carga de JQuery hasta el punto en el que sea necesario.
- Y siempre tendrás la solución de no usarla, que aunque parezca drástica te aseguro que en la mayoría de las veces y si el diseño es el apropiado esta totalmente de sobra.
Más Consejos
Eliminar el bloqueo de la visualización en la mitad superior de la página debido a archivos JavaScript (JS) y hojas de estilo en cascada (CSS) puede mejorar significativamente la experiencia del usuario y el rendimiento de tu sitio web. Aquí tienes algunas acciones que puedes tomar para lograrlo:
1. Analiza y prioriza los archivos JS y CSS: Examina tus archivos JS y CSS para identificar aquellos que están bloqueando la visualización en la mitad superior de la página. Prioriza los archivos que tienen un impacto significativo en la carga y la representación inicial de tu sitio.
2. Minimiza y comprime los archivos JS y CSS: Reduce el tamaño de tus archivos JS y CSS utilizando técnicas de minimización y compresión. Esto implica eliminar espacios en blanco, comentarios y caracteres innecesarios para reducir el tamaño de los archivos, lo que a su vez acelera su carga.
3. Carga asíncronamente los archivos JS: Utiliza la carga asíncrona para los archivos JS que no son críticos para la representación inicial de la página. Al cargarlos de forma asíncrona, permites que el contenido principal de la página se muestre primero, mientras que los archivos JS se cargan en segundo plano.
4. Utiliza la técnica de carga diferida (lazy loading) para imágenes y contenido adicional: La carga diferida te permite cargar imágenes y otros elementos de contenido solo cuando son visibles para el usuario. Esto evita la carga de recursos innecesarios al principio y acelera la representación inicial de la página.
5. Opta por la entrega de archivos estáticos a través de una red de distribución de contenido (CDN): Utilizar un CDN para entregar tus archivos JS y CSS puede acelerar su carga al tenerlos almacenados en servidores distribuidos en diferentes ubicaciones geográficas.
6. Optimiza el renderizado crítico de la página (Critical Rendering Path): El renderizado crítico se refiere a la carga y representación de los elementos esenciales de la página que son necesarios para su visualización inicial. Optimiza este proceso asegurándote de que los archivos JS y CSS críticos se carguen y apliquen de manera eficiente.
7. Realiza pruebas y seguimiento: Después de implementar los cambios, realiza pruebas para verificar que la visualización en la mitad superior de la página mejora significativamente. Utiliza herramientas de rendimiento web y seguimiento para analizar los tiempos de carga y el rendimiento de tu sitio.
Recuerda que el bloqueo de la visualización en la mitad superior de la página puede tener un impacto negativo en la experiencia del usuario y el SEO. Optimizar tus archivos JS y CSS para eliminar este bloqueo puede ayudar a mejorar la velocidad de carga de tu sitio y brindar una experiencia de usuario más fluida.
¿Necesitas ayuda con tu proyecto? Trabajo como consultor SEO, SEM y AEO freelance, sin agencia ni intermediarios, para pymes, tiendas online, multinacionales y empresas SaaS. Algunos de mis servicios: SEO para ecommerce, posicionamiento web para empresas, web y SEO con el Kit Digital y SEO para WordPress. Escríbeme y lo vemos.
