Eliminar JS y CSS que bloquean visualización en mitad superior de página

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.

[-] Indice de contenidos
  • ¿A qué afecta el bloqueo de la visualización en la mitad superior de la página?
  • Quitar el JavaScript que bloquea la visualización de contenido
  • Plugin para WordPress
  • ¿Tienes problemas usando el plugin «Footer Javascript» para WP?
  • Alternativa al uso del plugin para Wordprees
  • ¿Qué hacer si el problema deriva de un JQuery?
  • Más Consejos
  • ¿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.

    Lamentablemente esto es algo que te puede pasar normalmente por alguno de estos motivos:

    1. 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.
    2. 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:

    1. 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.
    2. 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.
    3. 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.


    SEO Freelance


    18 comentarios en “Eliminar JS y CSS que bloquean visualización en mitad superior de página

    1. Muchas gracias tu código funcionó y mejoró mi calificación en el Pagespeed de Google :)

    2. Hola Juan,
      Donde debo de poner el código. Por cierto lo podrías poner editable.
      Gracias,

    3. Lo cierto es que si no sabes dónde poner el código lo más apropiado es que no puedas copiar y pergarlo en cualquier parte, por eso está en ese formato.

      Para saber donde colocar ese código debes entender como fuciona tu plantilla o site a nivel de código, no en todos los sitios es igual.

    4. Tengo el problema en mi web, y no se como tengo que colocar el codigo o si existe algún plugin que solucione el problema en prestashop y en Joomla, lamento no tener los conocimientos necesarios para resolver esto en mi página.
      Llevo ya muchas horas buscando una solución y vi tu articulo que es el unicoque arroja algo de luz sobre esto, pero a continuación he recibido un jarro de agua fria, pensaba que habría que ponerlo en el head del archivo header.tpl en el caso de prestashop y en el index.php del template en el caso de joomla, pero despues de leer tu comentario ya no me atrevo.
      ¿Podrias arrojar un poco de luz en mis tinieblas?

    5. Gracias!

      He mejorado mi marca en Pagespeed de Google, y ahora parece que ghe subido de posiciones en los buscadores :)

    6. Hola Juan,

      ¡Un post genial!
      La verdad es que el plugin que has mencionado funciona de maravilla, pero hay que decir que en algunos casos puede fallar.

      Si me dejas, me voy a tomar el lujo de recomendar otro plugin que sirve para la misma tarea y que personalmente a la hora de crear páginas web e intentar solucionar dicho problema nos ha funcionado igual de bien.

      El plugin se llama Async JS and CSS. Sólo lo tenéis que instalar y activar y ya esta.

      También es verdad que aveces es imposible solucionar este problema porque depende de como este creada la plantilla lo imposibilita. En este caso os recomiendo que os centréis en otros problemas para optimizar vuestro sitio.

      ¡Nos leemos!

    7. Mil gracias! he llegado a los 2.76 segundos de carga gracias a ti.
      Seguiré mejorando!

    8. Hola. yo mejores mucho la velocidad del insight de goole, para desktop. y para mobil aun me sigue diciendo que tengo que «Quitar el JavaScript que bloquea la visualización de contenido» hay alguna forma de hacer que solo para la version mobile los JS que faltan quitar o mover al pie se puedan hacer en esa version sin alterar la version para desktop¿?

    9. Formas existen muchas, cuando sirves ua versión móvil puedes saber si el agente de usuario es móvil y en caso de serlo cargar unas u otras librerías en distintas partes, pero es complejo y debes saber programar o contar con un programador web.

    10. conoces alguna forma de poder bloquear algunos javascript por ejemplo de la version movil? que solo se utilizan en la version desktop?

    11. La más sencilla es que sólo los cargues en la versión que se usan, sería mucho más sencillo que bloquearlos.

    12. necesito ayuda, utilice el plugin de foteer-javascript y afecto mi pagina, lamentablemente mi respaldo se perdió, alguien puede decirme como lograr que mi pagina vuelva a la normalidad???

      ayuda por favor¡¡¡¡¡

    13. Hola gracias por el contenido, está bien que sea necesario compartir para acceder a algunas partes del post, pero no abuses de ello, saludos ;p

    14. Como puedo realizar lo que pide la herramienta de Google Speed si no tengo Word Press mi servidor esta en IIS.

    15. Muchas gracias amigo agregue el código y mi valoración en pageespeed para mobiles subió a 99 y ordenador 89, aunque deberías de agregar una barra de buscar XD.

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.