Configurar el CSS crítico
Qué hace el módulo — y qué no hace
Para cada plantilla de página, Kakapo solicita por HTTP una página de ejemplo real de tu sitio (solo en el área de administración o por cron, nunca durante la construcción de la página de un visitante), lee las hojas de estilo locales enlazadas allí directamente del disco y comprueba cada regla individual con DOMXPath contra el documento. De ahí salen dos resultados: el CSS crítico, que se coloca en línea en la cabecera, y la lista de reglas que en esa plantilla no han alcanzado ni un solo elemento.
Durante el proceso no se renderiza nada. No hay navegador, ni viewport, ni posición de desplazamiento. «Visible arriba» es una aproximación según una regla que está a la vista: todos los elementos por debajo de body se numeran, el primer 30 por ciento (valor por defecto, ajustable entre 5 y 90) cuenta como arriba, y además todo lo que esté dentro de los puntos de referencia indicados. Siempre se incluyen html, body, :root y @font-face, así como los @keyframes que una regla crítica nombre mediante animation. Las reglas que solo actúan a través de estados (:hover, :focus, :active) se quedan fuera, y @media print también. Donde el procedimiento llega a su límite, redondea hacia arriba: la regla se considera alcanzada. Unos kilobytes de más cuestan menos que una regla que falte y unos parpadeos.
Comprobar los requisitos antes de analizar
Dos cosas tienen que estar en orden. Primero, la extensión de PHP dom/libxml — el módulo no la comprueba con class_exists(), sino que construye un documento en miniatura y lo consulta de verdad. El motivo: algunos proveedores de alojamiento ponen disable_classes=DOMDocument y entonces class_exists() sigue diciendo «sí», pero el new falla. Si falta la extensión, «Analizar» y «Refrescar a diario» quedan bloqueados y el motivo aparece al lado.
En segundo lugar, el loopback: el sitio tiene que alcanzarse a sí mismo por HTTP. Para eso está el botón «Comprobar loopback» en el apartado Requisitos; guarda el código HTTP, el tamaño de la respuesta y la duración. Si falla, fracasa cualquier ejecución del análisis — las causas típicas son un cortafuegos delante del sitio, una protección Basic-Auth en el entorno de puesta en escena o un nombre de host que no se resuelve internamente.
Lo que el análisis no puede leer tampoco se retrasa: las hojas de estilo de hosts ajenos, de un CDN o de Google Fonts siguen bloqueando el renderizado igual que antes. Es el camino lento, pero seguro.
Ir plantilla por plantilla
Hay siete plantillas: Página de inicio, Página del blog, Entrada individual, Página estática, Archivo, Resultados de búsqueda y Página de error 404. Cada una se analiza y se aprueba por separado. Si tu página de inicio muestra la lista de entradas, «Página del blog» no es aplicable — el interruptor sigue bloqueado porque no tendría ningún efecto. Si no hay ninguna entrada publicada ni ninguna página, falta la página de ejemplo y la plantilla también queda bloqueada.
El camino recomendado: primero «Analizar todas» o analizar de una en una. Después abres para una plantilla «Vista previa» y «sin» en dos pestañas — es la misma página real, una vez con tratamiento y otra sin él, visible solo para los administradores con sesión iniciada y solo con una clave de un solo uso válida en la dirección. Para eso el interruptor principal no tiene que estar encendido. Los parpadeos durante la construcción los ves con más fiabilidad en una pestaña propia con la conexión limitada, no en el marco incrustado.
Solo cuando la comparación se vea limpia apruebas la plantilla y enciendes el interruptor principal. Empieza en modo de prueba: ahí solo ven el tratamiento los administradores con sesión iniciada; para todos los demás la página queda sin cambios. A «activo» lo pasas solo cuando hayas revisado varias plantillas.
Los cuatro frenos y las listas de excepciones
«Cargar con retraso las hojas de estilo analizadas» es el verdadero ahorro de tiempo. Apagado significa: el CSS crítico se añade además en línea y todo lo demás queda como estaba — sin riesgo, pero sin ganancia. Encendido significa: las hojas de estilo evaluadas se cargan con media="print" más un restablecimiento por onload, con un duplicado noscript para los visitantes sin JavaScript. Se retrasa exclusivamente lo que realmente se ha leído, y solo si el handle y la dirección del archivo siguen coincidiendo con lo que se analizó.
«Suspender si cambian los archivos de origen» recuerda, para cada archivo evaluado, la hora de modificación y el tamaño, además del tema activo. Si algo cambia, no se trata nada en lugar de trabajar con un CSS crítico posiblemente equivocado — en el código fuente aparece entonces una nota con el motivo.
Tres campos de texto son la salida de emergencia. URL de exclusión: una línea por ruta, «*» como comodín; esas páginas no se tratan nunca (típicamente /checkout*, /mein-konto*). No retrasar nunca estas hojas de estilo: un handle de WordPress por línea, por defecto admin-bar y dashicons. Puntos de referencia: un selector por línea, todo lo que haya dentro cuenta como arriba — por defecto son header, [role="banner"], .site-header, #masthead, nav, .main-navigation, .site-branding, .hero y h1. Las líneas que no se pueden evaluar se rechazan en lugar de guardarse en silencio.
Un cambio en el porcentaje «arriba» o en los puntos de referencia no surte efecto hasta una nueva ejecución del análisis. Todo lo demás descarta la cache de páginas de inmediato, porque allí hay HTML ya terminado con el estado antiguo.
Cuando algo sale mal
«Presupuesto de tiempo agotado»: la ejecución ha alcanzado los 25 segundos o el límite de tiempo de PHP. El informe está guardado; el CSS crítico, deliberadamente no — un CSS crítico incompleto provocaría parpadeos. El aviso indica el archivo en el que se cortó. Vuelve a analizar o saca alguna hoja de estilo muy grande mediante la lista de excepciones.
«Respondió con HTTP …»: la página de ejemplo no devolvió el código esperado (200; en la página de error, 404). No se guarda nada. Comprueba si la página es accesible en el navegador y si tiene alguna protección delante.
Una plantilla está en «obsoleta»: un archivo CSS evaluado ha cambiado o se ha cambiado de tema. Vuelve a analizar. Si ahí pone «otro porcentaje», la plantilla se creó con un valor porcentual distinto del que está ajustado ahora — también hay que volver a analizarla.
Para que esto no se quede en trabajo manual existe «Comprobar y refrescar a diario». La ejecución por cron solo analiza plantillas que ya están aprobadas y obsoletas; nunca activa nada y no crea ningún análisis para una plantilla no aprobada. Su último resultado aparece como nota en el apartado Cinturón de seguridad.
Si aun así una página sigue inquieta, ayuda mirar el código fuente: ahí hay un comentario con la plantilla tratada y el estado (vista previa, modo de prueba, activo) o el motivo por el que deliberadamente no se ha tratado.