Featured image of post Optimizaciones del Critical Rendering PathFeatured image of post Optimizaciones del Critical Rendering Path
Performance

Optimizaciones del Critical Rendering Path

Maximize startup times by preventing layout thrashing and prioritizing render-blocking script locations.

  1. Inicio
  2. Webs
  3. Optimizaciones del Critical Rendering Path

El Critical Rendering Path (CRP) es la secuencia de pasos que el navegador sigue para renderizar la página inicial. Optimizarlo mejora LCP y First Paint.

Bloqueo de renderizado

CSS bloquea el renderizado. JavaScript bloquea el parsing de HTML. Reduce el CSS crítico e inlinealo. Difiere JS no crítico con defer o async.

CSS crítico

Extrae el CSS necesario para el contenido above-the-fold. Inlinealo en <head>. Carga el resto asíncronamente. Herramientas: Critical, Penthouse.

Optimización de fuentes

font-display: swap evita FOIT (Flash of Invisible Text). preload para fuentes críticas. Subset de fuentes para reducir peso.

Orden de recursos

Precarga recursos críticos con <link rel=preload>. Preconecta a orígenes críticos con <link rel=preconnect>. Prioriza la LCP image con fetchpriority=high.

©2022 - 2026 Commentary of Takao