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.

Antes de continuar quiero recomendar, a los que estáis interesados en mejorar el rendimiento de vuestra web,  este hosting especializado en WPO para cualquier tipo de web y este otro servicio WPO especialmente orientado a usuarios de WP.

[-] 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?
  • Bola extra!!! otros artículos que te interesarán
  • ¿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.

    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

    ¿Con ganas de aprender más? Conóceme y sigue mis perfiles sociales AQUÍ.

    También puedes conocer mis servicios:.

    Servicios SEO


    Servicios personalizados como Consultor SEO Freelace para profesionales, eCommerce, agencias y PYMES

    18 comentarios

    1. Daniel

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

    2. Agustin

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

    3. jlmora

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

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

      Gracias!

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

    6. jlmora

      Este tipo de optimizaciones no son sencillas amigo… Deberías buscar un profesional

    7. Narcis

      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!

    8. Carlos Martin

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

    9. alan

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

    10. jlmora

      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.

    11. alan

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

    12. jlmora

      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.

    13. jose

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

    14. jlmora

      ¿Has probado a desinstalarlo? si no puedes entra por FTP y bórralo.

    15. Luis M.

      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

    16. abraham

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

    17. Alex

      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.

    Dejar un comentario

    Tu dirección de correo electrónico no será publicada.

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