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.

¿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

  1. <script type="text/javascript">// <![CDATA[ // Add a script element as a child of the body function 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; // ]]></script>

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:

  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.

  1. function footer_enqueue_scripts() {
  2. remove_action('wp_head', 'wp_print_scripts');
  3. remove_action('wp_head', 'wp_print_head_scripts', 9);
  4. remove_action('wp_head', 'wp_enqueue_scripts', 1);
  5. add_action('wp_footer', 'wp_print_scripts', 5);
  6. add_action('wp_footer', 'wp_enqueue_scripts', 5);
  7. add_action('wp_footer', 'wp_print_head_scripts', 5);
  8. }
  9. add_action('after_setup_theme', 'footer_enqueue_scripts');
  10. function footer_enqueue_scripts() {
  11. remove_action('wp_head', 'wp_print_scripts');
  12. remove_action('wp_head', 'wp_print_head_scripts', 9);
  13. remove_action('wp_head', 'wp_enqueue_scripts', 1);
  14. add_action('wp_footer', 'wp_print_scripts', 5);
  15. add_action('wp_footer', 'wp_enqueue_scripts', 5);
  16. add_action('wp_footer', 'wp_print_head_scripts', 5);
  17. }
  18. 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.

Bola extra!!! otros artículos que te interesarán

  1. ¿Cómo limpiar las urls con PHP y .htaccess?
  2. Usar Gzip en WordPress para mejora el rendimiento.
  3. ¿Qué es un sitemap.xml?
  4. Mejorar la seguridad de WordPress con .htaccess
  5. Y para terminar te recomiendo leer mi guía y manual de SEO para principiantes especialmente orientada a usuarios de WordPress.


Conoce mis servicios WPO.



Servicios personalizados para profesionales, agencias y PYMES

14 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. 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.

  3. 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?

  4. Gracias!

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

  5. 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!

  6. 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¿?

  7. 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.

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

  9. 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.

  10. 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¡¡¡¡¡

Deja un comentario

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