WordPress – Cómo Eliminar el JavaScript de la Parte Superior de la Página

Categorias: Plugins, Wordpress

Cómo Eliminar el JavaScript de la Parte Superior de la Página en WordPress

Es muy probable que nunca haya sido una preocupación para ti que el JavaScript estuviera bloqueando la visualización del contenido de tu sitio web, hasta que a Google le pareció bien indicarlo en su PageSpeed Insights.

Desde entonces, el mensaje se ha hecho muy popular y muchos usuarios de WordPress han estado ”peleando” para conseguir eliminar esa alerta de las indicaciones que Google hace en su PageSpeed.

Esta advertencia de Google puede solucionarse de la forma que PageSpeed indica, que es: Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página.

El problema es que muchas veces no se sabe cómo hacer lo que Google indica, sobre todo si no se tiene conocimientos de PHP.

No existe ninguna opción en WordPress que diga -¿Quieres eliminar el JavaScript de la parte superior de la página?, ni nada por el estilo, así que hay que buscar otras opciones para conseguirlo, si es que se puede.

Hoy vamos a hablar de esto peo antes vamos a ver porque Google nos hace esta indicación del JavaScript.


Qué Significa que el JavaScript Bloquee la Visualización de la Página?

En un principio puede parecer que hay algo en nuestro sitio web que no se esté mostrando porque el malvado JavaScript lo está tapando, literalmente.

Esto no es así, si se lee atentamente lo que dice Google en el PageSpeed es lo siguiente:

No se ha podido visualizar el contenido de la mitad superior de la página sin tener que esperar a que se cargara alguno de los recursos.

Lo que quiere decir es que el navegador tiene que espera a que JavaScript se cargue antes de poder ver el contenido de la parte de arriba de WordPress.

Esto hace que la web se cargue algo más lenta de lo que debiera, porque hay JavaScript que puede pesar mucho y el usuario tiene que esperar a que termine de descargar el JS para poder ver la mitad superior de la web.

Esto puede notar en conexiones lentas sobre todo, no tanto en las conexiones actuales.

Si echáis un ojo al código de vuestra web, veréis que Jay JavaScript entre las etiquetas <head>. Si, por ejemplo, hacéis una búsqueda de jquery.js posiblemente veréis algo parecido a esto:

javascript head código web

Lo que quiere Google es que ese JavaScript no esté entre las etiquetas <head>, ni en el resto de la parte superior de la web. Vamos, que si se puede, ponerlo en el <footer>.

Hay que pensar que muchos de los añadidos que vamos poniendo en nuestro WordPress, analíticas, botones a redes sociales, sliders, etc… usan JavaScript, y por lo general lo encontramos en la parte superior de la página y eso es lo que Google recomienda solucionar.

Para conseguir esto en un WordPress sin tener experiencia en código, podemos usar el plugin Speed Booster Pack.


Plugin Speed Booster Pack para WordPress

El plugin Speed Booster Pack puede ser la opción que se está buscando para trasladar todo el JavaScript al footer con sólo seleccionar un par de opciones.

Es un plugin gratuito que se puede descargar desde el repositorio de plugins de WordPress haciendo click aquí.

También podemos instalarlo directamente desde la sección de plugins de nuestro WordPress de la manera habitual.

Una vez instalado y activado, podemos encontrar las opciones en Ajustes > Speed Booster Pack.

Speed Booster Pack plugin WordPress

Las opciones de este plugin son muy llamativas, no son a las que estamos acostumbrados a ver en WordPress, y están en perfecto ingles, pero vamos a echarles un vistazo.

Ajustes Speed Booster Pack WordPress

Hay cinco menús desplegables que son:

Antes de hacer ningún cambio hay que cerciorarse que tenemos una copia de seguridad reciente demuestro WordPress.

Antes de hacer cambios importantes en WordPress, haz una copia de seguridad de archivos y base de datos.


Para conseguir mover el JavaScript al footer debemos ir a General options y marcar la casilla Move scripts to the footer, tal y como demuestra en la imagen.

mover scripts al pie pagina peed Booster Pack plugin WordPress

Después sólo habría que Guardar los Cambios para que los cambios surgieran efecto, pero para comprobar su efectividad, tal vez deberíamos ir antes al PageSpeed y comprobar la puntuación y los problemas que nos muestra:

page speed prueba 1

Después de guardar los cambios, dejamos pasa los 30 segundos en los que PageSpeed guarda los resultados en su caché y volvemos a probar:

page speed prueba 2

Como vemos en la web de prueba, habían 3 JavaScript que han dejado de mostrarse en los resultados del test. El plugin ha funcionado y Speed Booster Pack ha cumplido con lo que decía sin más complicaciones y la nota ha subido de 84 puntos a 89 puntos.

Tampoco es que haya sido mucho, pero hemos pasado del color amarillo al verde, lo cual nos indica que el cambio es bueno y que la relación de nuestro WordPress con Google ha mejorado… aunque sea un poco.

Lo siguiente que debemos hacer es comprobar la web. Que el cambio de de posición de JavaScript. Por ejemplo si nuestro theme usa un slider o alguna otra función que pueda hacerse visto afectado con el cambio. No hay que dar por supuesto que todo está bien al hacer este tipo de cambios. Hay que revisarlo.


¿Qué Hacemos con el CSS?

Como vemos en la imagen, los JavaScript se han solucionado pero siguen quedando dos alertas de recursos CSS que también nos marca PageSpeed.

En el plugin Speed Booster Pack también existe una opción para solucionar esto, se encuentra en el desplegable Still need more speed?.

Si marcamos la primera opción aparecerá más. Debemos dejar marcad las opciones Load CSS asynchronously y Insert all CSS styles inline to the footer para luego guardar los cambios.

Después hay que volver a realizar una prueba en PageSpeed y comprobar si ha funcionado, porque en las pruebas realizadas en este artículo, no sólo no ha solucionado las alertas CSS, si no que al marcar las opciones para hacerlo, ¡ha empeorado la puntuación!.

page speed prueba 3

Así que, como hemos podido comprobar, el plugin Speed Booster Pack nos ha funcionado para eliminar las alertas de PageSpeed referentes al JavaScript, pero no ha funcionado para nada con las alertas CSS. Para esto habrá que buscar una solución alternativa.


Cosas a tener en Cuenta

Como hemos visto, Speed Booster Pack puede ser una solución pero no es la panacea. En las opciones CSS no ha sido efectivo y hemos visto que en algunos themes tampoco ha funcionado correctamente.

También es un problema pasar ciertos JS al footer ya que pueden dejar de funcionar sliders y otras funcionalidades de WordPress.

El plugin tiene muchas opciones para optimizar WordPress, se puede probar y verificar con PageSpeed si son efectivas o no, pero como siempre, recomendamos realizar un backup antes de realizar pruebas agresivas.

¿Es tan importante la velocidad? La respuesta general es afirmativa. Los usuarios no van a aguantar muchos segundos esperando a que se cargue una página y aunque lo hagan, Google no va a posicionar un sitio web lento en los primeros puestos de búsqueda.

PageSpeed puede ser de ayuda para ver los errores graves de optimización que un sitio puede tener, pero no hay que obsesionarse y hay que ponerlo en perspectiva.

Comprimir una imagen para ganar 5,3 KB no va a hacer que nuestra web vuele o que ganemos posicionamiento, pero si nos avisa que podemos recuperar 1,2 MB de una imagen si que es algo para tenerlo en cuenta.

Con el JS pasa algo parecido, Google nos da una recomendación pero no tenemos que sacrificar la usabilidad de nuestro WordPress por ganar algo de puntuación en PageSpeed, de poco nos sirve la velocidad si los usuarios no interactúan con la Web una vez dentro, algo muy importante para Google precisamente.

Lo que si es importante para WordPress es tener un hosting que monte discos SSD. Tanto la velocidad de carga como el rendimiento en general se multiplica en un hosting SSD

Los planes de Hosting WordPress que ofrecemos en Hostinet, montan todos discos SSD además de ofrecer muchas más prestaciones:

  • Hosting especializado en WordPress con discos SSDWordPress 55´99 / mes
  • Hosting especializado en WordPress con discos SSDWordPress 107´99 / mes
  • Hosting especializado en WordPress con discos SSDWordPress 5011´99 / mes
  • Hosting especializado en WordPress con discos SSDWordPress 7513´99 / mes
  • Hosting especializado en WordPress con discos SSDWordPress 55´99/mes
  • Hosting especializado en WordPress con discos SSDWordPress 107´99/mes
  • Hosting especializado en WordPress con discos SSDWordPress 5011´99/mes
  • Hosting especializado en WordPress con discos SSDWordPress 7513´99/mes
    • Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.
    • Almacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSD
    • El espacio en disco es la suma del espacio que ocupan los archivos que forman la web y el correo electrónico.
    • La transferencia de datos mensual es la cantidad total de información que se descargan los visitantes de nuestra web en cada acceso más nuestro uso a través de FTP y correo.
    • Ideado para sacar el máximo partido a tu WordPress
    • Aumenta la velocidad de tu web + Info
    • Tras evaluación de nuestro equipo de migraciones
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web
    • Elige la versión de PHP que necesites
    • Certificado SSL autofirmadoCertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUI
    • Contrata tu hosting web y consigue dominios gratisUna vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.
    • Migramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a Hostinet
    • Ideado para sacar el máximo partido a tu WordPress
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web
    • Hosting específicamente preparado para sacar el máximo rendimiento a tu Wordpress
    • Contrata tu hosting web y consigue dominios gratisUna vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.
    • Cada dominio alojado muestra un contenido único y diferente del resto
    • Aparcando un dominio secundario en el alojamiento de nuestro dominio principal conseguimos que ambos dominios resuelvan indistintamente con la misma página que tenemos colgada.
    • Cuentas de correo gestionables a través de POP, IMAP y servicio Webmail
    • Tus buzones de correo y mails limpios de virus y con un potente filtro antispam
    • Centro de datos en Madrid (España)
    • Opción de contratación de IP dedicadaPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUI
    • Opción de contratación de certificados SSL. Se requiere Ip dedicada.Puedes contratar tu certificado SSL por solo 14.95 € al año AQUIPuedes contratar tu certificado SSL por solo 14.95 € al año AQUIPuedes contratar tu certificado SSL por solo 14.95 € al año AQUIPuedes contratar tu certificado SSL por solo 14.95 € al año AQUIPuedes contratar tu certificado SSL por solo 14.95 € al año AQUI
    • Bases de datos MySQL disponibles para su uso en cada alojamiento web
    • Supeditado al espacio total del alojamientoSupeditado al espacio total del alojamientoSupeditado al espacio total del alojamientoSupeditado al espacio total del alojamientoSupeditado al espacio total del alojamiento
    • ¿Quieres realizar desarrollos con Python? En Hostinet innovamos dia a dia en tu beneficio y por ello te presentamos como última novedad en todos nuestros servidores Web la posibilidad de desplegar tus aplicaciones con Python directamente desde el cPanel de tu Hosting.
    • ¿Quieres desarrollar tus aplicaciones con Ruby? En Hostinet te presentamos como última novedad en todos nuestros servicios de Hosting Web la posibilidad de desplegar tus aplicaciones con Ruby on Rails directamente desde el panel de control cPanel.
    • El fichero .htaccess permite modificar diferentes variables en la configuración de nuestra cuenta de alojamiento en el servidor.
    • El módulo mod_rewrite permite crear direcciones URL alternativas a las dinámicas generadas por la programación de nuestros sitio web (blog, foro, portal…), de tal modo que sean más legibles y fáciles de recordar
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web. Soporte en español por personal de Hostinet.
    • Completa recopilación de tutoriales sobre Hosting, Dominios y Wordpress
    • 30 dias para probar tu servicio de Hosting y si no te convence el servicio... te devolvemos el dinero!!
    • Copia diaria incremental realizada por HostinetCopia diaria incremental realizada por HostinetCopia diaria incremental realizada por HostinetCopia diaria incremental realizada por Hostinet
    • Podrás hacer tus copias de seguridad desde tu panel de alojamiento webPodrás hacer tus copias de seguridad desde tu panel de alojamiento webPodrás hacer tus copias de seguridad desde tu panel de alojamiento webPodrás hacer tus copias de seguridad desde tu panel de alojamiento webPodrás hacer tus copias de seguridad desde tu panel de alojamiento web
    • Precio para nuevas altas. Contratación anual.