Cómo combinar Javascript en WordPress para un mejor rendimiento

Hay varias maneras de optimizar un sitio web de WordPress . Todas estas opciones deben explorarse y ponerse en acción para ayudarlo a evitar un sitio web de carga lenta. Combinar JavaScript en WordPress es una de las cosas más importantes que puede hacer desde el principio.

WordPress ofrece muchas opciones para los usuarios en todos los aspectos. Es por eso que la plataforma es tan popular y muy fácil de usar. Casi todas las tareas se pueden realizar utilizando el complemento adecuado.

Echemos un vistazo a por qué debería combinar WordPress JavaScript y el complemento que le permitirá realizar fácilmente la función necesaria.

¿Por qué combinar JavaScript en WordPress?

Para comprender por qué desea combinar JavaScript externo en WordPress, debe comprender qué sucede realmente cuando se solicita una página HTML. Veamos el proceso a medida que sucede para darle una mejor comprensión.

Cuando se solicita una página, el navegador que está utilizando envía un mensaje, o una consulta, para todos sus recursos. Todos los archivos, incluidos todos los HTML y JavaScript externos, se obtienen del servidor del sitio web y se cargan en el navegador.

Aunque todos los archivos JavaScript se descargan juntos, en realidad se ejecutan en el orden en que aparecen en el HTML. La descarga por separado puede ralentizar la velocidad del sitio web. Pero realmente obtiene velocidades de carga de página más lentas porque el proceso general de la secuencia ejecutada puede llevar más tiempo.

Estos archivos JavaScript de WordPress , así como los archivos CSS , se conocen como recursos de bloqueo de procesamiento. Todo esto realmente significa que otros componentes de su sitio web no se cargarán hasta que estos archivos JavaScript y CSS hayan terminado por completo. Dado que todos estos archivos se encuentran comúnmente en el encabezado del sitio web, pueden ocurrir ciertos problemas.

Se pueden realizar pruebas simples de velocidad del sitio web para ver si tiene estos problemas. Sin embargo, una forma segura de ayudar es combinar CSS externo y HTML JavaScript externo.

Echemos un vistazo a un complemento que puede ayudarlo a combinar fácilmente JavaScript externo en WordPress.

Autooptimizar

Autoptimize es un fantástico complemento de optimización de sitios web de WordPress que ofrece una serie de funciones y configuraciones. Todos estos le permiten optimizar su sitio web de diferentes maneras.

Una de las principales cosas que logra este complemento es que le permite combinar JavaScript externo en WordPress. También agrega, combina y almacena en caché scripts y estilos. Esta es la opción exacta que queremos emplear hoy.

A continuación, le mostraré cómo instalar, activar y usar el complemento. Dicho esto, junto con la capacidad de combinar JavaScript en WordPress y combinar CSS externo, Autoptimize también le brinda la capacidad de:

• CSS crítico en línea
• Aplazar el CSS completo agregado
• Minimizar HTML
• Aplazar guiones al pie de página del sitio web
• Optimizar Imágenes
• Imágenes de carga diferida
• Optimizar fuentes de Google
• JavaScript asíncrono no agregado
• Quitar WordPress Core Emoji

Todas estas cosas funcionan en conjunto para un mejor rendimiento del sitio web. Básicamente, Autoptimize acelerará su sitio web de WordPress al tomar todos los scripts y estilos y minimizarlos y comprimirlos. También minimiza el HTML , por lo que todo esto funciona en conjunto para hacer que su sitio web sea más liviano y agregar tiempos de carga de página más rápidos.

Instalar y activar la optimización automática

Para combinar correctamente JavaScript externo en WordPress, primero debe instalar y activar el complemento Autoptimize. Puede hacerlo desde la página de complementos de su panel de administración de WordPress en el backend de su sitio web. Simplemente busque, "Autooptimizar".

Una vez que el complemento se haya instalado y activado, debe acceder a la página de configuración principal para configurarlo como desee. Para hacer esto, haga clic en Configuración > Optimizar automáticamente, ubicado en el área de menú de la izquierda de su panel de control .

Esto lo llevará a la página de configuración principal de Autoptimize, donde puede configurar los ajustes para combinar correctamente el JavaScript de WordPress.

Combinar JavaScript en WordPress

Si bien el complemento ofrece muchas configuraciones de optimización diferentes, nos estamos enfocando en una en particular para este tutorial.

Cuando llegue a la página de configuración, verá cinco pestañas diferentes. Éstos incluyen:

• JS, CSS y HTML
• Imágenes
• Extra
• optimizar más
• CSS crítico

En el menú JS, CSS y HTML, desea marcar el cuadro de opción en la parte superior que dice "Optimizar código JavaScript".

Haga clic en el botón "Guardar cambios" cuando haga esto y ¡listo! Ahora está combinando correctamente JavaScript externo en WordPress, y debería ver los resultados con bastante rapidez.

Otras opciones de optimización disponibles

Ahora que ha hecho clic en la función principal y la está ejecutando, echemos un vistazo a las otras configuraciones de optimización que ofrece Autoptimize. Dado que el complemento ya está instalado, no desea que nada se desperdicie. Esto es lo que está disponible en diferentes pestañas.

JS, CSS y HTML

Además de la configuración principal "Optimizar código JavaScript", también puede elegir entre una serie de otras configuraciones para poner en juego con su código JavaScript. Revise estos y configúrelos como le gustaría.

Ahora desplácese hacia abajo y encontrará algunas opciones para combinar el código CSS externo también. Una vez más, marque estas casillas como mejor le parezca. Su configuración se basará en sus preferencias.

Desplácese un poco más hacia abajo y encontrará las opciones de HTML y CDN , así como la información de caché que está disponible.

Finalmente, en la parte inferior de la página, verá algunas opciones más Misceláneas disponibles para usted. Continúe, termine esto y haga clic en el botón "Guardar cambios" para poner en funcionamiento su nueva configuración.

Imágenes

Si hace clic en la pestaña Imágenes, se le dará información y opciones que ayudarán a optimizar las imágenes en su sitio web de WordPress. También tienes la oportunidad de cargar imágenes de forma diferida desde aquí.

Extra

Esta pestaña le dará una serie de configuraciones de optimización automática "adicionales" que puede revisar y configurar como le gustaría.

optimizar más

Esta pestaña es donde el complemento Autoptimize le dará algunas sugerencias y recomendaciones de otros complementos para ayudar a optimizar su sitio web.

CSS crítico

Finalmente, la pestaña Critical CSS le dará información sobre el complemento de Critical CSS que puede instalar. Recomiendo agregar este complemento para un rendimiento óptimo. Si desea instalarlo, simplemente use el enlace incorporado para obtenerlo y la herramienta lo ayudará a combinar CSS externo.

¡Eso es todo! Ya ha pasado por todo el proceso de configuración del complemento. En este punto, el complemento debería estar funcionando exactamente según sus especificaciones. Ahora que ha combinado correctamente JavaScript externo en WordPress, debería ver cambios en la velocidad de su sitio con bastante rapidez.

Pensamientos finales

WordPress JavaScript y CSS externo pueden ser cosas difíciles de manejar si no está seguro de qué hacer. Afortunadamente, el complemento Autoptimize le permite combinar fácilmente JavaScript externo en WordPress con solo una instalación y unos pocos clics en los cuadros correctos.

Espero que la guía le haya dado una mejor comprensión de cómo se manejan los archivos JavaScript y CSS y por qué es importante minimizarlos y combinarlos para un mejor rendimiento del sitio.

¿Ya ha estado usando el complemento Autoptimize para combinar JavaScript en WordPress? ¿Qué otros complementos ha encontrado que cumplen bien este mismo proceso para usted?