web performance in a responsive world
TRANSCRIPT
1
JUSTIA
2
Angel Ponce
3
4
6
¿Qué es el Web Performance?
“7
Es el arte de hacer que un sitio web cargue
rápidamente.
8
9
“10
Solo lo notamos cuando es malo.
11
¿A que se debe que unos sitios sean mas rápidos que otros?
13
14
15
16
17
18
20
8MB x $2 = $16
22
WITH GREAT
POWER…
27
DesktopMobile
Archivos Independientes
28
DesktopMobile
Misma Base de Archivos
30
El promedio actual de una pagina es casi 2MB.
Un incremento del 271% desde el 2010.
31
¿A que se debe esto?
32http://bit.ly/1p7XPou
22kB90kB
34kB
25kB
113kB416kB
ImagesScriptsStylesheetsHTMLFlashOther
Noviembre 2010
Total 702kB
33
142kB74kB
59kB57kB
295kB
1,203kB
ImagesScriptsStylesheetsHTMLFlashOther
Octubre 2014
http://bit.ly/1sAqY0n
Total 1899kB
34
300%
35
2 Segundos para que un sitio cargue y sea
navegable.
http://nyti.ms/1ut4yO4
37
WITH GREAT
POWER…
38
COMES GREAT
RESPONSIBILITY…
39
40
41
#1
42
Reducir Numero de Archivos Solicitados al Servidor
43
44
Consolidar Archivos•Imagenes •JavaScript •CSS
46
47
jQuery Plugins•jQuery-UI •jQuery-Carousel •jQuery-Corner •jQuery-Easing •jQuery-json •jQuery-jplayer
•jQuery-lightbox •jQuery-miniPlayer •jQuery-Migrate •jQuery-Mobile •jQuery-Placeholder •jQuery-TouchSwite
48
CSS Files•mi-sitio.css
•cabecera.css •contenido.css •pie-de-página.css •tipografia.css
•mi-sitio.css
49
#2
50
CSS3Drop
Shadows
Text Shadows
Border Radius
Image Filters
Multiple Backgrounds
Gradients
51
55
#3
56
IMAGENES•GIF •JPG •PNG24 & PNG8 •WebP
58
#4
59
Minificación
60
61
62
#5
63
Planeación
64
Presupuesto de Desempeño
65
66
67
68
69
70
