José Román Hernández - Manz      www.emezeta.com
OBJETIVOS PRINCIPALES
Buena respuesta (página instantánea, sin retrasos)
Servidor debe responder rápido (no esté ocupado)
Reducir transferencias de datos (ahorra tiempo y dinero)
Conseguir un buen posicionamiento en buscadores
Sin embargo, la realidad suele ser diferente.
CONCEPTOS
Esquema básico           www.emezeta.com                          Web (HTML)                  Cliente- Generalmente, usuar...
Crawlers                                       Esquema básico               www.emezeta.com Karmacracy   GoogleBot        ...
Crawlers                                       Esquema básico               www.emezeta.com Karmacracy   GoogleBot        ...
Crawlers                                       Esquema básico               www.emezeta.com Karmacracy   GoogleBot        ...
Esquema básico               www.emezeta.com                                Web (HTML)                       Cliente      ...
Esquema básico               www.emezeta.com                                Web (HTML)                       Cliente      ...
Esquema básico               www.emezeta.com                                Web (HTML)                       Cliente      ...
Esquema básico             www.emezeta.com                            Web (HTML)                     Cliente       - Crawl...
ESQUEMA CLIENTE-SERVIDOR
Esquema básico          www.emezeta.com                          Web (HTML)                Servidor    - Máquina donde se ...
Tipo de servidor              SO           Hosting gratuito- Ideal para enfocarse: escribir o publicar - Coste 0: Sin gast...
Tipo de servidor             SO         Servidor Compartido                 - Muy barato- Overselling: Ofrecen más de lo q...
Tipo de servidor               SO    Servidor VPS (Virtual-Dedicado)        - Estabilidad y rendimiento  - Acceso completo...
Tipo de servidor         SO      Servidor Dedicado- Máquina íntegra para nosotros     - No tenemos “vecinos”   - Suelen se...
Tipo de servidor                 SO        Servidor Dinámico (o elástico)- Depende del uso (se adapta según necesidades)  ...
Esquema básico     www.emezeta.com                      Web (HTML)      Solicitud o petición- El cliente pide una web al s...
Esquema básico            www.emezeta.com                             Web (HTML)                  Respuesta- El servidor d...
Esquema avanzado          www.emezeta.com??                        IP 42.42.42.42dns connect sslsend     wait        recei...
Esquema avanzado                 Puedo pasar?                                Ok, pasa.   dns connect sslsend     wait     ...
Esquema avanzado           Quiero index.html                          Ok, lo tengodns connect sslsend      wait         re...
Esquema avanzado                       Espera mientras                      preparo tu pedidodns connect sslsend       wai...
Esquema avanzado                        Toma index.htmldns connect sslsend      wait         receive                 Recep...
Esquema avanzado  dns connect sslsend    wait        receive             Dependen de la red       - Conexión y ancho de ba...
Esquema avanzado         Una web = varios recursos- Este proceso ocurre en cada recurso del sitio web     - Imágenes, html...
Análisis de recursos                   getfirebug.com    - Extensión para Firefox (versión Lite para Chrome)- Permite, ent...
Análisis de recursos      tools.pingdom.com/fpt- Modalidad de análisis desde web externa    - Ideal si nuestra conexión es...
Análisis de recursosdevelopers.google.com/speed/pagespeed/insights         - Consejos ordenados por prioridades
Análisis de recursostools.pingdom.com/fptwww.webpagetest.org
TECNOLOGÍAS
Tecnologías                    Contenido           - Información, datos, contenido.- Bases de datos: MySQL, MariaDB, SQLit...
Tecnologías                   Motor         - Tecnología que “crea” el sitio      - Lenguajes: PHP, JSP, Python, Perl...- ...
Tecnologías        Presentación (Estructura)                - Estructura del sitio- Lenguaje de etiquetado: HTML4, XHTML, ...
TecnologíasPresentación (Estructura)    validator.w3.org
Tecnologías        Presentación (Apariencia)         - Diseño, alineación y estilos- Recursos de estilo: CSS, tipografías,...
Tecnologías    Presentación (Interactividad)   - Interacción con el usuario (Javascript) - Procedimientos desde el lado de...
Peticiones                   Peticiones   - La petición de una URL, pasa por cada sección          - GET: Pedimos una URL ...
Peticiones        Peticiones asíncronas (AJAX) - Una petición específica de una parte de un artículo- No pasa por cada sec...
ESTRUCTURA
Las cosas cambian
Recurso servido                        Cabecera de servidor                        Archivo HTML           Cabecera de serv...
Recurso servido                    Cabecera de servidor                    <head> del HTML                    Archivo HTML...
Recurso servido                  Cabecera de servidor                  <head> del HTML                  <body> del HTML   ...
CONSEJOS
Velocidad visual1seg                   5seg                      10seg   - Evitar sensación de espera (latencia de carga)
Velocidad visual1seg                    5seg                     10seg    - Colocar estilos CSS al principio (bajo <head>)...
Velocidad visual        Jquery.js             Jquery.min.js          246KB                   93KB1seg                  5se...
SISTEMA DE CACHÉ
Sistema de cachéPRIMER ACCESOHTML   LOGO   CSS   JS      FONDO   IMG1    IMG2                               Reduce:       ...
Sistema de cachéSEGUNDO ACCESO                    CACHE DEL NAVEGADOR       LOGO   CSS   JS   FONDO   IMG1   IMG2HTML     ...
Caché por nivelesA nivel de cliente      - Expire  - Cache-control      - E-Tags
Caché por niveles  A nivel de servidor       - HTML estático- APC: Alternative PHP Cache- Memcached: Caché en RAM
COMPRESIÓN
Compresión al vuelo          www.emezeta.com                                                        50KB                  ...
Compresión al vuelo          www.emezeta.com                  Compressed HTML                         9KB                 ...
Compresión al vuelo             www.emezeta.com                     Compressed HTML50KB                        9KB        ...
Compresión al vuelo             www.emezeta.com                                  200              95KB                hits...
Compresión al vuelo             www.emezeta.com                                200             95KB               hits    ...
Compresión al vuelo             www.emezeta.com                                200             95KB               hits    ...
IMÁGENES
Imágenes IMÁGENES          IMÁGENES                                    ANIMACIONES          VECTORIALESCON PÉRDIDAS     SI...
Imágenes IMÁGENES          IMÁGENES                                    ANIMACIONES          VECTORIALESCON PÉRDIDAS     SI...
Imágenes IMÁGENES          IMÁGENES                                    ANIMACIONES          VECTORIALESCON PÉRDIDAS     SI...
Imágenes IMÁGENES        IMÁGENES                                ANIMACIONES   VECTORIALESCON PÉRDIDAS   SIN PÉRDIDAS     ...
Imágenes IMÁGENES        IMÁGENES                                ANIMACIONES   VECTORIALESCON PÉRDIDAS   SIN PÉRDIDAS     ...
Imágenes IMÁGENES        IMÁGENES                               ANIMACIONES   VECTORIALESCON PÉRDIDAS   SIN PÉRDIDAS      ...
Imágenes IMÁGENES        IMÁGENES                               ANIMACIONES   VECTORIALESCON PÉRDIDAS   SIN PÉRDIDAS      ...
Imágenes IMÁGENES           IMÁGENES                                    ANIMACIONES        VECTORIALESCON PÉRDIDAS      SI...
Imágenes IMÁGENES           IMÁGENES                                    ANIMACIONES        VECTORIALESCON PÉRDIDAS      SI...
Imágenes IMÁGENES           IMÁGENES                                    ANIMACIONES        VECTORIALESCON PÉRDIDAS      SI...
Imágenes          Lazy Load (carga perezosa)81KB                    Imágenes con peso                         considerable...
Imágenes        Lazy Load (carga perezosa)2KB                  Imágenes con peso                       considerable-      ...
Imágenes         Lazy Load (carga perezosa)81KB                   Imágenes con peso                        considerable82K...
Imágenes         Lazy Load (carga perezosa)81KB                   Imágenes con peso                        considerable82K...
Imágenes          Lazy Load (carga perezosa)81KB                    Imágenes con peso                         considerable...
Imágenes                      Lazy Load (carga perezosa)        81KB                                Imágenes con peso     ...
REDUCCIÓN DE PETICIONES
CSS Sprites              CSS sprites   Unir todas las imágenes en una solaAhorra número considerable de peticiones
Imágenes en línea (Data URL)data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAMFBMVEUAAAAOCAclJSVJY3hj...
Imágenes en línea (Data URL)data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAMFBMVEUAAAAOCAclJSVJY3hj...
Imágenes en línea (Data URL)data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAMFBMVEUAAAAOCAclJSVJY3hj...
favicon.ico      Icono de 16x16 pixels que representa la web    - Recibe muchísimas peticiones. Ej: +50.000 al mes        ...
https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js             http://fonts.googleapis.com/css?family=Belgra...
AUMENTAR RENDIMIENTO
Contenido estáticowww.emezeta.com             static.emezeta.com             Separar en subdominios    - Descargas paralel...
Contenido estáticowww.emezeta.com               static.emezeta.com              Separar en subdominios    - Descargas para...
Contenido estáticowww.emezeta.com             static.emezeta.com            Balancear con otro servidor          - Amazon ...
1995              2004Muy potente y   Buen rendimiento  extendido         y ligeroConsume mucha   No compatible con   memo...
Nginx como proxy inverso         Aligerar carga del servidor          - Nginx recibe todas las peticiones  - Si se trata d...
Nginx como proxy inverso         Aligerar carga del servidor     Servidores todas las peticiones       - Nginx recibe a ni...
www.google.com/webmasters/tools
Añadir sitios
Proceso de verificación               1. Usando Google Analytics               2. Usando un archivo html               3. ...
ConfiguraciónSe puede orientar una web a un país concreto     Mejora el posicionamiento para ese país     Empeora el posic...
ConfiguraciónSe puede modificar la frecuencia de rastreo              (no siempre)Información actualizada en el buscador d...
ConfiguraciónEspecificar parámetros URL representativos       (medidores, campañas, etc...)
Salud          Problemas de rastreo(útil: errores de servidor o de acceso)
Salud           Estadísticas de rastreo - Páginas rastreadas al día (imagen superior)        - Kilobytes descargados al dí...
Robots.txtSugerencias para robots: «Esto NO se mira»       User-agent: Googlebot        Disallow: /pagina/*
Robots.txtSistema para sugerir a los crawlers donde no buscar     - Un buen crawler obedecerá el robots.txt  - No todos ha...
Robots.txtImpedir acceso y reducir sobrecarga del servidorProhibir indexación de ciertas zonas en buscadoresEliminar conte...
SaludEstado y funcionamiento del robots.txt
TráficoConsultas de búsqueda (impresiones, clicks, páginas...)
TráficoConsultas de búsqueda (impresiones, clicks, páginas...)
TráficoConsultas de búsqueda (impresiones, clicks, páginas...)
Actividad de +1 (Google Plus)
Mapas de sitio (Sitemaps)Sitemap.xml: Artículos       Imgmap.xml: Imágenes   Listado (XML) con todos los recursos de tu web
Mapas de sitio (Sitemaps)
Consejos para mejorar indexación (posicionamiento)                                Descripción (meta):                     ...
Google Webmaster Tools (Otros)       - Sistema de mensajes      - Detección de malware     - Eliminar URL de Google
www.google.com/webmasters/toolswww.bing.com/toolbox/webmaster
CDN: RED DE DISTRIBUCIÓN     DE CONTENIDOS
CDN: Red de distribución de contenidos Servidores en EEUU (peticiones más lentas)
CDN: Red de distribución de contenidosServidores en España (peticiones más rápidas)
www.cloudflare.com
CDN: Red de distribución de contenidosServidores más cercanos distribuyen copias (muy rápido)
CDN: Red de distribución de contenidosActualmente: 14 Data Centers en todo el mundo
Esquema con CDN Cloudflarewww.emezeta.com Static resources           Web (HTML)      Solicitud o petición con un CDN
Esquema con CDN Cloudflarewww.emezeta.com Static resources               Web (HTML)      Solicitud o petición con un CDN M...
Esquema con CDN Cloudflarewww.emezeta.com Static resources        Static Web (HTML)                                resourc...
Esquema con CDN Cloudflarewww.emezeta.com Static resources               Web (HTML)      Solicitud o petición con un CDN M...
Prerequisitos para Cloudflare     Redirección de DNS hacia CloudflareActivar los dominios que pasarán antes por el CDN
Prerequisitos para Cloudflare      Instalación de módulo para IP realesRecibir IPs reales en el servidor (en lugar de IP d...
Información analíticaInformes del tráfico recibido     - Tráfico de usuarios      - Crawlers y robots    - Amenazas y ataq...
Información analíticaEjemplo de Emezeta.com (4 May al 4 Jun)- Porcentaje de tráfico regular, robots y amenazas        - Ni...
Información analítica  Ahorro de peticiones y transferencia - Peticiones: 28 mill.   2 mill (93% menos)- Transferencia: 43...
Información analítica   Peticiones de robots de buscadores- Actividad recibida de los crawlers de buscadores
Control de amenazas       Panel de control de amenazas              - Gestión de actividad       - Tipo de amenaza y nivel...
Cloudflare: Apps             Apps externas- Multitud de apps externas complementarias
Protección contra scrapping                                        Cloudflare: Apps             Apps externas- Multitud de...
Hotlinking                                                       Otra Otra   Otra                                         ...
Planes de Cloudflare                             Planes    - Gratuito: CDN, seguridad básica, panel de control, etc...- Pr...
Planes de Cloudflare                             Planes    - Gratuito: CDN, seguridad básica, panel de control, etc...- Pr...
RONDA DE PREGUNTAS
CréditosEnlaces               Limitaciones de Blogger: http://support.google.com/blogger/bin/answer.py?hl=es&answer=42348 ...
Optimización del rendimiento web
Optimización del rendimiento web
Upcoming SlideShare
Loading in...5
×

Optimización del rendimiento web

25,593

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
25,593
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
118
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×