¿Ha recibido la advertencia “combine archivo CSS externo” en Pingdom, GTmetrix o Google PageSpeed Insights? ¡Usted no es el único! Este es un error común para muchos propietarios de sitios de WordPress. Esta advertencia típicamente aparece cuando tiene 10 o más archivos CSS cargando de una red de entrega de contenidos (CDN) y/o subdominio (dominio externo). Una manera para arreglar esto es concatenar sus archivos CSS o combinarlos para que carguen mediante una única solicitud.
Nota: Si usted administra sus sitios mediante HTTPS con un proveedor que apoya HTTP/2 puede ignorar esta advertencia en general. Mediante HTTP/2 archivos múltiples CSS pueden ser cargados paralelamente sobre una sola conexión.
Si sigue administrando sobre HTTPS y no ha migrado a HTTP/2 todavía puede seguir el tutorial abajo sobre ¿cómo combinar archivos CSS externos? Para repetir concatenación ahora es una tecnología considerada obsoleta generalmente.
Más de 77% de los navegadores soportan HTTP/2 cuando pasan sobre HTTPS, este es el caso de muchos proveedores de CDN y web hosting incluyendo Kinsta. Es importante notar que Pingdom todavía no apoya HTTP/2 ya que utiliza una versión más antigua de Chrome.
Combinar Archivos CSS Externos En WordPress
La advertencia de combinar archivos CSS externos típicamente aparecen cuando está utilizando CDN porque usted está hospedando sus archivos CSS en un dominio externo como cdn.domain.com. Lo que puede hacer es simplemente concatenar sus archivos CSS en su servidor de web. Una vez que sean combinados la advertencia desaparecerá y cargará mediante una única solicitud. Una de las formas más fáciles para hacer esto es el uso de un plugin gratuito de WordPress llamado Autoptimize, desarrollado por Frank Goossens.
El plugin es de poco peso solamente 176KB para ser exactos. al escribir esto el plugin tiene más de 1.000.000 instalaciones activas con una calificación de 4.7 en una escala de 5 estrellas. El plugin ayuda en la concatenación de sus scripts, minificación, expira encabezados y en la habilidad de mover estilos al encabezados y scripts al pie de la página.
Puede descargar del WordPress repositorio o buscarlo en su panel de control WordPress bajo “Añadir Plugins Nuevos”. Una vez que esté instalado vaya a la configuración y habilite la opción “Optimizar Código CSS”. Esta opción va concatenar (combinar) sus archivos CSS y si está utilizando CDN asegúrese de que introduzca el URL de su CDN. De esta forma sus archivos CSS cargarán de una única solicitud en su CDN.
Los clientes de Kinsta tienen acceso directo a la función de minificación de código que está integrada directamente en el panel de control de MyKinsta. Esta función permite a los clientes habilitar la minificación automática de CSS y JavaScript con solo hacer clic en un botón.
Después de habilitar los ajustes de arriba verá los archivos CSS en un archivo “autoptimize_xxxxx.css”.
