Optimización del rendimiento web

  • 21,238 views
Uploaded on

Presentación de la conferencia "Optimización del rendimiento web" impartida en la TLP2k12, en la jornada de desarrolladores (Tenerife LAN Party 2012). …

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
21,238
On Slideshare
0
From Embeds
0
Number of Embeds
10

Actions

Shares
Downloads
102
Comments
1
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. José Román Hernández - Manz www.emezeta.com
  • 2. OBJETIVOS PRINCIPALES
  • 3. Buena respuesta (página instantánea, sin retrasos)
  • 4. Servidor debe responder rápido (no esté ocupado)
  • 5. Reducir transferencias de datos (ahorra tiempo y dinero)
  • 6. Conseguir un buen posicionamiento en buscadores
  • 7. Sin embargo, la realidad suele ser diferente.
  • 8. CONCEPTOS
  • 9. Esquema básico www.emezeta.com Web (HTML) Cliente- Generalmente, usuarios mediante navegadores
  • 10. Crawlers Esquema básico www.emezeta.com Karmacracy GoogleBot BingBot TwitterBot Web (HTML) Cliente
  • 11. Crawlers Esquema básico www.emezeta.com Karmacracy GoogleBot BingBot TwitterBotElementos dañinos Web (HTML) Spammers Atacantes Harvester Piratas Cliente
  • 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. 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. 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. 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) evolutionoftheweb.com - Sistemas dañinos (malware, zombies, atacantes...)- Generalmente, navegadores (Chrome, Firefox, Safari...)
  • 17. ESQUEMA CLIENTE-SERVIDOR
  • 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. 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. Tipo de servidor SO Servidor Compartido - Muy barato- Overselling: Ofrecen más de lo que pueden - Tus “vecinos” repercuten en tu sitio
  • 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. Tipo de servidor SO Servidor Dedicado- Máquina íntegra para nosotros - No tenemos “vecinos” - Suelen ser bastante caros
  • 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. Esquema básico www.emezeta.com Web (HTML) Solicitud o petición- El cliente pide una web al servidor
  • 25. Esquema básico www.emezeta.com Web (HTML) Respuesta- El servidor devuelve la página pedida al cliente
  • 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. 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. 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. 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. 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. 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. 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. Análisis de recursos getfirebug.com - Extensión para Firefox (versión Lite para Chrome)- Permite, entre otras cosas, analizar descarga de recursos
  • 34. Análisis de recursos tools.pingdom.com/fpt- Modalidad de análisis desde web externa - Ideal si nuestra conexión es lenta
  • 35. Análisis de recursosdevelopers.google.com/speed/pagespeed/insights - Consejos ordenados por prioridades
  • 36. Análisis de recursostools.pingdom.com/fptwww.webpagetest.org
  • 37. TECNOLOGÍAS
  • 38. Tecnologías Contenido - Información, datos, contenido.- Bases de datos: MySQL, MariaDB, SQLite, MongoDB... - Datos: Archivos XML, JSON...
  • 39. Tecnologías Motor - Tecnología que “crea” el sitio - Lenguajes: PHP, JSP, Python, Perl...- Frameworks: Django, Ruby on rails, CakePHP...
  • 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. TecnologíasPresentación (Estructura) validator.w3.org
  • 42. Tecnologías Presentación (Apariencia) - Diseño, alineación y estilos- Recursos de estilo: CSS, tipografías, imágenes...
  • 43. Tecnologías Presentación (Interactividad) - Interacción con el usuario (Javascript) - Procedimientos desde el lado del cliente- Frameworks Javascript: JQuery, Prototype...
  • 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. 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. ESTRUCTURA
  • 47. Las cosas cambian
  • 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. 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. Recurso servido Cabecera de servidor <head> del HTML <body> del HTML Archivo HTML <body>- Cuerpo de la página (parte visible)
  • 51. CONSEJOS
  • 52. Velocidad visual1seg 5seg 10seg - Evitar sensación de espera (latencia de carga)
  • 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. 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. SISTEMA DE CACHÉ
  • 56. Sistema de cachéPRIMER ACCESOHTML LOGO CSS JS FONDO IMG1 IMG2 Reduce: - Ancho de banda - Carga del servidor - Tiempo
  • 57. Sistema de cachéSEGUNDO ACCESO CACHE DEL NAVEGADOR LOGO CSS JS FONDO IMG1 IMG2HTML Cache del navegador: - Archivos con “tiempo de caducidad”
  • 58. Caché por nivelesA nivel de cliente - Expire - Cache-control - E-Tags
  • 59. Caché por niveles A nivel de servidor - HTML estático- APC: Alternative PHP Cache- Memcached: Caché en RAM
  • 60. COMPRESIÓN
  • 61. Compresión al vuelo www.emezeta.com 50KB mod_deflate- El servidor comprime los datos (antes de enviarlos)
  • 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. 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. 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. 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. 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. IMÁGENES
  • 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. 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. 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. Imágenes IMÁGENES IMÁGENES ANIMACIONES VECTORIALESCON PÉRDIDAS SIN PÉRDIDAS Imágenes sin pérdidas - Dibujos “lisos” - Bocetos, pocos colores
  • 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. Imágenes IMÁGENES IMÁGENES ANIMACIONES VECTORIALESCON PÉRDIDAS SIN PÉRDIDAS Animaciones - Imágenes en movimiento
  • 74. Imágenes IMÁGENES IMÁGENES ANIMACIONES VECTORIALESCON PÉRDIDAS SIN PÉRDIDAS Animaciones - Imágenes en movimiento
  • 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. 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. 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. Imágenes Lazy Load (carga perezosa)81KB Imágenes con peso considerable82KB 4,17MB73KB108KB
  • 79. Imágenes Lazy Load (carga perezosa)2KB Imágenes con peso considerable- Sólo se transfiere imagen de carga 2KB--
  • 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. 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. 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. 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. REDUCCIÓN DE PETICIONES
  • 85. CSS Sprites CSS sprites Unir todas las imágenes en una solaAhorra número considerable de peticiones
  • 86. Imágenes en línea (Data URL)data:image/png;base64,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 glkwAAAAAElFTkSuQmCC
  • 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. 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. 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. 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. AUMENTAR RENDIMIENTO
  • 92. Contenido estáticowww.emezeta.com static.emezeta.com Separar en subdominios - Descargas paralelas (limitado a 2 en HTTP 1.1)
  • 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. 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. 1995 2004Muy potente y Buen rendimiento extendido y ligeroConsume mucha No compatible con memoria algunas funciones
  • 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. 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. www.google.com/webmasters/tools
  • 99. Añadir sitios
  • 100. Proceso de verificación 1. Usando Google Analytics 2. Usando un archivo html 3. Etiqueta meta en <head> 4. Proveedor DNS
  • 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. 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. ConfiguraciónEspecificar parámetros URL representativos (medidores, campañas, etc...)
  • 104. Salud Problemas de rastreo(útil: errores de servidor o de acceso)
  • 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. Robots.txtSugerencias para robots: «Esto NO se mira» User-agent: Googlebot Disallow: /pagina/*
  • 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. 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. SaludEstado y funcionamiento del robots.txt
  • 110. TráficoConsultas de búsqueda (impresiones, clicks, páginas...)
  • 111. TráficoConsultas de búsqueda (impresiones, clicks, páginas...)
  • 112. TráficoConsultas de búsqueda (impresiones, clicks, páginas...)
  • 113. Actividad de +1 (Google Plus)
  • 114. Mapas de sitio (Sitemaps)Sitemap.xml: Artículos Imgmap.xml: Imágenes Listado (XML) con todos los recursos de tu web
  • 115. Mapas de sitio (Sitemaps)
  • 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. Google Webmaster Tools (Otros) - Sistema de mensajes - Detección de malware - Eliminar URL de Google
  • 118. www.google.com/webmasters/toolswww.bing.com/toolbox/webmaster
  • 119. CDN: RED DE DISTRIBUCIÓN DE CONTENIDOS
  • 120. CDN: Red de distribución de contenidos Servidores en EEUU (peticiones más lentas)
  • 121. CDN: Red de distribución de contenidosServidores en España (peticiones más rápidas)
  • 122. www.cloudflare.com
  • 123. CDN: Red de distribución de contenidosServidores más cercanos distribuyen copias (muy rápido)
  • 124. CDN: Red de distribución de contenidosActualmente: 14 Data Centers en todo el mundo
  • 125. Esquema con CDN Cloudflarewww.emezeta.com Static resources Web (HTML) Solicitud o petición con un CDN
  • 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. 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. 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. Prerequisitos para Cloudflare Redirección de DNS hacia CloudflareActivar los dominios que pasarán antes por el CDN
  • 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. Información analíticaInformes del tráfico recibido - Tráfico de usuarios - Crawlers y robots - Amenazas y ataques
  • 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. Información analítica Ahorro de peticiones y transferencia - Peticiones: 28 mill. 2 mill (93% menos)- Transferencia: 431GB 103GB (76% menos)
  • 134. Información analítica Peticiones de robots de buscadores- Actividad recibida de los crawlers de buscadores
  • 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. Cloudflare: Apps Apps externas- Multitud de apps externas complementarias
  • 137. Protección contra scrapping Cloudflare: Apps Apps externas- Multitud de apps externas complementarias
  • 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. Planes de Cloudflare Planes - Gratuito: CDN, seguridad básica, panel de control, etc...- Premium: Muchas mejoras (Ej: Railgun, cachear lo “incacheable”)
  • 140. Planes de Cloudflare Planes - Gratuito: CDN, seguridad básica, panel de control, etc...- Premium: Muchas mejoras (Ej: Railgun, cachear lo “incacheable”)
  • 141. RONDA DE PREGUNTAS
  • 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