Presentación de la conferencia "Optimización del rendimiento web" impartida en la TLP2k12, en la jornada de desarrolladores (Tenerife LAN Party 2012). Resumen y explicación, aquí: http://www.emezeta.com/articulos/conferencia-optimizar-el-rendimiento-web

2. José Román Hernández - Manz
www.emezeta.com

3. OBJETIVOS PRINCIPALES

4. Buena respuesta (página instantánea, sin retrasos)

5. Servidor debe responder rápido (no esté ocupado)

6. Reducir transferencias de datos (ahorra tiempo y dinero)

7. Conseguir un buen posicionamiento en buscadores

9. Sin embargo, la realidad suele ser diferente.

10. CONCEPTOS

11. Esquema básico
www.emezeta.com
Web (HTML)
Cliente
- Generalmente, usuarios mediante navegadores

12. Crawlers Esquema básico
www.emezeta.com
Karmacracy GoogleBot BingBot TwitterBot
Web (HTML)
Cliente

13. Crawlers Esquema básico
www.emezeta.com
Karmacracy GoogleBot BingBot TwitterBot
Elementos dañinos
Web (HTML)
Spammers Atacantes Harvester Piratas
Cliente

14. Crawlers Esquema básico
www.emezeta.com
Karmacracy GoogleBot BingBot TwitterBot
Elementos dañinos
Web (HTML)
Spammers Atacantes Harvester Piratas
Cliente
Navegadores
Chrome Firefox Safari Opera

15. Esquema básico
www.emezeta.com
Web (HTML)
Cliente
- Crawlers (robots o sistemas automatizados)
- Sistemas dañinos (malware, zombies, atacantes...)
- Generalmente, navegadores (Chrome, Firefox, Safari...)

16. Esquema básico
www.emezeta.com
Web (HTML)
Cliente
- Crawlers (robots o sistemas automatizados)
- Sistemas dañinos (malware, zombies, atacantes...)
- Generalmente, navegadores (Chrome, Firefox, Safari...)

17. Esquema básico
www.emezeta.com
Web (HTML)
Cliente
- Crawlers (robots o sistemas automatizados)
- Sistemas dañinos (malware, zombies, atacantes...)
- Generalmente, navegadores (Chrome, Firefox, Safari...)

18. Esquema básico
www.emezeta.com
Web (HTML)
Cliente
- Crawlers (robots o sistemas automatizados)
evolutionoftheweb.com
- Sistemas dañinos (malware, zombies, atacantes...)
- Generalmente, navegadores (Chrome, Firefox, Safari...)

19. ESQUEMA CLIENTE-SERVIDOR

20. Esquema básico
www.emezeta.com
Web (HTML)
Servidor
- Máquina donde se aloja nuestra web
- Puede ser una, o toda una red de máquinas
- Escoger entre varios tipos de servidores

21. Tipo de servidor
SO
Hosting gratuito
- Ideal para enfocarse: escribir o publicar
- Coste 0: Sin gastos de mantenimiento
- Limitaciones o restricciones concretas
- Suelen mostrar publicidad

22. Tipo de servidor
SO
Servidor Compartido
- Muy barato
- Overselling: Ofrecen más de lo que pueden
- Tus “vecinos” repercuten en tu sitio

23. Tipo de servidor
SO
Servidor VPS (Virtual-Dedicado)
- Estabilidad y rendimiento
- Acceso completo al sistema (incl. root)
- Más caros que los servidores compartidos

24. Tipo de servidor
SO
Servidor Dedicado
- Máquina íntegra para nosotros
- No tenemos “vecinos”
- Suelen ser bastante caros

25. Tipo de servidor
SO
Servidor Dinámico (o elástico)
- Depende del uso (se adapta según necesidades)
- Ideal para sitios con mucho tráfico
- Administración y mantenimiento complejo

26. Esquema básico
www.emezeta.com
Web (HTML)
Solicitud o petición
- El cliente pide una web al servidor

27. Esquema básico
www.emezeta.com
Web (HTML)
Respuesta
- El servidor devuelve la página pedida al cliente

28. Esquema avanzado
www.emezeta.com??
IP 42.42.42.42
dns connect sslsend wait receive
DNS
- Se necesita conocer la IP del servidor
- Una vez la conocemos, realizamos solicitud
- Se suele tardar entre 20-120ms

29. Esquema avanzado
Puedo pasar?
Ok, pasa.
dns connect sslsend wait receive
Conexión
- Se realiza y establece una conexión al servidor
- Se envía confirmación de conexión correcta
- Si se usa SSL (HTTPS) se negocia comunicación segura

30. Esquema avanzado
Quiero index.html
Ok, lo tengo
dns connect sslsend wait receive
Envío
- Se envía la petición del recurso al servidor
- Se envía confirmación de que existe (o no)

31. Esquema avanzado
Espera mientras
preparo tu pedido
dns connect sslsend wait receive
Espera
- El servidor procesa los datos
- O espera si está ocupado con otra petición
- La red no tiene efecto en este paso

32. Esquema avanzado
Toma index.html
dns connect sslsend wait receive
Recepción
- El servidor envía los datos al cliente
- Se envía la cabecera y datos solicitados

33. Esquema avanzado
dns connect sslsend wait receive
Dependen de la red
- Conexión y ancho de banda del cliente
- Conexión y ancho de banda del servidor
- Recepción además depende del tamaño del archivo

34. Esquema avanzado
Una web = varios recursos
- Este proceso ocurre en cada recurso del sitio web
- Imágenes, html, css, javascript, flash, etc...
- Suma total: tiempo considerable

35. Análisis de recursos
getfirebug.com
- Extensión para Firefox (versión Lite para Chrome)
- Permite, entre otras cosas, analizar descarga de recursos

36. Análisis de recursos
tools.pingdom.com/fpt
- Modalidad de análisis desde web externa
- Ideal si nuestra conexión es lenta

37. Análisis de recursos
developers.google.com/speed/pagespeed/insights
- Consejos ordenados por prioridades

38. Análisis de recursos
tools.pingdom.com/fpt
www.webpagetest.org

39. TECNOLOGÍAS

40. Tecnologías
Contenido
- Información, datos, contenido.
- Bases de datos: MySQL, MariaDB, SQLite, MongoDB...
- Datos: Archivos XML, JSON...

41. Tecnologías
Motor
- Tecnología que “crea” el sitio
- Lenguajes: PHP, JSP, Python, Perl...
- Frameworks: Django, Ruby on rails, CakePHP...

42. Tecnologías
Presentación (Estructura)
- Estructura del sitio
- Lenguaje de etiquetado: HTML4, XHTML, HTML5...
- Un código válido ayuda en la compatibilidad

43. Tecnologías
Presentación (Estructura)
validator.w3.org

44. Tecnologías
Presentación (Apariencia)
- Diseño, alineación y estilos
- Recursos de estilo: CSS, tipografías, imágenes...

45. Tecnologías
Presentación (Interactividad)
- Interacción con el usuario (Javascript)
- Procedimientos desde el lado del cliente
- Frameworks Javascript: JQuery, Prototype...

46. Peticiones
Peticiones
- La petición de una URL, pasa por cada sección
- GET: Pedimos una URL específica
- POST: Enviamos datos (comentarios, formularios...)

47. Peticiones
Peticiones asíncronas (AJAX)
- Una petición específica de una parte de un artículo
- No pasa por cada sección (ahorra tiempo y recursos)

48. ESTRUCTURA

49. Las cosas cambian

50. Recurso servido
Cabecera de servidor
Archivo HTML
Cabecera de servidor
- Información relacionada con el servidor
- Código de error HTTP (famosos 404, 301, 200...)
- Software de servidor web

51. Recurso servido
Cabecera de servidor
<head> del HTML
Archivo HTML
<head>
- Título del documento
- Codificación del documento
- Enlace a archivos externos (CSS, JS...)

52. Recurso servido
Cabecera de servidor
<head> del HTML
<body> del HTML
Archivo HTML
<body>
- Cuerpo de la página (parte visible)

53. CONSEJOS

54. Velocidad visual
1seg 5seg 10seg
- Evitar sensación de espera (latencia de carga)

55. Velocidad visual
1seg 5seg 10seg
- Colocar estilos CSS al principio (bajo <head>)
- Colocar posibles JS al final (sobre </body>)
- Eliminar JS duplicados y combinar si es posible
loads.in

56. Velocidad visual
Jquery.js Jquery.min.js
246KB 93KB
1seg 5seg
Compactar JS o CSS: 10seg
Ayuda a minimizar el ancho de banda
- Eliminar espacios,CSS al principio (bajo <head>)
- Colocar estilos líneas en blanco, comentarios...
- Colocar posibles JS al final (sobre </body>)
www.refresh-sf.com/yui/
- Eliminar JS duplicados y combinar si es posible

57. SISTEMA DE CACHÉ

58. Sistema de caché
PRIMER ACCESO
HTML LOGO CSS JS FONDO IMG1 IMG2
Reduce:
- Ancho de banda
- Carga del servidor
- Tiempo

59. Sistema de caché
SEGUNDO ACCESO
CACHE DEL NAVEGADOR
LOGO CSS JS FONDO IMG1 IMG2
HTML
Cache del navegador:
- Archivos con “tiempo de caducidad”

60. Caché por niveles
A nivel de cliente
- Expire
- Cache-control
- E-Tags

61. Caché por niveles
A nivel de servidor
- HTML estático
- APC: Alternative PHP Cache
- Memcached: Caché en RAM

62. COMPRESIÓN

63. Compresión al vuelo
www.emezeta.com
50KB
mod_deflate
- El servidor comprime los datos (antes de enviarlos)

64. Compresión al vuelo
www.emezeta.com
Compressed HTML
9KB 50KB
mod_deflate
- El servidor comprime los datos (antes de enviarlos)
- Los datos viajan por la red (comprimidos)

65. Compresión al vuelo
www.emezeta.com
Compressed HTML
50KB 9KB 50KB
mod_deflate
- El servidor comprime los datos (antes de enviarlos)
- Los datos viajan por la red (comprimidos)
- El cliente descomprime los datos y los usa

66. Compresión al vuelo
www.emezeta.com
200
95KB hits 19MB
Compressed HTML
50KB 9KB 50KB
mod_deflate
- El servidor comprime los datos (antes de enviarlos)
- Los datos viajan por la red (comprimidos)
- El cliente descomprime los datos y los usa

67. Compresión al vuelo
www.emezeta.com
200
95KB hits 19MB
Compressed HTML
50KB 9KB 50KB
mod_deflate
- El servidor comprime los datos (antes de enviarlos)
200
23KB 4,6MB
- Los datos viajan por la red (comprimidos)
hits
- El cliente descomprime los datos y los usa

68. Compresión al vuelo
www.emezeta.com
200
95KB hits 19MB
Compressed HTML
50KB 9KB 50KB
mod_deflate
HTML JS CSS
- El servidor comprime los datos (antes de enviarlos)
200
23KB 4,6MB
- Los datos viajan por la red (comprimidos)
hits
- El cliente descomprime los datos y los usa
JPG PNG MP3

69. IMÁGENES

70. Imágenes
IMÁGENES IMÁGENES
ANIMACIONES VECTORIALES
CON PÉRDIDAS SIN PÉRDIDAS
Imágenes con pérdidas
- Imágenes con texturas
- Fotografías con alto nivel de detalle

71. Imágenes
IMÁGENES IMÁGENES
ANIMACIONES VECTORIALES
CON PÉRDIDAS SIN PÉRDIDAS
Imágenes con pérdidas
- Imágenes con texturas
- Fotografías con alto nivel de detalle

72. Imágenes
IMÁGENES IMÁGENES
ANIMACIONES VECTORIALES
CON PÉRDIDAS SIN PÉRDIDAS
Imágenes con pérdidas
- Imágenes con texturas
- Fotografías con alto nivel de detalle

73. Imágenes
IMÁGENES IMÁGENES
ANIMACIONES VECTORIALES
CON PÉRDIDAS SIN PÉRDIDAS
Imágenes sin pérdidas
- Dibujos “lisos”
- Bocetos, pocos colores

74. Imágenes
IMÁGENES IMÁGENES
ANIMACIONES VECTORIALES
CON PÉRDIDAS SIN PÉRDIDAS
Imágenes sin pérdidas
- Dibujos “lisos”
- Bocetos, pocos colores

75. Imágenes
IMÁGENES IMÁGENES
ANIMACIONES VECTORIALES
CON PÉRDIDAS SIN PÉRDIDAS
Animaciones
- Imágenes en movimiento

76. Imágenes
IMÁGENES IMÁGENES
ANIMACIONES VECTORIALES
CON PÉRDIDAS SIN PÉRDIDAS
Animaciones
- Imágenes en movimiento

77. Imágenes
IMÁGENES IMÁGENES
ANIMACIONES VECTORIALES
CON PÉRDIDAS SIN PÉRDIDAS
Imágenes vectoriales
- Imágenes escalables (útil para variar tamaño)

78. Imágenes
IMÁGENES IMÁGENES
ANIMACIONES VECTORIALES
CON PÉRDIDAS SIN PÉRDIDAS
Imágenes vectoriales
- Imágenes escalables (útil para variar tamaño)
Formato SVG

79. Imágenes
IMÁGENES IMÁGENES
ANIMACIONES VECTORIALES
CON PÉRDIDAS SIN PÉRDIDAS
Imágenes vectoriales
- Imágenes escalables (útil para variar tamaño)
luci.criosweb.ro/riot/

80. Imágenes
Lazy Load (carga perezosa)
81KB
Imágenes con peso
considerable
82KB
4,17MB
73KB
108KB

81. Imágenes
Lazy Load (carga perezosa)
2KB
Imágenes con peso
considerable
- Sólo se transfiere
imagen de carga
2KB
-
-

82. Imágenes
Lazy Load (carga perezosa)
81KB
Imágenes con peso
considerable
82KB Sólo se transfiere
imagen de carga
165KB
A medida que
- desplaza el usuario
se cargan las
imágenes
-

83. Imágenes
Lazy Load (carga perezosa)
81KB
Imágenes con peso
considerable
82KB Sólo se transfiere
imagen de carga
238KB
A medida que
73KB desplaza el usuario
se cargan las
imágenes
-

84. Imágenes
Lazy Load (carga perezosa)
81KB
Imágenes con peso
considerable
82KB Sólo se transfiere
imagen de carga
346KB
A medida que
73KB desplaza el usuario
se cargan las
imágenes
108KB Ahorra tiempo y
transferencia

85. Imágenes
Lazy Load (carga perezosa)
81KB
Imágenes con peso
considerable
82KB Sólo se transfiere
imagen de carga
346KB
A medida que
73KB desplaza el usuario
se cargan las
imágenes
www.appelsiini.net/projects/lazyload
108KB

86. REDUCCIÓN DE PETICIONES

87. CSS Sprites
CSS sprites
Unir todas las imágenes en una sola
Ahorra número considerable de peticiones

88. Imágenes en línea (Data URL)
data:image/png;base64,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
glkwAAAAAElFTkSuQmCC

89. Imágenes en línea (Data URL)
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAMFBMVEUAAAAOCAclJSVJY3hjnMaceS
h1dn6rm4P4yy5jnMbExcf/0TL////+/v4ODg4PDw885HYiAAAGxklEQVR42u2b2XLjOAxFR4UCwFwH//
+7I5JSwzYkgSwvPQ9zq9u9yBGOsJup/PP7l/UfBgBURRX4PoBV88Jcyq0UZoF9FQCqCuVy+yNmfBFA1X5BfHsQC2ooDPZxAOj6Iu
X2pMLMok32WYB6f+XbgbiZNgg+CWCrA3Bsf7drYh8EAOnZ8+/vEOjnACBiJw6wP28xtU8BmBig5RDg16X4FAB0ZThyQCnsFdjTU
AUfAEDNgoMaFIUqNvNcG1N7fT9AqwF+IiiCXiA1/dGusrCqyhsBvAhDChQx57NOx6yr2N5eBYrYBRl+GdtV1kEAKKYATKDPDtC7y7
TZ7wCSAoAL61wnFIoOcMm9/ezW21BhzE1D4XIBUFpRaBMjB+h3UMU4AI4ADH5DZh1xgAMzl8I2DGB8kANYrF9z+0opwD7X2P
2YA8Rh2OCtV0Fx+4yBkWAdgG9s4wD2VIhFHM39L4AmBagwpdIJkhxIXCA4sC/XDtAaeFpf/BnGACJBT3uo8K14/ilGfO/bRAIQKyF
Mw5bP7n7kLWjlvfOirkIC4MLhUGbeH18x0IQfp1pZxZoAuEy5R8/v0gPAAgj9jsgozrUEIDqBufDOwNweX5ZlcC3VONcGAFxg7nm0
A6gyDMuy8BCAhVxOciDIUJ//LgIMWarGdiHwUylh/uM5tHmB9xSwpYl12gHsYZvwgKoKeQowLZtooAyUQ/pNAwjafO4uKMzLLm
bWqQAwZgF8Addb80G5A+AKAMV4AshoJ4xBMK0trf7aAbhJKkSfknkvHR5GUbBtptdJTDtADwKrimKkl7NNAcR+0IPA7AC1FFgE1
Ue5fX3tlMwA5V4HDsDKC0x7ovT3KE4GCVsGkGsjoA7AC6sqoZ1nmFTjCjQUKJe42c8AGE4JCivvRaDaXluhisJ63aqbdzFmAExYcL
bhFl5FzNW6EN8KrZaFEAZgcMA4QK06Oa/s/eFVrDqbFUIWyj9xQAZw41MXdCeQoO1kBtG2fQaCUAJDAH6HUxf4jgu/b8VwzABg
cwDGZ16zfSj2hNPHnu2YSQDSKtDieROveIYqHnu2YyYZmJ2UUjnzG0ph3NkMg8tTxdcQmzwf4FJOHQdSu7cYR2fHDAEYAoCIYq
OPZ/TR6XEGWCcAT9h3AOFS7da53+c/iwUAizGPhOBQgQmAY/PW7E6+Wi1mfSQwDvbHAbi9xAK2Nm72lg9xlBAFP+plGTol8+xj
Lh2gjZ3iABABYNYw2u+rNVaFmd1+DuBfyi0GlaRngfvbTUIJA/uDMOv0OSH65tcT8dYn3R560VBu14LMAfgJkKfQKulrRvWqW0W
vjxwBkwDxw+S2ALTm5FZ9DqUEowDugnMx5r9hoDp7Wn5JMOkCf6M15QC+T+cusFECgYpQlShs5Kz4FKHIPACUiH42VQicA+RR
Reducir número de peticiones
YEwmAaRbd1WE9LC6jADYkPmfKCLkO+GJioZd5ELanz6KNFvJTglkvArMHz+IJPloJpwUYp4C8MfPCBwgJ2AkDsjsexQCQB4FBzCxz
P5PIkIEyBqSA2Qt3igHkNGj2ghg6Yjx/EtcEADiEWEEQGpf3X7iggAQEITv/VDY3H6SAKnIxk5KG0SXqEDTFmhuP4mBAyQyNAlAA2u
WjgJoAEjUF+LfPACDkhmA8Rkg3wHIHZCLbB4gH8PycQBkDvgwAHDN90EAUxFFsmfTia13JKFQVxKBjwFgoY5g8xEgekMjAjUJIXH
Útil sólo para iconos pequeños
ApwC0Wm8IyQ4eRccAmAWQjcCGzLtIKJmGowCV4DgG5uaDSHCSg7M5ILL5ILEenlSPLpNOAhjJqqc0NEDr/12PfYpZEFeyXNJEVV
ilqv1f6dqhdJSIZLMAIEfoGlx7ZPvrqpACASCLgRMMr13eHajp4nNBXgeOsNCw/Xtcd5/NAbgLnCE1T9i/iigu5VMAngWuNP3E9i+Kv
IQEIAlC7gQShNwNNTC/kMgjwbKcdn9Et1FXvepdaBLAnKDd66ggqApnmdMFSwBSgs1ue56gRw/LgZIjmmwsezz9z8fmJE+LhDyK
AsCMTO/LeuAMiJY3A4h3tqFjMAjNhyDf+64aMuGqfIXeALAZPwOwqw4mpC8BoFVfkgLXAHgNwD2fR6DL3gvg9ocAYi8ge60K6Cc
BkOshQvLiD7vJz0wEYhIQXgRQSj/1Bj0A2IsAGDgGjtCxCB1gVpLuYVcxILwMgPQkPio6YB7AJcMOiC4gewMAKMuAKKEYgBxg/iyM
7GqVIbf/GoDRVAB8lcFvAvBiEEivuZNv3b5MQPrFnzsGUWL/YwC+aQX73wOITvAE+wqAH850ufnvALgAXQV74Rb///T9v/derFX9
glkwAAAAAElFTkSuQmCC

90. Imágenes en línea (Data URL)
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAMFBMVEUAAAAOCAclJSVJY3hjnMaceS
h1dn6rm4P4yy5jnMbExcf/0TL////+/v4ODg4PDw885HYiAAAGxklEQVR42u2b2XLjOAxFR4UCwFwH//
+7I5JSwzYkgSwvPQ9zq9u9yBGOsJup/PP7l/UfBgBURRX4PoBV88Jcyq0UZoF9FQCqCuVy+yNmfBFA1X5BfHsQC2ooDPZxAOj6Iu
X2pMLMok32WYB6f+XbgbiZNgg+CWCrA3Bsf7drYh8EAOnZ8+/vEOjnACBiJw6wP28xtU8BmBig5RDg16X4FAB0ZThyQCnsFdjTU
AUfAEDNgoMaFIUqNvNcG1N7fT9AqwF+IiiCXiA1/dGusrCqyhsBvAhDChQx57NOx6yr2N5eBYrYBRl+GdtV1kEAKKYATKDPDtC7y7
TZ7wCSAoAL61wnFIoOcMm9/ezW21BhzE1D4XIBUFpRaBMjB+h3UMU4AI4ADH5DZh1xgAMzl8I2DGB8kANYrF9z+0opwD7X2P
2YA8Rh2OCtV0Fx+4yBkWAdgG9s4wD2VIhFHM39L4AmBagwpdIJkhxIXCA4sC/XDtAaeFpf/BnGACJBT3uo8K14/ilGfO/bRAIQKyF
Mw5bP7n7kLWjlvfOirkIC4MLhUGbeH18x0IQfp1pZxZoAuEy5R8/v0gPAAgj9jsgozrUEIDqBufDOwNweX5ZlcC3VONcGAFxg7nm0
A6gyDMuy8BCAhVxOciDIUJ//LgIMWarGdiHwUylh/uM5tHmB9xSwpYl12gHsYZvwgKoKeQowLZtooAyUQ/pNAwjafO4uKMzLLm
bWqQAwZgF8Addb80G5A+AKAMV4AshoJ4xBMK0trf7aAbhJKkSfknkvHR5GUbBtptdJTDtADwKrimKkl7NNAcR+0IPA7AC1FFgE1
Ue5fX3tlMwA5V4HDsDKC0x7ovT3KE4GCVsGkGsjoA7AC6sqoZ1nmFTjCjQUKJe42c8AGE4JCivvRaDaXluhisJ63aqbdzFmAExYcL
bhFl5FzNW6EN8KrZaFEAZgcMA4QK06Oa/s/eFVrDqbFUIWyj9xQAZw41MXdCeQoO1kBtG2fQaCUAJDAH6HUxf4jgu/b8VwzABg
cwDGZ16zfSj2hNPHnu2YSQDSKtDieROveIYqHnu2YyYZmJ2UUjnzG0ph3NkMg8tTxdcQmzwf4FJOHQdSu7cYR2fHDAEYAoCIYq
OPZ/TR6XEGWCcAT9h3AOFS7da53+c/iwUAizGPhOBQgQmAY/PW7E6+Wi1mfSQwDvbHAbi9xAK2Nm72lg9xlBAFP+plGTol8+xj
Lh2gjZ3iABABYNYw2u+rNVaFmd1+DuBfyi0GlaRngfvbTUIJA/uDMOv0OSH65tcT8dYn3R560VBu14LMAfgJkKfQKulrRvWqW0W
vjxwBkwDxw+S2ALTm5FZ9DqUEowDugnMx5r9hoDp7Wn5JMOkCf6M15QC+T+cusFECgYpQlShs5Kz4FKHIPACUiH42VQicA+RR
Reducir número de peticiones
YEwmAaRbd1WE9LC6jADYkPmfKCLkO+GJioZd5ELanz6KNFvJTglkvArMHz+IJPloJpwUYp4C8MfPCBwgJ2AkDsjsexQCQB4FBzCxz
P5PIkIEyBqSA2Qt3igHkNGj2ghg6Yjx/EtcEADiEWEEQGpf3X7iggAQEITv/VDY3H6SAKnIxk5KG0SXqEDTFmhuP4mBAyQyNAlAA2u
WjgJoAEjUF+LfPACDkhmA8Rkg3wHIHZCLbB4gH8PycQBkDvgwAHDN90EAUxFFsmfTia13JKFQVxKBjwFgoY5g8xEgekMjAjUJIXH
Útil sólo para iconos pequeños
ApwC0Wm8IyQ4eRccAmAWQjcCGzLtIKJmGowCV4DgG5uaDSHCSg7M5ILL5ILEenlSPLpNOAhjJqqc0NEDr/12PfYpZEFeyXNJEVV
ilqv1f6dqhdJSIZLMAIEfoGlx7ZPvrqpACASCLgRMMr13eHajp4nNBXgeOsNCw/Xtcd5/NAbgLnCE1T9i/iigu5VMAngWuNP3E9i+Kv
IE8, como máximo 32KB
IQEIAlC7gQShNwNNTC/kMgjwbKcdn9Et1FXvepdaBLAnKDd66ggqApnmdMFSwBSgs1ue56gRw/LgZIjmmwsezz9z8fmJE+LhDyK
AsCMTO/LeuAMiJY3A4h3tqFjMAjNhyDf+64aMuGqfIXeALAZPwOwqw4mpC8BoFVfkgLXAHgNwD2fR6DL3gvg9ocAYi8ge60K6Cc
BkOshQvLiD7vJz0wEYhIQXgRQSj/1Bj0A2IsAGDgGjtCxCB1gVpLuYVcxILwMgPQkPio6YB7AJcMOiC4gewMAKMuAKKEYgBxg/iyM
7GqVIbf/GoDRVAB8lcFvAvBiEEivuZNv3b5MQPrFnzsGUWL/YwC+aQX73wOITvAE+wqAH850ufnvALgAXQV74Rb///T9v/derFX9
glkwAAAAAElFTkSuQmCC

91. favicon.ico
Icono de 16x16 pixels que representa la web
- Recibe muchísimas peticiones. Ej: +50.000 al mes
- Optimizar al máximo y hacerlo “cacheable”
favicon.ico 3KB x50.000 = 150MB/MES
favicon.ico 0,66KB x50.000 = 33MB/MES

92. https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
http://fonts.googleapis.com/css?family=Belgrano
Frameworks y fuentes comunes desde una misma URL
Diferentes sitios usan misma URL (ya cacheada en cliente)
www.google.com/webfonts
developers.google.com/speed/libraries/devguide

93. AUMENTAR RENDIMIENTO

94. Contenido estático
www.emezeta.com static.emezeta.com
Separar en subdominios
- Descargas paralelas (limitado a 2 en HTTP 1.1)

95. Contenido estático
www.emezeta.com static.emezeta.com
Separar en subdominios
- Descargas paralelas (limitado a 2 en HTTP 1.1)
- Contenido estático sin cookies (tráfico inútil)

96. Contenido estático
www.emezeta.com static.emezeta.com
Balancear con otro servidor
- Amazon S3: Alojamiento “mayorista”
- 0,1€ cada TB/mes (y reduciendo)
- 0,008€ cada 10.000 peticiones/mes (y reduciendo)

97. 1995 2004
Muy potente y Buen rendimiento
extendido y ligero
Consume mucha No compatible con
memoria algunas funciones

98. Nginx como proxy inverso
Aligerar carga del servidor
- Nginx recibe todas las peticiones
- Si se trata de contenido estático, lo sirve Nginx
- Si se trata de contenido dinámico, lo sirve Apache

99. Nginx como proxy inverso
Aligerar carga del servidor
Servidores todas las peticiones
- Nginx recibe a nivel mundial
- Si se trata de contenido estático, lo sirve Nginx
- Si se trata de contenido dinámico, lo sirve Apache

100. www.google.com/webmasters/tools

101. Añadir sitios

102. Proceso de verificación
1. Usando Google Analytics
2. Usando un archivo html
3. Etiqueta meta en <head>
4. Proveedor DNS

103. Configuración
Se puede orientar una web a un país concreto
Mejora el posicionamiento para ese país
Empeora el posicionamiento para otros

104. Configuración
Se puede modificar la frecuencia de rastreo
(no siempre)
Información actualizada en el buscador de Google
Incrementa el tráfico en el sitio (puede colapsarlo)

105. Configuración
Especificar parámetros URL representativos
(medidores, campañas, etc...)

106. Salud
Problemas de rastreo
(útil: errores de servidor o de acceso)

107. Salud
Estadísticas de rastreo
- Páginas rastreadas al día (imagen superior)
- Kilobytes descargados al día
- Tiempo de descarga de una página (en mseg)

108. Robots.txt
Sugerencias para robots: «Esto NO se mira»
User-agent: Googlebot
Disallow: /pagina/*

109. Robots.txt
Sistema para sugerir a los crawlers donde no buscar
- Un buen crawler obedecerá el robots.txt
- No todos harán caso de las recomendaciones

110. Robots.txt
Impedir acceso y reducir sobrecarga del servidor
Prohibir indexación de ciertas zonas en buscadores
Eliminar contenido duplicado en buscadores
No bloquea “a la fuerza” a ciertos robots

111. Salud
Estado y funcionamiento del robots.txt

112. Tráfico
Consultas de búsqueda (impresiones, clicks, páginas...)

113. Tráfico
Consultas de búsqueda (impresiones, clicks, páginas...)

114. Tráfico
Consultas de búsqueda (impresiones, clicks, páginas...)

115. Actividad de +1 (Google Plus)

116. Mapas de sitio (Sitemaps)
Sitemap.xml: Artículos Imgmap.xml: Imágenes
Listado (XML) con todos los recursos de tu web

117. Mapas de sitio (Sitemaps)

118. Consejos para mejorar indexación (posicionamiento)
Descripción (meta):
- Duplicada
- Demasiado larga
- Demasiado corta
Título:
- Ausente
- Duplicado
- Demasiado largo
- Demasiado corto
- No informativo

119. Google Webmaster Tools (Otros)
- Sistema de mensajes
- Detección de malware
- Eliminar URL de Google

120. www.google.com/webmasters/tools
www.bing.com/toolbox/webmaster

121. CDN: RED DE DISTRIBUCIÓN
DE CONTENIDOS

122. CDN: Red de distribución de contenidos
Servidores en EEUU (peticiones más lentas)

123. CDN: Red de distribución de contenidos
Servidores en España (peticiones más rápidas)

124. www.cloudflare.com

125. CDN: Red de distribución de contenidos
Servidores más cercanos distribuyen copias (muy rápido)

126. CDN: Red de distribución de contenidos
Actualmente: 14 Data Centers en todo el mundo

127. Esquema con CDN Cloudflare
www.emezeta.com
Static resources Web (HTML)
Solicitud o petición con un CDN

128. Esquema con CDN Cloudflare
www.emezeta.com
Static resources Web (HTML)
Solicitud o petición con un CDN
Más velocidad (servir recursos más rápido y cerca)

129. Esquema con CDN Cloudflare
www.emezeta.com
Static resources Static Web (HTML)
resources
Solicitud o petición con un CDN
Más velocidad (servir recursos más rápido y cerca)
Ahorro de transferencia y CPU para el servidor final

130. Esquema con CDN Cloudflare
www.emezeta.com
Static resources Web (HTML)
Solicitud o petición con un CDN
Más velocidad (servir recursos más rápido y cerca)
Ahorro de transferencia y CPU para el servidor final
Servicio gratuito (servicios premium más avanzados)

131. Prerequisitos para Cloudflare
Redirección de DNS hacia Cloudflare
Activar los dominios que pasarán antes por el CDN

132. Prerequisitos para Cloudflare
Instalación de módulo para IP reales
Recibir IPs reales en el servidor (en lugar de IP del CDN)
Nota: Analytics, Adsense (u otros) necesitan IPs reales

133. Información analítica
Informes del tráfico recibido
- Tráfico de usuarios
- Crawlers y robots
- Amenazas y ataques

134. Información analítica
Ejemplo de Emezeta.com (4 May al 4 Jun)
- Porcentaje de tráfico regular, robots y amenazas
- Nivel de seguridad ante ataques
- Procedencia de ataques por países

135. Información analítica
Ahorro de peticiones y transferencia
- Peticiones: 28 mill. 2 mill (93% menos)
- Transferencia: 431GB 103GB (76% menos)

136. Información analítica
Peticiones de robots de buscadores
- Actividad recibida de los crawlers de buscadores

137. Control de amenazas
Panel de control de amenazas
- Gestión de actividad
- Tipo de amenaza y nivel de peligro
- Posibilidad de incluirlo en una lista blanca/negra

138. Cloudflare: Apps
Apps externas
- Multitud de apps externas complementarias

139. Protección contra scrapping
Cloudflare: Apps
Apps externas
- Multitud de apps externas complementarias

140. Hotlinking
Otra Otra Otra
web web web
Otra Taringa Otra
web web
x Visitantes
Mi web Mi web
Protección de robo de imágenes
- Uso de tus imágenes en otras webs (por otras personas)
- Repercute en la transferencia del servidor
- Si está muy extendida, puede tirar el servidor a peticiones

141. Planes de Cloudflare
Planes
- Gratuito: CDN, seguridad básica, panel de control, etc...
- Premium: Muchas mejoras (Ej: Railgun, cachear lo “incacheable”)

142. Planes de Cloudflare
Planes
- Gratuito: CDN, seguridad básica, panel de control, etc...
- Premium: Muchas mejoras (Ej: Railgun, cachear lo “incacheable”)

143. RONDA DE PREGUNTAS

144. Créditos
Enlaces
Limitaciones de Blogger: http://support.google.com/blogger/bin/answer.py?hl=es&answer=42348
Robots. Accesos no humanos a la web: http://www.emezeta.com/articulos/robots-accesos-no-humanos-a-la-web
Robots.txt. Todo lo que debería saber: http://www.emezeta.com/articulos/robots-txt-todo-lo-que-deberia-saber
htaccess. Bloqueando a la fuerza: http://www.emezeta.com/articulos/htaccess-bloqueando-a-la-fuerza
Creando imágenes en línea (Data URL): http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/
Crear rollover con CSS Sprites: http://www.emezeta.com/articulos/crear-rollover-con-css-sprites
Optimizar imágenes: http://www.emezeta.com/articulos/12-aplicaciones-para-optimizar-imagenes
Formatos de imagen: http://www.emezeta.com/articulos/formatos-de-imagen-guia-de-optimizacion