Embed Size (px)
Citation preview
Optimizar PerformanceOptimizar Performance(sin morir en el intento)(sin morir en el intento)
Diego Cardozo
Sr. Web Performance Engineer @ NetSuite
MotivaciónMotivación3 pilares de la experiencia de usuario
DiseñoUsabilidadPerformance
80% - 90% del tiempo de carga es front endAdemás...
Mejora conversión de usuariosTiempo de carga afecta rankings en Google
DesafíoDesafíoObjetivo inicial: enseñar todo lo necesario para hacersitios 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 Googlesobre optimización (al final)
Agenda / EnfoqueAgenda / Enfoque
1. MedirTener un objetivo claroMedir tempranoMedir seguido
2. OptimizarReducir cantidad de bytesReducir cantidad de recursos críticosAcortar el Critical Rendering Path (CRP)
1. Medir1. Medir
MedirMedirTener un objetivo claro
Twitter - Time to first tweetNetSuite - Performance budgetGoogle - RAIL
100ms 16ms 50ms 1s
MedirMedirMedir temprano
WebPageTestPage Speed Insightssitespeed.io
MedirMedirMedir seguido
Conocer como evoluciona la performanceHerramientas de automatización
Dynatrace / GTMetrixCharla en meetup de testing
2. Optimizar2. Optimizar
OptimizarOptimizarTeoría
El CRP es la secuencia de pasos que sigue el browserpara renderizar una página
1. Parsear HTML y construír el DOM2. Parsear el CSS y construír el CSSOM3. Construír el Render Tree4. Posicionar elementos en la página (Layout)5. Pintar la pantalla
OptimizarOptimizarTeoría
El CRP tiene 3 componentes principales:
1. Total de KB que deben ser descargados2. Cantidad de recursos críticos (HTML, CSS y JS
bloqueantes)3. Cantidad de roundtrips para renderizar recursos
bloqueantes
OptimizarOptimizarEjemplo
Total de KB: 11Recursos críticos: 3Largo del CRP: 2
OptimizarOptimizarReducir cantidad de bytes
Minificar, comprimir y cachearHTMLCSSJavaScript
Quitar estilos no usados
Comprimir imagenesEjemplo: compressor.io
Comprimir y unificar fuentes
unused-css.com
OptimizarOptimizarReducir cantidad de recursos críticos
Concatenar archivos JS y CSSUsar media queries en tags <link> para desbloquearrenderizadoEscribir CSS directamente en el HTML (inline)
Aunque dejar todo inline puede ser perjudicialEscribir JS directamente en el HTML (inline)
Aunque de todas maneras bloquea el renderizadoal ejecutarse si no es async
OptimizarOptimizarAcortar el Critical Rendering Path (CRP)
Retardar la ejecución de JavaScriptAgregar el atributo async a los tags <script> para queno bloqueen el renderizadoOptimizaciones de código
LinksLinks
Testing de performance sin morir en el intentoCurso de Udacity / Google sobre optimización webPost en mi blog con resumen del cursoArtículo sobre como quitar CSS no utilizado
slides.com/diegocard/optimizar-performance
