Optimización de sitios web para diseñadores (v. 2016) www.xpert.video
Marlon Ceballos - @adobexpert Adobe Community Professional / Adobe Certified Instructor
pert pert
Learn design & code Learn design & code
www.xpert.video
CERTIFIED INSTRUCTOR Web C E R Design T I F I E DMaster I N S T R/ U C T OMaster R
Design Master / Web Master
CERTIFIED INSTRUCTOR
Design Master / Web Master
www.linkedin.com/in/marlonceballos/
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Learn
Learn
pert
design & code
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Importancia de la velocidad
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
“El tiempo es muy lento para los que esperan, muy rápido para los que temen, muy largo para los que sufren, muy corto para los que gozan; pero para quienes aman, el tiempo es eternidad.” [También atribuida a Henry van Dyke, escritor de cuentos, poeta y ensayista estadounidense (1852-1933)] ― William Shakespeare
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Velocidad • Uno de las principales causas de abandono de un sitio • La percepción del tiempo es subjetiva • Expectativa.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Satisfacción • Satisfacción = percepción - expectativa • Poca velocidad = percepción negativa.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Expectativas • Se pueden controlar con información clara y real • Respeto.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Tasa de abandono • Depende del grado de satisfacción: - 2006: 4 segundos - 2010: 2 segundos - 2016: 1 segundo
• www.webperformancetoday.com/2010/06/15/everything-youwanted-to-know-about-web-performance/.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Importancia de la velocidad • 1 segundo de delay le cuesta a Amazon 1.6 billions/año • 40% de compradores abandonan un sitio después de 3 segundos • 79% de compradores no regresan a un sitio web lento.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Percepción de la velocidad • Instantáneo: ~ 100ms • Pequeña demora: 100ms y 300ms • Definitivamente hay demora ~ 1000ms (1s) "Mental context switch" • Somos conscientes de que hay una demora: > 1s • Altísima probabilidad de que el usuario abandone: > 10 • www.igvita.com/slides/2013/io-pagespeed.pdf.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Posicionamiento • A alguien más le importa la velocidad • www.thinkwithgoogle.com/articles/ the-google-gospel-of-speed-urshoelzle.html.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
La web de hoy • www.httparchive.org • Top 100 web sites.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Transacción HTTP • Búsqueda del dominio • Cliente y servidor se conectan • Negociación segura entre cliente y server
Learn
pert
design & code
• Punto donde inicia la descarga (latencia) • El navegador empieza a mostrar el contenido.
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
14 kb • El limite de cada request es de 14 kb • Cada request sufre los efectos de la latencia.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Herramientas para medir desempeño • www.webpagetest.org • www.webpagetest.org/video/ • http://mobitest.akamai.com • https://developers.google.com/speed/pagespeed/.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Tener en cuenta • Velocidad = satisfacción = conversiones • El diseñador/desarrollador NO es un usuario promedio.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
RWD y velocidad
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Responsive Web Design • Fluid grids • Media Queries • Flexible media.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Responsive Web Design • El mismo archivo HTML • Varios CSS (desktop, tablet y mobile) • Los mismos datos descargados para todos los dispositivos!
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
RWD es bueno o malo? • RWD no es la respuesta a todos los problemas de nuestro sitio web • RWD no es un reemplazo para sitios web móviles • A los usuarios no les importa si el sitio web es responsive, les importa la velocidad de respuesta.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
RWD como objetivo • RWD no es un objetivo, es una técnica o herramienta que podría ayudar a cumplir los objetivos del sitio web • El objetivo del sitio web es ofrecer al usuario la mejor experiencia en cualquier contexto: - Usabilidad - Velocidad - Accesibilidad.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Problemas de RWD • 43% mas de request comparado con un sitio mobile • 129% mas datos transferidos • 87% mas de consumo de procesador • RWD hace por defecto más lento los sitios web.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Expectativa por tener un mรณvil con 4G
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Realidad debido a la latencia
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Batman lo sabe Tengo un servicio móvil de 4G, no me preocupa el peso de los sitios web.
Learn
pert
design & code
www.xpert.video
Sabes qué es LATENCIA??
CERTIFIED INSTRUCTOR
Design Master / Web Master
Problemas de velocidad con móviles • La carga de un sitio web es un móvil generalmente es mas lenta (más aún en sitios responsive) • Dispositivos móviles = datos móviles/wi-fi • Procesador, video, ram en móviles 20-25% menos capacidad.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Diseña para el desempeño Diseña para el usuario móvil pensando en velocidad • Diseña pensando en el peor escenario del usuario (2G/wifi lenta/altas latencias) • Inicia planeando el diseño para móvil (mobile first) • Agrega características pensando el los demás dispositivos (progressive enhancement).
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Técnicas para mejorar la velocidad
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Percepciรณn โ ข Mostrar al usuario informaciรณn clara y real sobre el progreso de cualquier tarea.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Imรกgenes
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Imágenes • Comprimir imágenes individuales: - www.creativebloq.com/design/image-compression-tools-1132865 - www.enviragallery.com/9-best-free-image-optimization-tools-for-imagecompression/
• Sprites: www.csssprites.com • https://developers.google.com/web/fundamentals/performance/ optimizing-content-efficiency/image-optimization.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Minificación de archivos
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Minificación de archivos • www.rankred.com/tools-to-minify-code/ • www.hongkiat.com/blog/javascript-minifying-tools/ • www.cssminifier.com • https://www.elegantthemes.com/blog/tips-tricks/how-to-minifyyour-websites-css-html-javascript • https://developers.google.com/speed/docs/insights/ MinifyResources.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Web Fonts
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Web Fonts • Las fuentes web normalmente pesan mas de 14kb • Usar 1 o 2 fuentes como máximo • Remover caracteres (subset) • Servicios online como Google Fonts o TypeKit tienen mejor desempeño.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
ATF • ATF (Above the fold) • Diferente en cada dispositivo • CSS y JS embebido • 14kb • Aplazar la carga del resto de recursos • Evitar jQuery u otras libs.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Otras técnicas • Conditional loading: www.varvy.com/mobile/conditionaljavascript.html • Ress: www.sitepoint.com/improving-responsive-web-design-ress/ • Ress: www.lukew.com/ff/entry.asp?1392 • www.deviceatlas.com (device server-detection) • Eliminar render "Block" en css: www.varvy.com/pagespeed/renderblocking-css.html.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Otras técnicas • Responsive images: www.responsiveimages.org • Estilos comunes fuera de @media • Organizar la cascada de estilos de pequeño a grande • Recomendaciones de rendimiento por parte de Google: https:// developers.google.com/web/fundamentals/performance/?hl=en.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Testing • Dispositivos reales • Simuladores, emuladores (virtual machine) • Simulator oficial iOS (Xcode): https://developer.apple.com/xcode/ • Emulador Android: www.genymotion.com • Samsung: http://developer.samsung.com/remotetestlab/.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Otros recursos • Charlas de Maximiliano Firtman: - Performance for Responsive Web Design www.youtube.com/watch?v=s4TE9Pi52dY - Extreme Web Performance for Mobile Devices - Part 1/2 www.youtube.com/watch? v=Nz05clbeqgA - Extreme Web Performance for Mobile Devices - Part 2/2 www.youtube.com/watch? v=g2Qjgq_LXws - Web mobile (en español) www.youtube.com/watch?v=iCfdN2WSwIM
• Lean websites (eBook): http://shop.oreilly.com/product/9780992279462.do.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Learn
pert
design & code
Gracias!
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Esta presentaciรณn (y otras)
www.xper.co/presenta
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Recursos
www.delicious.com/marliton
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master