KakapoWP KakapoWP
Entrar Probar gratis
Kakapo Performance

CSS crítico

Lo que necesita la parte superior de la página va en el head. El resto llega después.

Por cada plantilla, el kakapo trae una página de ejemplo real de tu sitio web, lee desde el disco las hojas de estilo locales enlazadas allí y comprueba cada regla contra el documento. Lo que hace falta arriba pasa inline a la cabecera; las hojas de estilo evaluadas cargan después, sin bloquear la construcción. Aquí no interviene ningún navegador: «visible arriba» es una aproximación declarada a partir del orden de los elementos y, en caso de duda, incluye la regla. Por eso hay vista previa, modo de prueba y un interruptor por plantilla.

Prueba gratis durante 24 horasTodas las funciones de Performance

CSS crítico

7 plantillas · cada plantilla con su propia ejecución, su interruptor y su vista previa

Modo de pruebaVista previa

Esto ofrece el CSS crítico

7 plantillas, cada una analizada y aprobada por separado
CSS crítico inline en el head, las hojas de estilo analizadas con carga diferida
Informe: reglas que no coincidieron con ningún elemento
Vista previa de la misma página con y sin tratamiento
Modo de prueba: solo los administradores con sesión iniciada ven el cambio
Lista de exclusión para URLs, lista de excepciones para hojas de estilo

Así es como funciona

1

Analizar la plantilla — obtener una página de ejemplo, comprobar las reglas

2

Comparar la vista previa con y sin tratamiento

3

Aprobar la plantilla y luego pasar de modo de prueba a activo

Preguntas frecuentes sobre CSS crítico

¿Se mide lo que realmente se ve en la parte superior?
No. No hay navegador ni viewport. Todos los elementos por debajo de body se numeran; como «arriba» cuenta el primer 30 % (ajustable entre 5 y 90) más todo lo que esté dentro de los puntos de referencia registrados: cabecera, navegación, primer h1 y lo que tú añadas. Donde el procedimiento llega a un límite, la regla se da por acertada: unos kilobytes de más son más inofensivos que una regla que falta.
¿Puedo hacer que se eliminen desde aquí las reglas no utilizadas?
La lista es un informe, no una herramienta. El recuento se hace contra una página de ejemplo por plantilla: las clases que JavaScript solo aplica al hacer clic, o un formulario de otra página, no aparecen ahí. Conviene borrar en el código fuente del tema, donde queda rastreable.
¿Qué necesita el análisis y qué ocurre después?
La extensión de PHP dom/libxml y un loopback que funcione: el sitio web debe alcanzarse a sí mismo por HTTP. Si falta una de las dos cosas, el análisis ni siquiera se puede iniciar; el motivo aparece allí mismo. Si más tarde cambia un archivo CSS evaluado o el tema, el tratamiento se suspende en lugar de entregar un CSS crítico posiblemente erróneo.

Más funciones de rendimiento

Assets & scripts →Minify →Preload & DNS →
¿Listo?

Prueba Performance gratis durante 24 horas.

Sin tarjeta de crédito, sin riesgos. Listo en 2 minutos.

Pruébalo ahora gratis