- FCP: first contentful paint
- LCP: largest contentful paint
- CLS: cumulative layout shift
- FID: first input delay
Tecnicas para mejorar la carga de tu pagina
Mejorar el tiempo del FCP
mantiene el usuario y la infraestructura mas cerca mejora el fcp
usar un cdn para garantizar que tenemos una copia cerca del usuario y que tenemos
cacheado, cloudflare, aws cdn
Mejorar el LCP
- optimiza las imagenes
- reduce los llamados al api
- aplazar la carga de cosas que no se necesitan
Carga de scripts:
<script async> el decorador async nos ayuda a cargar las cosas luego, pero hay que
tener cuidaddo porque al async ejecuta las dependencia apenas descarga el recurso.
<script defer> el decorador defer le dice descarguelo pero no lo ejecute hasta
despues del lcp que este todo cargado
Carga de imagenes
Tener carga perezosa
<img loading="lazy"> sin embargo loading no funciona en safari, en este caso se puede
usar alguna libreria para cubrir el caso de safari
Configurar diferentes imagenes para diferentes resoluciones
<img
src="pict-1220.jpg"
srcset="pict-600.jpg 600w, picture-900.jpg 900w"
sizes="(max-width: 600px ) 600px, (max-width:900px) 900px, 120px">
Tener recursos cacheados:
cache-control: max age=600 //seconds
si estamos usando font o usamos @import en nuestros archivos de estilos podemos decirle
al navegador con tiempo que precarge contenidos que vamos a necesitar en el futuro
<link rel="preconnect" href="https://fonts.gstatic.com">
Mejorar el CLS
No cargar mas y mas cosas cuando estamos haciendo scroll hacia abajo,
en su lugar se puede usar un boton cargar mas al final de la pagina, o un paginador
mi resumen de lo aprendido en https://frontendmasters.com/courses/web-perf/
