Optimizar el TTFP (Time to First Paint)

Optimizar el TTFP para conseguir más page views, mejores conversiones y la experiencia de nuestros usuarios

TTFP (o Time to First Paint por sus siglas en inglés) es la métrica para medir la rapidez con que el navegador es capaz de generar el render de la página.

Como buenos Front-ends developers, queremos minimizar el tiempo que un usuario pasa mirando una pantalla en blanco mediante la optimización de los assets y el orden en que éstos van cargando.

Al visitar una página, el navegador debe descargar el código HTML de la página antes de obtener el CSS y JavaScript vinculados en ella. Hay un par de cosas que podemos hacer para asegurar que sólo un número mínimo de los assets sean descargados ante de renderizar la página en el navegador. La mayoría de los developers sabe que los JavaScript deben ir en la parte inferior de una página justo antes de la etiqueta </ body>. Lo que es menos conocido es que si su JavaScript no está interactuando con el CSSOM puedes incluir el atributo async para generar una nonblocking request, lo que significa que no va a obstaculizar el TTFP.

<script src="app.js" async></script>

También podemos utilizar el atributo de media en las etiquetas link de CSS para generar nonblocking request.

<link href="print.css" rel="stylesheet" media="print"/>

<link href="desktop.css" rel="stylesheet" media="min-width: 1024px2/>

desktop.css no retrasa el TTFP para dispositivos que no cumplen con los requisitos de la consulta de media query, ya que éste se carga solo cuando se cumpla la condición de media=”min-width: 1024px”.