Saltar al contenido

Cómo combinar JavaScript externo en WordPress

Un sitio web de carga lenta es un gran problema, pero hay muchas formas de solucionarlo. Entre las diferentes soluciones, puedes intentar combinar correctamente JavaScript en WordPress.

Incluso si la solución es simple, funcionará de maravilla. En este artículo, le mostraremos por qué debería combinar archivos JavaScript en WordPress y cómo hacerlo en unos sencillos pasos.

Los 20 mejores temas de WordPress para criptomonedas en 2024

¿Por qué necesito combinar archivos JavaScript externos?

Como ya sabrás, al solicitar una página HTML, el navegador envía una solicitud para obtener todos los recursos necesarios. Todos los archivos, incluidos los archivos JavaScript, se recuperarán del servidor y se cargarán nuevamente en el navegador.

En cada solicitud, los archivos JavaScript se descargan juntos, pero se ejecutan en el orden en que aparecen en HTML. Si bien las descargas independientes pueden ralentizar su sitio, los procesos secuenciales pueden hacer que espere aún más.

Los archivos JavaScript, junto con los archivos CSS, son recursos que bloquean el procesamiento, lo que significa que no cargarán otros componentes a menos que todos los archivos estén completamente cargados. Dado que estos archivos suelen estar ubicados en el encabezado de una página web, esto puede causar problemas.

Para asegurarse de tener estos problemas, verifique el rendimiento de su sitio ejecutando una prueba de velocidad.

Hay muchos sitios web como pingdom, GTMetrix Es Información de velocidad de página de Google esto te ayudará a hacer esto. Simplemente ingrese el enlace de su sitio web y haga clic en Analizar.

Leer  Cómo crear un sitio web de membresía en WordPress en 10 pasos

Aquí hay algunos resultados de muestra de nuestros sitios de prueba:

Resultado de la prueba con GTmetrix

Idealmente, el resultado se encuentra dentro de las categorías verdes (rápidas). O al menos asegúrate de que no esté en la categoría roja. Si esto sucede, actúe de inmediato.

La mayoría de las veces recibirá una advertencia si se encuentran más de cinco archivos JavaScript. Cuando encuentres los problemas, tendrás todo listo para solucionarlos.

HTTP/2

Implementar la última tecnología como HTTP/2 siempre es beneficioso. Si su proveedor de alojamiento admite descargas paralelas, como lo hace Hostinger, es posible que no necesite fusionar los archivos.

Lanzado en 2015, HTTP/2 (Protocolo de transferencia de hipertexto, versión 2) fue desarrollado como una versión mejorada de HTTP/1.1, que ha sido el estándar de comunicación en línea desde 1989. El objetivo del nuevo protocolo es:

  • Mejorar la velocidad de carga de la página
  • Habilitar descargas paralelas
  • Habilitar multiplexación
  • Comprimir encabezados de solicitud
  • Solucionar el problema de bloqueo del encabezado

Esta nueva versión tiene varios métodos para reducir la latencia, lo que afectará el rendimiento general del sitio.

Tenga en cuenta que este tutorial sobre cómo combinar archivos JavaScript externos está destinado a quienes utilizan HTTP/1.1.

¿Cómo combinar archivos JavaScript en WordPress?

Como mencionamos anteriormente, varios archivos JavaScript se sumarán al tiempo total de renderizado y activarán una advertencia al realizar la prueba de velocidad de carga de la página.

Como solución, puedes combinar archivos Javascript en WordPress, convertirlos todos en un solo archivo y eliminar el resto. Si copia y pega el script correcto, el archivo JavaScript combinado funcionará normalmente como archivos separados.

Leer  Cómo cambiar un logo en WordPress: 3 formas sencillas

Si bien la idea de copiar y pegar puede parecer simple, realizar el trabajo de codificación manualmente es un desafío. Dado que existe una curva de aprendizaje pronunciada cuando se trata de JavaScript, realizar estas tareas descuidadamente causará más daño que bien.

Por lo tanto, puedes utilizar un complemento para combinar JavaScript en WordPress.

Uno de los mejores complementos para hacer esto es Optimización automática.

Este complemento puede ayudarlo a administrar tareas de minificación de HTML, CSS o JavaScript. Actualizado periódicamente y con más de 900.000 instalaciones activas, este complemento es muy recomendable.

Aunque puedes usarlo gratis, puedes obtener sus versiones premium para acceder a más funciones.

Imagen del complemento Autoptimize en WordPress.

Una vez instalado y activado, vaya a Panel de control de WordPress -> ajustes -> Optimización automática. en el menú JS, CSS y HTMLactivar la opción ¿Optimizar el código JavaScript?. Luego haga clic Guardar cambios al final de la página. La optimización es automática, por lo que puedes volver a probar inmediatamente la velocidad de carga de tu sitio para ver mejoras.

Además, si desea combinar archivos CSS, también puede habilitar la opción ¿Optimizar el código CSS?. Si está utilizando CDN, puede habilitar todas las opciones, incluida CDN.

Conclusión

La velocidad de carga es muy importante para cualquier sitio web. Si tienes algún problema en esta zona, es importante corregirlo lo antes posible.

Puede combinar archivos JavaScript en WordPress para acelerar la carga de su sitio web. Sin embargo, esto puede requerir el manejo manual del código.

Si desea evitar errores inesperados, puede utilizar un complemento. Autoptimze es uno de los mejores complementos de WordPress para esto. Una vez instalado, optimizará su sitio web automáticamente.

Leer  Cómo utilizar la función wp_insert_post en WordPress para insertar entradas personalizadas
Compartir

Deja una respuesta