Optimización del rendimiento web

29,422 views
30,614 views

Published on

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

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
29,422
On SlideShare
0
From Embeds
0
Number of Embeds
25,110
Actions
Shares
0
Downloads
121
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Optimización del rendimiento web

  1. 1. José Román Hernández - Manz www.emezeta.com
  2. 2. OBJETIVOS PRINCIPALES
  3. 3. Buena respuesta (página instantánea, sin retrasos)
  4. 4. Servidor debe responder rápido (no esté ocupado)
  5. 5. Reducir transferencias de datos (ahorra tiempo y dinero)
  6. 6. Conseguir un buen posicionamiento en buscadores
  7. 7. Sin embargo, la realidad suele ser diferente.
  8. 8. CONCEPTOS
  9. 9. Esquema básico www.emezeta.com Web (HTML) Cliente- Generalmente, usuarios mediante navegadores
  10. 10. Crawlers Esquema básico www.emezeta.com Karmacracy GoogleBot BingBot TwitterBot Web (HTML) Cliente
  11. 11. Crawlers Esquema básico www.emezeta.com Karmacracy GoogleBot BingBot TwitterBotElementos dañinos Web (HTML) Spammers Atacantes Harvester Piratas Cliente
  12. 12. Crawlers Esquema básico www.emezeta.com Karmacracy GoogleBot BingBot TwitterBotElementos dañinos Web (HTML) Spammers Atacantes Harvester Piratas ClienteNavegadores Chrome Firefox Safari Opera
  13. 13. 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...)
  14. 14. 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...)
  15. 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. 16. 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...)
  17. 17. ESQUEMA CLIENTE-SERVIDOR
  18. 18. 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
  19. 19. 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
  20. 20. Tipo de servidor SO Servidor Compartido - Muy barato- Overselling: Ofrecen más de lo que pueden - Tus “vecinos” repercuten en tu sitio
  21. 21. Tipo de servidor SO Servidor VPS (Virtual-Dedicado) - Estabilidad y rendimiento - Acceso completo al sistema (incl. root)- Más caros que los servidores compartidos
  22. 22. Tipo de servidor SO Servidor Dedicado- Máquina íntegra para nosotros - No tenemos “vecinos” - Suelen ser bastante caros
  23. 23. 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
  24. 24. Esquema básico www.emezeta.com Web (HTML) Solicitud o petición- El cliente pide una web al servidor
  25. 25. Esquema básico www.emezeta.com Web (HTML) Respuesta- El servidor devuelve la página pedida al cliente
  26. 26. Esquema avanzado www.emezeta.com?? IP 42.42.42.42dns connect sslsend wait receive DNS - Se necesita conocer la IP del servidor - Una vez la conocemos, realizamos solicitud - Se suele tardar entre 20-120ms
  27. 27. 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
  28. 28. Esquema avanzado Quiero index.html Ok, lo tengodns 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)
  29. 29. Esquema avanzado Espera mientras preparo tu pedidodns 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
  30. 30. Esquema avanzado Toma index.htmldns connect sslsend wait receive Recepción - El servidor envía los datos al cliente - Se envía la cabecera y datos solicitados
  31. 31. 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
  32. 32. 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
  33. 33. Análisis de recursos getfirebug.com - Extensión para Firefox (versión Lite para Chrome)- Permite, entre otras cosas, analizar descarga de recursos
  34. 34. Análisis de recursos tools.pingdom.com/fpt- Modalidad de análisis desde web externa - Ideal si nuestra conexión es lenta
  35. 35. Análisis de recursosdevelopers.google.com/speed/pagespeed/insights - Consejos ordenados por prioridades
  36. 36. Análisis de recursostools.pingdom.com/fptwww.webpagetest.org
  37. 37. TECNOLOGÍAS
  38. 38. Tecnologías Contenido - Información, datos, contenido.- Bases de datos: MySQL, MariaDB, SQLite, MongoDB... - Datos: Archivos XML, JSON...
  39. 39. Tecnologías Motor - Tecnología que “crea” el sitio - Lenguajes: PHP, JSP, Python, Perl...- Frameworks: Django, Ruby on rails, CakePHP...
  40. 40. Tecnologías Presentación (Estructura) - Estructura del sitio- Lenguaje de etiquetado: HTML4, XHTML, HTML5... - Un código válido ayuda en la compatibilidad
  41. 41. TecnologíasPresentación (Estructura) validator.w3.org
  42. 42. Tecnologías Presentación (Apariencia) - Diseño, alineación y estilos- Recursos de estilo: CSS, tipografías, imágenes...
  43. 43. Tecnologías Presentación (Interactividad) - Interacción con el usuario (Javascript) - Procedimientos desde el lado del cliente- Frameworks Javascript: JQuery, Prototype...
  44. 44. Peticiones Peticiones - La petición de una URL, pasa por cada sección - GET: Pedimos una URL específica- POST: Enviamos datos (comentarios, formularios...)
  45. 45. 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)
  46. 46. ESTRUCTURA
  47. 47. Las cosas cambian
  48. 48. 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
  49. 49. 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...)
  50. 50. Recurso servido Cabecera de servidor <head> del HTML <body> del HTML Archivo HTML <body>- Cuerpo de la página (parte visible)
  51. 51. CONSEJOS
  52. 52. Velocidad visual1seg 5seg 10seg - Evitar sensación de espera (latencia de carga)
  53. 53. Velocidad visual1seg 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
  54. 54. Velocidad visual Jquery.js Jquery.min.js 246KB 93KB1seg 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
  55. 55. SISTEMA DE CACHÉ
  56. 56. Sistema de cachéPRIMER ACCESOHTML LOGO CSS JS FONDO IMG1 IMG2 Reduce: - Ancho de banda - Carga del servidor - Tiempo
  57. 57. Sistema de cachéSEGUNDO ACCESO CACHE DEL NAVEGADOR LOGO CSS JS FONDO IMG1 IMG2HTML Cache del navegador: - Archivos con “tiempo de caducidad”
  58. 58. Caché por nivelesA nivel de cliente - Expire - Cache-control - E-Tags
  59. 59. Caché por niveles A nivel de servidor - HTML estático- APC: Alternative PHP Cache- Memcached: Caché en RAM
  60. 60. COMPRESIÓN
  61. 61. Compresión al vuelo www.emezeta.com 50KB mod_deflate- El servidor comprime los datos (antes de enviarlos)
  62. 62. 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)
  63. 63. Compresión al vuelo www.emezeta.com Compressed HTML50KB 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
  64. 64. Compresión al vuelo www.emezeta.com 200 95KB hits 19MB Compressed HTML50KB 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
  65. 65. Compresión al vuelo www.emezeta.com 200 95KB hits 19MB Compressed HTML50KB 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
  66. 66. Compresión al vuelo www.emezeta.com 200 95KB hits 19MB Compressed HTML50KB 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
  67. 67. IMÁGENES
  68. 68. Imágenes IMÁGENES IMÁGENES ANIMACIONES VECTORIALESCON PÉRDIDAS SIN PÉRDIDAS Imágenes con pérdidas - Imágenes con texturas - Fotografías con alto nivel de detalle
  69. 69. Imágenes IMÁGENES IMÁGENES ANIMACIONES VECTORIALESCON PÉRDIDAS SIN PÉRDIDAS Imágenes con pérdidas - Imágenes con texturas - Fotografías con alto nivel de detalle
  70. 70. Imágenes IMÁGENES IMÁGENES ANIMACIONES VECTORIALESCON PÉRDIDAS SIN PÉRDIDAS Imágenes con pérdidas - Imágenes con texturas - Fotografías con alto nivel de detalle
  71. 71. Imágenes IMÁGENES IMÁGENES ANIMACIONES VECTORIALESCON PÉRDIDAS SIN PÉRDIDAS Imágenes sin pérdidas - Dibujos “lisos” - Bocetos, pocos colores
  72. 72. Imágenes IMÁGENES IMÁGENES ANIMACIONES VECTORIALESCON PÉRDIDAS SIN PÉRDIDAS Imágenes sin pérdidas - Dibujos “lisos” - Bocetos, pocos colores
  73. 73. Imágenes IMÁGENES IMÁGENES ANIMACIONES VECTORIALESCON PÉRDIDAS SIN PÉRDIDAS Animaciones - Imágenes en movimiento
  74. 74. Imágenes IMÁGENES IMÁGENES ANIMACIONES VECTORIALESCON PÉRDIDAS SIN PÉRDIDAS Animaciones - Imágenes en movimiento
  75. 75. Imágenes IMÁGENES IMÁGENES ANIMACIONES VECTORIALESCON PÉRDIDAS SIN PÉRDIDAS Imágenes vectoriales - Imágenes escalables (útil para variar tamaño)
  76. 76. Imágenes IMÁGENES IMÁGENES ANIMACIONES VECTORIALESCON PÉRDIDAS SIN PÉRDIDAS Imágenes vectoriales - Imágenes escalables (útil para variar tamaño) Formato SVG
  77. 77. Imágenes IMÁGENES IMÁGENES ANIMACIONES VECTORIALESCON PÉRDIDAS SIN PÉRDIDAS Imágenes vectoriales - Imágenes escalables (útil para variar tamaño) luci.criosweb.ro/riot/
  78. 78. Imágenes Lazy Load (carga perezosa)81KB Imágenes con peso considerable82KB 4,17MB73KB108KB
  79. 79. Imágenes Lazy Load (carga perezosa)2KB Imágenes con peso considerable- Sólo se transfiere imagen de carga 2KB--
  80. 80. Imágenes Lazy Load (carga perezosa)81KB Imágenes con peso considerable82KB Sólo se transfiere imagen de carga 165KB A medida que- desplaza el usuario se cargan las imágenes-
  81. 81. Imágenes Lazy Load (carga perezosa)81KB Imágenes con peso considerable82KB Sólo se transfiere imagen de carga 238KB A medida que73KB desplaza el usuario se cargan las imágenes-
  82. 82. Imágenes Lazy Load (carga perezosa)81KB Imágenes con peso considerable82KB Sólo se transfiere imagen de carga 346KB A medida que73KB desplaza el usuario se cargan las imágenes108KB Ahorra tiempo y transferencia
  83. 83. 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ágeneswww.appelsiini.net/projects/lazyload 108KB
  84. 84. REDUCCIÓN DE PETICIONES
  85. 85. CSS Sprites CSS sprites Unir todas las imágenes en una solaAhorra número considerable de peticiones
  86. 86. Imágenes en línea (Data URL)data:image/png;base64,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 glkwAAAAAElFTkSuQmCC
  87. 87. Imágenes en línea (Data URL)data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAMFBMVEUAAAAOCAclJSVJY3hjnMaceS h1dn6rm4P4yy5jnMbExcf/0TL////+/v4ODg4PDw885HYiAAAGxklEQVR42u2b2XLjOAxFR4UCwFwH//+7I5JSwzYkgSwvPQ9zq9u9yBGOsJup/PP7l/UfBgBURRX4PoBV88Jcyq0UZoF9FQCqCuVy+yNmfBFA1X5BfHsQC2ooDPZxAOj6IuX2pMLMok32WYB6f+XbgbiZNgg+CWCrA3Bsf7drYh8EAOnZ8+/vEOjnACBiJw6wP28xtU8BmBig5RDg16X4FAB0ZThyQCnsFdjTUAUfAEDNgoMaFIUqNvNcG1N7fT9AqwF+IiiCXiA1/dGusrCqyhsBvAhDChQx57NOx6yr2N5eBYrYBRl+GdtV1kEAKKYATKDPDtC7y7TZ7wCSAoAL61wnFIoOcMm9/ezW21BhzE1D4XIBUFpRaBMjB+h3UMU4AI4ADH5DZh1xgAMzl8I2DGB8kANYrF9z+0opwD7X2P2YA8Rh2OCtV0Fx+4yBkWAdgG9s4wD2VIhFHM39L4AmBagwpdIJkhxIXCA4sC/XDtAaeFpf/BnGACJBT3uo8K14/ilGfO/bRAIQKyFMw5bP7n7kLWjlvfOirkIC4MLhUGbeH18x0IQfp1pZxZoAuEy5R8/v0gPAAgj9jsgozrUEIDqBufDOwNweX5ZlcC3VONcGAFxg7nm0 A6gyDMuy8BCAhVxOciDIUJ//LgIMWarGdiHwUylh/uM5tHmB9xSwpYl12gHsYZvwgKoKeQowLZtooAyUQ/pNAwjafO4uKMzLLm bWqQAwZgF8Addb80G5A+AKAMV4AshoJ4xBMK0trf7aAbhJKkSfknkvHR5GUbBtptdJTDtADwKrimKkl7NNAcR+0IPA7AC1FFgE1Ue5fX3tlMwA5V4HDsDKC0x7ovT3KE4GCVsGkGsjoA7AC6sqoZ1nmFTjCjQUKJe42c8AGE4JCivvRaDaXluhisJ63aqbdzFmAExYcLbhFl5FzNW6EN8KrZaFEAZgcMA4QK06Oa/s/eFVrDqbFUIWyj9xQAZw41MXdCeQoO1kBtG2fQaCUAJDAH6HUxf4jgu/b8VwzABg cwDGZ16zfSj2hNPHnu2YSQDSKtDieROveIYqHnu2YyYZmJ2UUjnzG0ph3NkMg8tTxdcQmzwf4FJOHQdSu7cYR2fHDAEYAoCIYqOPZ/TR6XEGWCcAT9h3AOFS7da53+c/iwUAizGPhOBQgQmAY/PW7E6+Wi1mfSQwDvbHAbi9xAK2Nm72lg9xlBAFP+plGTol8+xj Lh2gjZ3iABABYNYw2u+rNVaFmd1+DuBfyi0GlaRngfvbTUIJA/uDMOv0OSH65tcT8dYn3R560VBu14LMAfgJkKfQKulrRvWqW0WvjxwBkwDxw+S2ALTm5FZ9DqUEowDugnMx5r9hoDp7Wn5JMOkCf6M15QC+T+cusFECgYpQlShs5Kz4FKHIPACUiH42VQicA+RR Reducir número de peticionesYEwmAaRbd1WE9LC6jADYkPmfKCLkO+GJioZd5ELanz6KNFvJTglkvArMHz+IJPloJpwUYp4C8MfPCBwgJ2AkDsjsexQCQB4FBzCxzP5PIkIEyBqSA2Qt3igHkNGj2ghg6Yjx/EtcEADiEWEEQGpf3X7iggAQEITv/VDY3H6SAKnIxk5KG0SXqEDTFmhuP4mBAyQyNAlAA2uWjgJoAEjUF+LfPACDkhmA8Rkg3wHIHZCLbB4gH8PycQBkDvgwAHDN90EAUxFFsmfTia13JKFQVxKBjwFgoY5g8xEgekMjAjUJIXH Útil sólo para iconos pequeñosApwC0Wm8IyQ4eRccAmAWQjcCGzLtIKJmGowCV4DgG5uaDSHCSg7M5ILL5ILEenlSPLpNOAhjJqqc0NEDr/12PfYpZEFeyXNJEVVilqv1f6dqhdJSIZLMAIEfoGlx7ZPvrqpACASCLgRMMr13eHajp4nNBXgeOsNCw/Xtcd5/NAbgLnCE1T9i/iigu5VMAngWuNP3E9i+KvIQEIAlC7gQShNwNNTC/kMgjwbKcdn9Et1FXvepdaBLAnKDd66ggqApnmdMFSwBSgs1ue56gRw/LgZIjmmwsezz9z8fmJE+LhDyKAsCMTO/LeuAMiJY3A4h3tqFjMAjNhyDf+64aMuGqfIXeALAZPwOwqw4mpC8BoFVfkgLXAHgNwD2fR6DL3gvg9ocAYi8ge60K6CcBkOshQvLiD7vJz0wEYhIQXgRQSj/1Bj0A2IsAGDgGjtCxCB1gVpLuYVcxILwMgPQkPio6YB7AJcMOiC4gewMAKMuAKKEYgBxg/iyM 7GqVIbf/GoDRVAB8lcFvAvBiEEivuZNv3b5MQPrFnzsGUWL/YwC+aQX73wOITvAE+wqAH850ufnvALgAXQV74Rb///T9v/derFX9 glkwAAAAAElFTkSuQmCC
  88. 88. Imágenes en línea (Data URL)data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAMFBMVEUAAAAOCAclJSVJY3hjnMaceS h1dn6rm4P4yy5jnMbExcf/0TL////+/v4ODg4PDw885HYiAAAGxklEQVR42u2b2XLjOAxFR4UCwFwH//+7I5JSwzYkgSwvPQ9zq9u9yBGOsJup/PP7l/UfBgBURRX4PoBV88Jcyq0UZoF9FQCqCuVy+yNmfBFA1X5BfHsQC2ooDPZxAOj6IuX2pMLMok32WYB6f+XbgbiZNgg+CWCrA3Bsf7drYh8EAOnZ8+/vEOjnACBiJw6wP28xtU8BmBig5RDg16X4FAB0ZThyQCnsFdjTUAUfAEDNgoMaFIUqNvNcG1N7fT9AqwF+IiiCXiA1/dGusrCqyhsBvAhDChQx57NOx6yr2N5eBYrYBRl+GdtV1kEAKKYATKDPDtC7y7TZ7wCSAoAL61wnFIoOcMm9/ezW21BhzE1D4XIBUFpRaBMjB+h3UMU4AI4ADH5DZh1xgAMzl8I2DGB8kANYrF9z+0opwD7X2P2YA8Rh2OCtV0Fx+4yBkWAdgG9s4wD2VIhFHM39L4AmBagwpdIJkhxIXCA4sC/XDtAaeFpf/BnGACJBT3uo8K14/ilGfO/bRAIQKyFMw5bP7n7kLWjlvfOirkIC4MLhUGbeH18x0IQfp1pZxZoAuEy5R8/v0gPAAgj9jsgozrUEIDqBufDOwNweX5ZlcC3VONcGAFxg7nm0 A6gyDMuy8BCAhVxOciDIUJ//LgIMWarGdiHwUylh/uM5tHmB9xSwpYl12gHsYZvwgKoKeQowLZtooAyUQ/pNAwjafO4uKMzLLm bWqQAwZgF8Addb80G5A+AKAMV4AshoJ4xBMK0trf7aAbhJKkSfknkvHR5GUbBtptdJTDtADwKrimKkl7NNAcR+0IPA7AC1FFgE1Ue5fX3tlMwA5V4HDsDKC0x7ovT3KE4GCVsGkGsjoA7AC6sqoZ1nmFTjCjQUKJe42c8AGE4JCivvRaDaXluhisJ63aqbdzFmAExYcLbhFl5FzNW6EN8KrZaFEAZgcMA4QK06Oa/s/eFVrDqbFUIWyj9xQAZw41MXdCeQoO1kBtG2fQaCUAJDAH6HUxf4jgu/b8VwzABg cwDGZ16zfSj2hNPHnu2YSQDSKtDieROveIYqHnu2YyYZmJ2UUjnzG0ph3NkMg8tTxdcQmzwf4FJOHQdSu7cYR2fHDAEYAoCIYqOPZ/TR6XEGWCcAT9h3AOFS7da53+c/iwUAizGPhOBQgQmAY/PW7E6+Wi1mfSQwDvbHAbi9xAK2Nm72lg9xlBAFP+plGTol8+xj Lh2gjZ3iABABYNYw2u+rNVaFmd1+DuBfyi0GlaRngfvbTUIJA/uDMOv0OSH65tcT8dYn3R560VBu14LMAfgJkKfQKulrRvWqW0WvjxwBkwDxw+S2ALTm5FZ9DqUEowDugnMx5r9hoDp7Wn5JMOkCf6M15QC+T+cusFECgYpQlShs5Kz4FKHIPACUiH42VQicA+RR Reducir número de peticionesYEwmAaRbd1WE9LC6jADYkPmfKCLkO+GJioZd5ELanz6KNFvJTglkvArMHz+IJPloJpwUYp4C8MfPCBwgJ2AkDsjsexQCQB4FBzCxzP5PIkIEyBqSA2Qt3igHkNGj2ghg6Yjx/EtcEADiEWEEQGpf3X7iggAQEITv/VDY3H6SAKnIxk5KG0SXqEDTFmhuP4mBAyQyNAlAA2uWjgJoAEjUF+LfPACDkhmA8Rkg3wHIHZCLbB4gH8PycQBkDvgwAHDN90EAUxFFsmfTia13JKFQVxKBjwFgoY5g8xEgekMjAjUJIXH Útil sólo para iconos pequeñosApwC0Wm8IyQ4eRccAmAWQjcCGzLtIKJmGowCV4DgG5uaDSHCSg7M5ILL5ILEenlSPLpNOAhjJqqc0NEDr/12PfYpZEFeyXNJEVVilqv1f6dqhdJSIZLMAIEfoGlx7ZPvrqpACASCLgRMMr13eHajp4nNBXgeOsNCw/Xtcd5/NAbgLnCE1T9i/iigu5VMAngWuNP3E9i+Kv IE8, como máximo 32KBIQEIAlC7gQShNwNNTC/kMgjwbKcdn9Et1FXvepdaBLAnKDd66ggqApnmdMFSwBSgs1ue56gRw/LgZIjmmwsezz9z8fmJE+LhDyKAsCMTO/LeuAMiJY3A4h3tqFjMAjNhyDf+64aMuGqfIXeALAZPwOwqw4mpC8BoFVfkgLXAHgNwD2fR6DL3gvg9ocAYi8ge60K6CcBkOshQvLiD7vJz0wEYhIQXgRQSj/1Bj0A2IsAGDgGjtCxCB1gVpLuYVcxILwMgPQkPio6YB7AJcMOiC4gewMAKMuAKKEYgBxg/iyM 7GqVIbf/GoDRVAB8lcFvAvBiEEivuZNv3b5MQPrFnzsGUWL/YwC+aQX73wOITvAE+wqAH850ufnvALgAXQV74Rb///T9v/derFX9 glkwAAAAAElFTkSuQmCC
  89. 89. 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/MESfavicon.ico 0,66KB x50.000 = 33MB/MES
  90. 90. 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 URLDiferentes sitios usan misma URL (ya cacheada en cliente) www.google.com/webfonts developers.google.com/speed/libraries/devguide
  91. 91. AUMENTAR RENDIMIENTO
  92. 92. Contenido estáticowww.emezeta.com static.emezeta.com Separar en subdominios - Descargas paralelas (limitado a 2 en HTTP 1.1)
  93. 93. Contenido estáticowww.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)
  94. 94. Contenido estáticowww.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)
  95. 95. 1995 2004Muy potente y Buen rendimiento extendido y ligeroConsume mucha No compatible con memoria algunas funciones
  96. 96. 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
  97. 97. 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
  98. 98. www.google.com/webmasters/tools
  99. 99. Añadir sitios
  100. 100. Proceso de verificación 1. Usando Google Analytics 2. Usando un archivo html 3. Etiqueta meta en <head> 4. Proveedor DNS
  101. 101. ConfiguraciónSe puede orientar una web a un país concreto Mejora el posicionamiento para ese país Empeora el posicionamiento para otros
  102. 102. ConfiguraciónSe puede modificar la frecuencia de rastreo (no siempre)Información actualizada en el buscador de GoogleIncrementa el tráfico en el sitio (puede colapsarlo)
  103. 103. ConfiguraciónEspecificar parámetros URL representativos (medidores, campañas, etc...)
  104. 104. Salud Problemas de rastreo(útil: errores de servidor o de acceso)
  105. 105. 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)
  106. 106. Robots.txtSugerencias para robots: «Esto NO se mira» User-agent: Googlebot Disallow: /pagina/*
  107. 107. Robots.txtSistema para sugerir a los crawlers donde no buscar - Un buen crawler obedecerá el robots.txt - No todos harán caso de las recomendaciones
  108. 108. Robots.txtImpedir acceso y reducir sobrecarga del servidorProhibir indexación de ciertas zonas en buscadoresEliminar contenido duplicado en buscadoresNo bloquea “a la fuerza” a ciertos robots
  109. 109. SaludEstado y funcionamiento del robots.txt
  110. 110. TráficoConsultas de búsqueda (impresiones, clicks, páginas...)
  111. 111. TráficoConsultas de búsqueda (impresiones, clicks, páginas...)
  112. 112. TráficoConsultas de búsqueda (impresiones, clicks, páginas...)
  113. 113. Actividad de +1 (Google Plus)
  114. 114. Mapas de sitio (Sitemaps)Sitemap.xml: Artículos Imgmap.xml: Imágenes Listado (XML) con todos los recursos de tu web
  115. 115. Mapas de sitio (Sitemaps)
  116. 116. Consejos para mejorar indexación (posicionamiento) Descripción (meta): - Duplicada - Demasiado larga - Demasiado corta Título: - Ausente - Duplicado - Demasiado largo - Demasiado corto - No informativo
  117. 117. Google Webmaster Tools (Otros) - Sistema de mensajes - Detección de malware - Eliminar URL de Google
  118. 118. www.google.com/webmasters/toolswww.bing.com/toolbox/webmaster
  119. 119. CDN: RED DE DISTRIBUCIÓN DE CONTENIDOS
  120. 120. CDN: Red de distribución de contenidos Servidores en EEUU (peticiones más lentas)
  121. 121. CDN: Red de distribución de contenidosServidores en España (peticiones más rápidas)
  122. 122. www.cloudflare.com
  123. 123. CDN: Red de distribución de contenidosServidores más cercanos distribuyen copias (muy rápido)
  124. 124. CDN: Red de distribución de contenidosActualmente: 14 Data Centers en todo el mundo
  125. 125. Esquema con CDN Cloudflarewww.emezeta.com Static resources Web (HTML) Solicitud o petición con un CDN
  126. 126. Esquema con CDN Cloudflarewww.emezeta.com Static resources Web (HTML) Solicitud o petición con un CDN Más velocidad (servir recursos más rápido y cerca)
  127. 127. Esquema con CDN Cloudflarewww.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
  128. 128. Esquema con CDN Cloudflarewww.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)
  129. 129. Prerequisitos para Cloudflare Redirección de DNS hacia CloudflareActivar los dominios que pasarán antes por el CDN
  130. 130. Prerequisitos para Cloudflare Instalación de módulo para IP realesRecibir IPs reales en el servidor (en lugar de IP del CDN) Nota: Analytics, Adsense (u otros) necesitan IPs reales
  131. 131. Información analíticaInformes del tráfico recibido - Tráfico de usuarios - Crawlers y robots - Amenazas y ataques
  132. 132. Información analíticaEjemplo 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
  133. 133. Información analítica Ahorro de peticiones y transferencia - Peticiones: 28 mill. 2 mill (93% menos)- Transferencia: 431GB 103GB (76% menos)
  134. 134. Información analítica Peticiones de robots de buscadores- Actividad recibida de los crawlers de buscadores
  135. 135. 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
  136. 136. Cloudflare: Apps Apps externas- Multitud de apps externas complementarias
  137. 137. Protección contra scrapping Cloudflare: Apps Apps externas- Multitud de apps externas complementarias
  138. 138. 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
  139. 139. Planes de Cloudflare Planes - Gratuito: CDN, seguridad básica, panel de control, etc...- Premium: Muchas mejoras (Ej: Railgun, cachear lo “incacheable”)
  140. 140. Planes de Cloudflare Planes - Gratuito: CDN, seguridad básica, panel de control, etc...- Premium: Muchas mejoras (Ej: Railgun, cachear lo “incacheable”)
  141. 141. RONDA DE PREGUNTAS
  142. 142. CréditosEnlaces 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

×