Portada Wordpress WordPress – Cómo Eliminar el JavaScript de la Parte Superior de la Página
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.
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:
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.
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.
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.
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.
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:
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:
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.
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!.
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.
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: