Cómo Minificar JavaScript y CSS con Fast Velocity Minify en WordPress

¿Ha estado tratando de mejorar el rendimiento de su sitio web utilizando diferentes técnicas? ¿Has pensado en lo que sucedería si tuvieras que minimizar JavaScript y CSS?

Realizar esta función hará que su sitio web sea mucho más rápido y esos resultados se reflejarán en las pruebas de velocidad de su sitio web. Hay algunas herramientas diferentes que puede usar para minimizar JavaScript y CSS. Esto, junto con otras técnicas, mejorará la velocidad de tu sitio web .

En este tutorial, le mostraré cómo usar un excelente complemento llamado Fast Velocity Minify para acelerar su sitio web y ayudar a mejorar el rendimiento general del sitio web.

¿Por qué minimizar Javascript y CSS?

El principal motivo detrás de la minimización de JavaScript y CSS es la velocidad del sitio y el rendimiento general. Si compara las pruebas de velocidad del sitio web antes y después, encontrará que los tamaños de sus páginas web y la velocidad general del sitio han cambiado drásticamente. A menudo, este y otros problemas del sitio web se pasan por alto .

Tal vez aún más importante es el hecho de que Google ha anunciado que las velocidades de carga más rápidas afectan directamente la clasificación del sitio web y el SEO general .

Los tiempos de carga más rápidos no solo ayudarán con el SEO general, sino que también brindarán a los usuarios de su sitio una mejor experiencia.

Minimizar velocidad rápida

Para minimizar JavaScript y CSS en WordPress, vamos a utilizar un complemento suave llamado Fast Velocity Minify .

Básicamente, este complemento es un complemento de optimización de velocidad para desarrolladores y usuarios avanzados. Puede usarlo para minimizar JavaScript en WordPress, así como usar las opciones y la funcionalidad del complemento para mucho más.

Cuando minimiza CSS en WordPress usando el complemento Fast Velocity Minify, se configura para una mejor clasificación de SEO y una mejor velocidad general y rendimiento del sitio.

Cómo funciona el complemento

Este complemento reduce las solicitudes HTTP al fusionar archivos CSS y JavaScript en grupos de archivos mientras intenta usar la menor cantidad posible. Minimiza los archivos CSS y JS de WordPress con PHP Minify. No hay requisitos adicionales.

Fast Velocity Minify brilla aún más porque incluye configuraciones y opciones para desarrolladores y usuarios avanzados. Sin embargo, la configuración predeterminada del complemento funcionará muy bien para la mayoría de los sitios de WordPress, por lo que puede instalar fácilmente el complemento y usarlo incluso si es un principiante.

Características principales del complemento

El complemento FVM ofrece un montón de funciones. Algunos de los principales que se destacan son:

• Combine archivos JS y CSS en grupos para reducir la cantidad de solicitudes HTTP.
• Fusión, integración y optimización de Google Fonts.
• Maneja las secuencias de comandos cargadas tanto en el encabezado como en el pie de página por separado.
• Mantiene el orden de los scripts incluso si excluye algunos archivos de la minificación.
• Admite scripts localizados (https://codex.wordpress.org/Function_Reference/wp_localize_script).
• Minimiza CSS y JS solo con PHP Minify, no se necesita software ni bibliotecas de terceros.
• Opción para diferir archivos JavaScript y CSS, ya sea globalmente o solo de PageSpeed ​​Insights.
• Crea archivos de caché estáticos en el directorio de cargas.
• Conserva sus archivos originales, duplicándolos y copiándolos en el directorio de cargas.
• Vea el estado y los registros detallados en la página de administración de WordPress.
• Opción para minimizar HTML, eliminar información adicional del encabezado y otras optimizaciones.
• Capacidad para desactivar la minificación para JS, CSS o HTML (purga el caché para verlo).

Ahora que sabe un poco más sobre cómo minimizar JavaScript y CSS, echemos un vistazo a cómo usar fácilmente el complemento Fast Velocity Minify.

Instalar y activar

Primero, instale y active el complemento Fast Velocity Minify en su sitio web. Puede hacer esto buscándolo en el repositorio de complementos de su panel de administración de WordPress.

Una vez que el complemento se haya instalado y activado, haga clic en Configuración> Fast Velocity Minify. Esto lo llevará a las opciones de instalación y configuración del complemento.

Cuando llegue al área correcta, verá 6 pestañas. Incluyen:

• Estado
• Ajustes
• Pro
• Desarrolladores
• Información del servidor
• Ayudar

Le mostraré cada área de pestaña, pero no configuraremos el complemento para usuarios avanzados y desarrolladores. En su lugar, le mostraré cómo configurar los ajustes básicos que minimizarán correctamente JavaScript y CSS en su sitio web de WordPress.

Echemos un vistazo a las pestañas.

Estado

La pestaña "Estado" simplemente enumerará todos sus archivos procesados ​​una vez que comience a usar el complemento. También le permite purgar archivos almacenados en caché.

Ajustes

Estos son sus ajustes de configuración básicos. Rellenarlos hará que el complemento funcione y podrá comenzar a minimizar los archivos Javascript y CSS en WordPress.

Pro

Esta pestaña le permitirá configurar los ajustes profesionales. Úselo solo si sabe y comprende lo que está cambiando.

Desarrolladores

La pestaña "Desarrolladores" le presentará opciones aún más avanzadas. Nuevamente, no use esto a menos que sea un desarrollador o sepa en lo que se está metiendo.

Información del servidor

Esta pestaña le proporciona toda la información del servidor para que pueda ver que todo funciona correctamente.

Ayudar

La pestaña "Ayuda" le permitirá hacer referencia a otros enlaces útiles para el complemento.

Ajustes de configuración básicos

Vuelva a hacer clic en la pestaña "Configuración". Puede completar esta parte como desee. Esto hará que el complemento funcione correctamente y le permitirá ganar velocidad en el sitio y otras funciones.

Dicho esto, aquí hay configuraciones básicas recomendadas que puede elegir para que el complemento funcione. Haga clic en las siguientes opciones en Configuración básica.

Use las capturas de pantalla como referencia.

Funcionalidad y opciones de URL

Para la funcionalidad, podría ser ideal conservar la configuración del complemento después de una desinstalación. Es posible que vuelva al complemento en una fecha posterior. Además, habilitar "Corregir editores de página" funciona bien si tiene un entorno de equipo en el sitio web. De esta manera, no tendrá que preocuparse de que los editores visuales causen un problema con la fusión de JavaScript y CSS.

En la mayoría de los casos, la detección automática de URL debería ser suficiente. Si tiene problemas para minimizar JS y CSS, es posible que deba forzar que ciertas URL funcionen correctamente. Sin embargo, probablemente no sepa cuál hasta que comience a experimentar problemas.

HTML, fuente, opciones de fuentes de Google

Habilitar la opción Encabezado de limpieza ayuda a simplificar la minimización de JS y CSS. Pero como arriba, puedes cambiar esta opción si experimentas problemas en el sitio.

En las Opciones de fuente, puede administrar cómo FVM maneja elementos como emojis y Google Fonts. Una de las mejores opciones es "Deshabilitar la fusión de Google Fonts".

Hablando de Google Fonts, mantener la selección de "en línea" ayuda a minimizar el código. Sin embargo, algunos sitios pueden experimentar un mejor rendimiento a través de "asincronismo" según el diseño.

Fuente impresionante y opciones de CSS

Una buena práctica para el rendimiento es incorporar elementos CSS de Font Awesome que pueda tener en su sitio web. Esto agiliza el efecto de CSS. Pero al igual que la opción anterior, puede experimentar un mejor rendimiento a través de async.

En las opciones de CSS, preservar el orden, deshabilitar "Imprimir" e insertar CSS en el pie de página contribuyen en gran medida a minimizar. Pero si algo en su sitio se rompe después de la selección, es posible que desee considerar deshabilitar el procesamiento de CSS y minimizar los archivos.

Opciones de velocidad de página

Cuando se trata de pruebas de PageSpeed, puede habilitar "aplazar todos los archivos JS solo para PSI". También puede excluir archivos JavaScript en una lista de ignorados para PageSpeed ​​Insights.

Esto le brinda una representación más precisa del rendimiento de su sitio sin errores de lanzamiento de JavaScript de terceros.

¡Eso es todo! Puede dejar todo lo demás sin marcar o completarlo como mejor le parezca. Desplácese hasta la parte inferior y haga clic en el botón "Guardar cambios" y estará listo y funcionando.

Pensamientos finales

Cuando minimiza correctamente JavaScript y CSS en su sitio web de WordPress, crea una mejor experiencia de usuario y velocidades de carga de página más rápidas. Además, pone su sitio en el camino correcto para un mejor SEO y clasificación en Google .

Ahora, tiene una manera fantástica de hacer esto que no requiere habilidades de codificación. Simplemente siga los pasos anteriores y estará listo para comenzar.

¿Ha descubierto que minimizar JavaScript y CSS ha ayudado a la velocidad y el SEO de su sitio? ¿Qué otros complementos o técnicas está utilizando para lograr esto?