Optimizar Performance

(sin morir en el intento)

Diego Cardozo

Sr. Web Performance Engineer @ NetSuite

Motivación

• 3 pilares de la experiencia de usuario
  • Diseño
  • Usabilidad
  • Performance
• 80% - 90% del tiempo de carga es front end
• Además...
  • Mejora conversión de usuarios
  • Tiempo de carga afecta rankings en Google

Desafío

• Objetivo inicial: enseñar todo lo necesario para hacer sitios web rápidos
  • ¿Charla de 12 horas?
  • Muy complejo (aburrido)
  • Grupo muy diverso para una charla tan técnica
• Nuevo objetivo 
  • Entrar de lleno en el mundo de la performance web 
  • Ver las técnicas más importantes de optimización
• Y si tuve éxito...
  • Motivar para que hagan el curso gratuito de Google sobre optimización (al final)

Agenda / Enfoque

1. Medir
   • Tener un objetivo claro
   • Medir temprano
   • Medir seguido
2. Optimizar
   • Reducir cantidad de bytes
   • Reducir cantidad de recursos críticos
   • Acortar el Critical Rendering Path (CRP)

Medir

Tener un objetivo claro

• Twitter - Time to first tweet
• NetSuite - Performance budget
• Google - RAIL

Medir

Medir temprano

• WebPageTest
• Page Speed Insights
• sitespeed.io

Medir

Medir seguido

• Conocer como evoluciona la performance
• Herramientas de automatización
  • Dynatrace / GTMetrix
• Charla en meetup de testing

Optimizar

Teoría

El CRP es la secuencia de pasos que sigue el browser para renderizar una página

1. Parsear HTML y construír el DOM
2. Parsear el CSS y construír el CSSOM
3. Construír el Render Tree
4. Posicionar elementos en la página (Layout)
5. Pintar la pantalla

Optimizar

Teoría

El CRP tiene 3 componentes principales:

1. Total de KB que deben ser descargados

2. Cantidad de recursos críticos (HTML, CSS y JS bloqueantes)

3. Cantidad de roundtrips para renderizar recursos bloqueantes

Optimizar

Ejemplo

Optimizar

Reducir cantidad de bytes

• Minificar, comprimir y cachear

  • HTML

  • CSS

  • JavaScript

• Quitar estilos no usados

  • unused-css.com

• Comprimir imagenes

  • Ejemplo: compressor.io

• Comprimir y unificar fuentes

Optimizar

Reducir cantidad de recursos críticos

• Concatenar archivos JS y CSS

• Usar media queries en tags <link> para desbloquear renderizado

• Escribir CSS directamente en el HTML (inline)

  • Aunque dejar todo inline puede ser perjudicial

• Escribir JS directamente en el HTML (inline)

  • Aunque de todas maneras bloquea el renderizado al ejecutarse si no es async

Optimizar

Acortar el Critical Rendering Path (CRP)

• Retardar la ejecución de JavaScript

• Agregar el atributo async a los tags <script> para que no bloqueen el renderizado

• Optimizaciones de código