Aplazar la carga de JavaScript en WordPress

Si utilizamos la herramienta PageSpeed Insights de Google para analizar nuestro WordPress es bastante probable que entre los elementos a corregir se encuentre el siguiente:

Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página

¿Qué significa esto?

En nuestra web se cargan archivos CSS para dar estilo a las páginas y archivos Javascript para generar elementos dinámicos, entre otras cosas. Normalmente, este tipo de archivos se sitúan en la cabecera de la web, por lo que el navegador cargará estos contenidos antes que el código de la propia página, provocando una mayor espera hasta que se muestren contenidos en el navegador.

Para solucionar esto Google recomienda colocar solo en la cabecera el código Javascript y CSS que se vaya a utilizar en la página que se muestra o realizar una carga aplazada del código. La primera opción es poco viable en WordPress, ya que resultaría muy complicado averiguar el código concreto que se carga en cada página, pero sí que se puede hacer algo con la carga aplazada.

Aplazar la carga de CSS

En primer lugar, la carga aplazada de las hojas de estilo CSS no es recomendable ya que, de hacerlo, la página se mostrará inicialmente sin diseño alguno, para pasar a maquetarse al finalizar la carga, lo que suele provocar un efecto extraño en la carga.

Aplazar la carga de JavaScript (JS)

La carga aplazada de Javascript sí se puede probar, teniendo en cuenta que esta carga aplazada en ocasiones puede generar problemas en la web, en especial si estamos usando plugins con funcionamiento dinámico como galerías de imágenes, o el propio tema de WordPress cuenta con esos elementos. Por tanto, se puede probar la carga aplazada, y solo en caso de que veamos que todo sigue funcionando bien en la web deberemos dejarla activada.

La primera manera de lograr esa carga aplazada de Javascript consiste en agregar el siguiente código al archivo functions.php del tema que estemos utilizando:

Para comprobar si el código aplicado ha funcionado podemos cargar nuestra web y ver el código fuente, para analizar si los archivos .js se cargan al final. Hay que tener en cuenta que no necesariamente todos los archivos .js se moverán al pie de la web.

Si no queremos modificar el código existen diversos plugins para WordPress que también sirven para aplazar la carga de Javascript al pie de la web.

Una opción sería el plugin JS & CSS Script Optimizer. Una vez instalado veremos en el apartado Ajustes la opción Script Optimizer.

Aquí podremos configurar algunos aspectos del funcionamiento del plugin: combinar archivos Javascript y CSS en un único archivo, agregar excepciones a la optimización, etc.

De esa forma, en caso de que haya problemas tras la activación del plugin siempre podemos aplicar cambios en la configuración para ver si se soluciona el problema.

Existen otros plugins que sirven para hacer lo mismo, con más o menos opciones añadidas: Scripts to Footer, JavaScript to Footer, JCH Optimize, etc.

Carga asíncrona de JavaScript (JS)

Otra forma de aplazar la carga del Javascript o CSS es hacer una carga asíncrona en paralelo al resto de contenidos de la web, en lugar de hacer una carga de forma secuencial (unos elementos detrás de otros).

Para ello, podamos utilizar un plugin como el Async JS and CSS. Este plugin también añade dentro de Ajustes la opción Async Settings, donde podremos configurar el funcionamiento del plugin: elementos a cargar de forma asíncrona, método de carga de los CSS, etc.

Siempre haz pruebas

Recordar de nuevo que en caso de probar cualquiera de estos plugins o modificaciones en el código tendremos que hacer pruebas en el frontal de la web para verificar que todo sigue funcionando como debiera.

En caso de que surjan problema es preferible no aplazar la carga de Javascript y CSS.

También es importante reseñar que esta carga aplazada no siempre se tiene que traducir en una mejora en la puntuación que obtengamos en PageSpeed, pudiéndose dar el caso de que incluso la nota baje.

Para tales casos también será conveniente desactivar estos plugins.

AVISO: esta publicación es de hace dos años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

VALORA ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
FlojitoNo está malEstá bienMe ha servidoFantástico (48 votos, promedio: 3,63 de 5)
Cargando…

Autor: WebEmpresa

Empresa especializada en hosting económico de alto rendimiento, con planes específicos para sitios WordPress de calidad.

Comparte esta entrada en
468 ad

Centro de preferencias de privacidad

Cookies imprescindibles

Se usan para saber si ya aceptaste nuestras políticas, si ya estás suscrito a nuestra newsletter, para reconocer el estado de tu sesión si la tuvieses y para servir más rápidos los contenidos.

No se captura IPs ni siquiera para el servicio de Analytics así que tu visita es privada.

JSESSIONID, _cfuid, wpSGCachePypass, mailerlite, gdpr, gawp
mailerlite, _cfuid

Cookies de terceros

Usamos cookies de terceros con servicios, también garantes de tu privacidad, que analizan tus usos de navegación para que podamos mejorar los contenidos, si ya estás suscrito al boletín y los elementos compartidos en redes sociales y el formulario de comentarios.

1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID, disqus_unique, disqusauth
disqus_unique, disqusauth
1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID

Pin It on Pinterest

Share This
Ir al contenido