Cómo Minimizar Archivos CSS y Javascript en WordPress

Cómo Minimizar Archivos CSS y Javascript en WordPress

Uno de los problemas comunes que enfrentan un sitio web a la hora  de servir páginas optimizadas y que cargan rápido, es el número de archivo de estilización CSS y Javascript, que incluyen tanto los plugins como los temas en WordPress, lo cual resulta en un problema de rendimiento, exceso en solicitudes al servidor. Hoy te mostraremos cómo minimizar archivos CSS y Javascript en WordPress.

Minimizar Recursos en WordPress

El tamaño de los archivos y recursos solicitados del servidor por el visitante afecta considerablemente el tiempo de carga y renderización de una página web de WordPress, y por tanto en tiempo consumido para servir la página al usuario.

Por tanto, es muy importante tomar en cuenta este asunto a la hora de crear un sitio web en WordPress. Cualquier tema y muchos plugins traen sus propios recursos y archivos de CSS, Javascript y HTML. Dichos recursos son necesarios para que el visitante obtenga una página completa y bien presentada.

Es necesario tomar considerar bien tus elecciones cuando decides descargar o elegir un tema para tu sitio web, para ofrecer un sitio rápido a las personas, y al mismo tiempo amigable con los motores de búsqueda.

Cómo Minimizar Archivos CSS

Hay varias herramientas gratuitas que te permiten analizar el rendimiento de tu sitio web, y detectar qué aspectos deberías mejorar para obtener un sitio con respuesta rápida, como GTMetrix o PageSpeed Insights.

Entre las recomendaciones más frecuentes encontramos minimizar archivos CSS y Javascript, para reducir las solicitudes. Por tanto, vamos a ver cómo minimizar estos recursos en WordPress, entre ellos CSS.

Utilizar Plugin de Cache

Varios plugins de cache en WordPress incluyen opciones para minimizar archivos CSS y otros recursos, por ejemplo en el plugin WP Super Cache que te ayuda a servir página estáticas y comprimidas de HTML, lo cual desemboca en menor tiempo de carga.

Utilizar Plugin BWP Minify

Página de ajustes del plugin Better WordPress Minify para Minimizar Archivos CSS

Lo que hace el plugin BWP Minify básicamente es permitirte cominar y minimizar los archivos de CSS y Javascript para servir el contenido en menos tiempo, porque se reducen las peticiones al servidor, combinando varios archivos en uno.

Este plugin usa la librería Minify de PHP, para crear una combinación estandarizada de los archivos combinados, manteniendo la prioridad de carga y las respectivas dependencias de cada archivo.

Más información detallada para desarrolladores sobre el uso del plugin BWP Minify la puedes encontrar en la página oficial de documentación del uso de este plugin (en inglés).

Minimizar Archivos CSS Manualmente

Este método es un poco avanzado, y require de algo de conocimiento técnico de PHP. Te invitamos a leer el artículo de cómo editar archivos en WordPress de  forma correcta si no estás familiarizado con ello.

Tomamos el ejemplo de un plugin famoso, que inserta CSS y Javascript también en tu sitio web, que es Contact Form 7 para crear formularios de comentario. El plugin ofrece una alternativa para cargar CSS sólo cuando es necesario en una página que incluye un formulario, mediante el siguiente código.

if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
    wpcf7_enqueue_scripts();
}

if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
    wpcf7_enqueue_styles();
}

Sólo agregas este código al archivo de functions.php en tu tema actual, preferiblemente un tema hijo, para cargar los archivos CSS y Javascript sólo cuando sea necesario. Esta es una forma de minimizar archivos CSS y Javascript.

Conclusión

Seguramente hay otras prácticas, muchas, que puedes seguir para mejorar el rendimiento general de tu sitio web que usa WordPress, y que son variables según el entorno y el tipo de sitio web, pero minimizar archivos CSS es un aspecto importante que te ayuda a optimizar el rendimiento de tu sitio web, y servir tu contenido de forma rápida.

Si te gusta este artículo, puedes compartirlo y seguirnos en facebook o twitter. También publicamos en google+ contenido fresco sobre optimización y seguridad de WordPress.

1 COMENTARIO

DEJAR COMENTARIO

Favor escribir tu comentario!
Favor ingresar tu nombre aquí