High performance Web Sites

2.601 visualizaciones

Publicado el

Resumen de las 14 reglas para tener un alto rendimiento en sitios web

Publicado en: Tecnología
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
2.601
En SlideShare
0
De insertados
0
Número de insertados
11
Acciones
Compartido
0
Descargas
37
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.
  • - Moviendo los scripts al final permite una renderización progresiva y consigue una mayor ejecución de la descarga paralela.
  • - Moviendo los scripts al final permite una renderización progresiva y consigue una mayor ejecución de la descarga paralela.
  • El mayor impacto en el tiempo de respuesta viene dado por el número de componentes. Cada componente genera una HTTP request (cuando la cache está vacía o incluso cuando no está completamente llena).
  • - En lugar de dejar en las manos del usuario que tenga que modificar el atributo network.http.max-persistent-connections-per-server del cliente navegador, es mejor que los ingenieros utilicen alias DNS. - Un estudio hecho para Yahoo! Muestra que si se utilizan más de dos alias el rendimiento es peor.
  • Una razón es pq el script puede utilizar document.write para modificar la página. Por esta razón el navegador se espera a que la página esté compuesta adecuadamente. También para garantizar que los scripts se ejecuten en el orden correcto. Solución: ponerlos al final de la página.
  • - La primera vez que se evalúa la expresión CSS, el javascript establece la propiedad explícitamente. De esta manera aunque se haga scroll o se mueva el ratón no se vuelve a evaluar.
  • Evita la evaluación de la CSS expression durante eventos que no están relacionados. Interner Explorer no soporta la propiedad CSS min-width. Esta solución arregla el ancho de la página en el evento onresize.
  • Las llamadas internas pueden ser más rápidas para ciertos casos ya que el estilo interno hace un http request por 3 (html, css, javascript) del externo. Pero si se cachea el css/js externos, el html será mucho más ligero y no habrá tantas http request.
  • A menos archivos mejor. Un solo archivo hace solo una http request pero la primera vez que entra el usuario se descargará mucha información. Categorizar el site y hacer un archivo para cada categoría.
  • - Casos en los que la home va a ser la primera página de muchas visitas a otras páginas. - Mezcla la interna con la externa. - La interna para la home y al cargar la home descarga los externos para posteriores páginas.
  • Si el navegador supiera si un componente está en caché o no podría tomar la decisión de incluirlo interno o externo. Si está en caché sería externo sino sería interno. Esto lo hace inicializando la cookie en el estilo anterior. En el doOnload.
  • time-to-live (TTL) Mientras el navegador tenga en caché lo que busca no va a preguntar al SO. Si el SO no puede satisfacer la petición del navegador, mandará una petición al servidor ISP, y aquí es donde se puede producir el aumento de tiempos. Por desgracia, las ips cambian, asi que hay que establacer una tiempo periódico donde se vacíe esta caché.
  • El servidor devuelve junto con el registro DNS solicitido un TTL para esa petición, para indicar al cliente el periodo que la petición debe estar en caché. El sistema operativo toma este valor, pero el cada navegador establece sus propios TTL. Además de esto la propiedad Keep-Alive del protocolo HTTP puede sobre escribir los valores tanto del servidor como del navegador. Debido al alto número de usuarios de estos sites, estas compañías han decido poner unos TTL bajos para que en caso de fallo se redirija rápidamente a un servidor dns alternativo.
  • IE: -Keep-Alive viene dado por el protocolo HTTP 1.0 donde se incluyó para poder realizar conexiones persistentes. Se puede indicar en el navegador o en el servidor. Tecnicamente en HTTP 1.1 Connection: Keep-Alive no es necesario. -ServerInfoTimeOut: indica que incluso sin el keep-alive, si el usuario hace una petición del mismo dns cada 2 minutos (sin ningún fallo en la petición), no hara falta de volver a enviar una dns lookup, incluso si has estado realizando peticiones cada 2 minutos durante más de 30 minutos tampoco hará falta. Esto es peligroso, pq si alguien actualiza su ip y el usuario sigue haciendo peticiones cada 2 minutos no refrescará al nuevo DNS. Firefox: -Al poner que la cache expire en un minuto incrementará el número de peticiones dns. -Poniendo solo 20 entradas en la cache perjudicará a los usuarios que hagan muchas visitas.
  • Si la caché está vacía en el cliente, tendrá tantas peticiones DNS como hostnames tenga la web que solicita. Reducir el número de hostnames aumenta el número de descargas paralelas. Reducir las peticiones DNS reduce el tiempo de respuesta pero aumentando el número de descargas paralelas incrementa el tiempo.
  • Es la práctica de eliminar caracteres innecesarios del código. Eliminar comentarios, espacios, nuevas líneas,tabs,etc. Al eliminar caracteres el peso de la descarga se reduce y por tanto el tiempo de descarga también.
  • Problemas: - Al ser más complejo es más sensible a que se produzcan errores. - A veces elimina simbolos del javascript que deben permanecer. - Al ser más complejo es difícil de hacerle un debug.
  • JSMin utiliza minimización y el Dojo Compressor ofuscación. Lo mejor es combinar la técnica de Gzip de la regla 4 y la minimización. Aplicar minimización a CSS es más fácil ya que no suelen llevar tantos comentarios ni espacios.
  • High performance Web Sites

    1. 1.
    2. 2. <ul><li>El 80% del tiempo de carga de un sitio web se debe principalmente a los siguientes componentes: </li></ul><ul><ul><li>Javascript </li></ul></ul><ul><ul><li>CSS </li></ul></ul><ul><ul><li>Imágenes </li></ul></ul><ul><ul><li>Flash </li></ul></ul><ul><li>Reducir en número todos estos componentes hará que el renderizado de la página sea más ágil y que el número de peticiones HTTP disminuyan, por lo que la web cargará mucho más rápido. </li></ul>MOTIVACIÓN
    3. 3. Regla 1: Reducir HTTP Requests
    4. 4. <ul><li>Asociar múltiples urls a una sola imagen </li></ul><ul><li>La imagen se divide en varias áreas con diferentes direcciones </li></ul><ul><li>Ejemplo ASP.NET: </li></ul><ul><li><asp:ImageMap ID=&quot;ImageMap1&quot; runat=&quot;server&quot; Height=&quot;220px&quot; ImageUrl=&quot;~/Menu.gif&quot; Width=&quot;420px&quot;> </li></ul><ul><li><asp:RectangleHotSpot Bottom=&quot;220&quot; HotSpotMode=&quot;Navigate&quot; NavigateUrl=&quot;~/Productos.aspx&quot; Right=&quot;140&quot; AlternateText=&quot;Productos&quot; /> </li></ul><ul><li><asp:RectangleHotSpot Bottom=&quot;220&quot; HotSpotMode=&quot;Navigate&quot; Left=&quot;141&quot; NavigateUrl=&quot;~/Carteras.aspx&quot; Right=&quot;280&quot; AlternateText=&quot;Cartera&quot; /> </li></ul><ul><li><asp:RectangleHotSpot Bottom=&quot;220&quot; HotSpotMode=&quot;Navigate&quot; Left=&quot;281&quot; NavigateUrl=&quot;~/Contacto.aspx&quot; Right=&quot;420&quot; AlternateText=&quot;Contacto&quot; /> </li></ul><ul><li></asp:ImageMap> </li></ul><ul><li>Problema: tedioso y posibilidad de error al crearlo </li></ul><ul><li>Solución: CSS Sprites. </li></ul>UTILIZAR IMAGE MAPS
    5. 5. <ul><li>Combinar múltiples imágenes en una sola </li></ul><ul><li>Combinando las imágenes de fondo con las propiedades background-position y background-image se puede mostrar partes de la misma imagen haciendo que todas las imágenes principales de la web se llamen a la vez. </li></ul><ul><li>Ejemplos: http://www.w3schools.com/css/css_image_sprites.asp </li></ul>UTILIZAR CSS SPRITES
    6. 6. <ul><li>Incrustar la imagen en la página usando data: Url Scheme. </li></ul><ul><li>Problema: No soportado por IE. </li></ul><ul><li>Ejemplo: </li></ul><ul><li><IMG ALT=&quot;Red Star&quot; </li></ul><ul><li>SRC=&quot;data:image/gif;base64,R0lGODlhDAAMALMLAPN8ffBiYvWW </li></ul><ul><li>lvrKy/FvcPewsO9VVfajo+w6O/zl5estLv/8/AAAAAAAAAAAAAAAACH5BAEA </li></ul><ul><li>AAsALAAAAAAMAAwAAAQzcElZyryTEHyTUgknHd9xGV+qKsYirKkwDYiKDBia </li></ul><ul><li>tt2H1KBLQRFIJAIKywRgmhwAIlEEADs=&quot;> </li></ul>UTILIZAR INLINE IMAGES
    7. 7. <ul><li>Incluir jscript y css que se utilizan en la misma página en un único fichero. </li></ul><ul><li>Lo ideal es un fichero .js y otro .css por página. </li></ul><ul><li>Problema: unificar los ficheros complica el desarrollo. </li></ul><ul><li>Solución: Desarrollar proceso que combine los archivos para generar los que necesitan las páginas. </li></ul>UNIFICAR SCRIPTS Y CSS
    8. 8. Regla 2: Content Delivery Network
    9. 9. <ul><li>Una red de distribución de contenido (CDN) se suele usar para agilizar la distribución de archivos estáticos (imágenes, hojas de estilo, javascripts, multimedia...). </li></ul><ul><li>Las CDNs permiten tener los contenidos replicados en múltiples servidores por todo el mundo, acelerando la descarga de los mismo, puesto que se sirven desde la ubicación más cercana al usuario. </li></ul><ul><li>Problema: Coste muy elevado para pequeñas empresas. </li></ul>UTILIZAR CDN
    10. 10. Regla 3: Añadir Expires Header
    11. 11. <ul><li>Para los archivos estáticos: implementar &quot;Never expire&quot; como Expires Header para las próximas visitas. </li></ul><ul><li>Para los archivos dinámicos: usa el Cache-Control Header más propiado para ayudar al navegador en las llamadas HTTP. </li></ul><ul><li>Usar un Expires Header permite que algunos componentes (scripts, hojas de estilo, imágenes, animaciones Flash,etc.) se guarden en la cache del navegador. </li></ul><ul><li>Ej: Expires: Thu, 16 Apr 2011 20:00:00 GMT </li></ul><ul><li>Problema: Actualización de recursos </li></ul><ul><li>Solución: Utilizar versiones en .js, .css </li></ul><ul><li>La mejora es útil si el usuario visita con frecuencia el sitio web. </li></ul>EXPIRES HEADER
    12. 12. Regla 4: Componentes Gzip
    13. 13. <ul><li>A partir de HTTP/1.1, los navegadores web permiten el soporte para compresion con la cabecera Accept-Encoding en la petición HTTP. </li></ul><ul><li>Accept-Encoding: gzip, deflate. Si el servidor web visualiza esta cabecera en la petición, puede comprimir la respuesta usando uno de los métodos listados por el cliente. El servidor web notifica al cliente a través de la cabecera Content-Encoding en la respuesta. </li></ul><ul><li>Content-Encoding: gzip. Es el más utilizado. </li></ul><ul><li>Apache (mod_gzip, mod_deflate) / IIS (PipeBoost, VIGOS o Hyperspace) </li></ul><ul><li>Las imágenes y los documentos PDF no deben ser tratados con Gzip ya que estos ya están comprimidos. Intentar hacerlo no sólo desperdicia recursos del CPU, sino que incrementan el tamaño del archivo. </li></ul>COMPONENTES GZIP
    14. 14. <ul><li>Los servidores Proxy Cache permiten optimizar el uso de ancho de banda, reducir latencias y por lo general hacer un mejor uso de los recursos disponibles. </li></ul>PROXY CACHE (I)
    15. 15. <ul><li>La petición llega al proxy, revisa su cache para comprobar si dispone de los objetos que se van solicitando (HIT o MISS). En el caso de que el objeto buscado se encuentre en cache (HIT), el proxy verifica que no ha expirado. </li></ul><ul><li>Problema: Si el proxy tiene la información comprimida aunque alguno de los servidores al q se le hace la petición no tiene soporte para gzip devuelve los datos comprimidos al navegador. </li></ul><ul><li>Solución: Vary Header en el Response (Vary: Accept-Encoding). Se mantendrán las dos versiones. </li></ul><ul><li>Sporte gzip para IIS: utilizar User-Agent para indicar versiones del navegador. </li></ul>PROXY CACHE (II)
    16. 16. Regla 5: CSS en la cabecera
    17. 17. <ul><li>Poner las hojas de estilo al principio de la página permite que se renderice progresivamente. </li></ul><ul><li>Poner en el Head utilizando LINK tag. </li></ul>CSS
    18. 18. Regla 6: Scripts al final de la página
    19. 19. DESCARGAS PARALELAS <ul><li>HTTP/1.1: sugiere que los navegadores descarguen 2 componentes por host. </li></ul><ul><li>network.http.max-persistent-connections-per-server = 6 (Firefox 3.6.3). </li></ul><ul><li>Aumentar el número de descargas paralelas tiene un coste que en ciertos equipos con poco ancho de banda conlleva una disminución del rendimiento. </li></ul>
    20. 20. 2 descargas paralelas por host. 4 descargas paralelas por host. 8 descargas paralelas por host.
    21. 21. Utilizar CNAMEs (alias DNS) para dividir sus componentes en múltiples hostnames.
    22. 22. JavaScripts bloquean la descarga paralela.
    23. 23. http://stevesouders.com/hpws/move-scripts.php Diferencia de tiempo entre scripts en parte superior a la parte inferior. http://stevesouders.com/hpws/js-blocking.php Ejemplo de cómo el script bloquea las descargas de los componentes.
    24. 24. Regla 7: Evitar expresiones CSS
    25. 25. <ul><li>¿Qué son? </li></ul><ul><li>Una manera de establecer propiedades CSS de forma dinámica. </li></ul>EXPRESIONES CSS Width: expression(document.body.clientWidth < 600 ? “600px” : “auto”); <ul><li>¿Inconvenientes? </li></ul><ul><li>- Solo funcionan con Internet Explorer 5 y superior. </li></ul><ul><li>- El resto de navegadores ignoran las expresiones CSS. </li></ul><ul><li>- Se evalúan cada vez que cuando la página es renderizada, cuando se ajusta el tamaño, cuando se hace scroll y cuando se mueve el ratón sobre la página. </li></ul>
    26. 26. SOLUCIÓN <ul><li>One-Time Expressions </li></ul><style> P{ background-color: expression(altBgcolor(this); } </style> <script type=“text-javascript”> function altBgcolor(elem){ elem.style.backgroundColor = (new Date()).getHours()%2 ? “#F08A00” : “#B8D4FF”; } </script>
    27. 27. SOLUCIÓN <ul><li>Event Handlers </li></ul>
    28. 28. Ejemplo de CSS Expression. http://stevesouders.com/hpws/expression-counter.php Ejemplo de One-Time Expression. http://stevesouders.com/hpws/onetime-expressions.php
    29. 29. Regla 8: Hacer Javascript y CSS externos
    30. 30. JS/CSS EXTERNOS vs JS/CSS INTERNOS <ul><li>INTERNO </li></ul>Es aconsejable para sites con pocas páginas visitadas por usuario. <ul><li>EXTERNO </li></ul>Permite cachear los archivos para no volver a descargarlos. Es aconsejable para sites donde el usuario visita muchas páginas al mes o por sesión.
    31. 31. JAVASCRIPT/CSS EXTERNOS <ul><li>UN SOLO ARCHIVO </li></ul><ul><li>VARIOS ARCHIVOS </li></ul>Es aconsejable para sites con pocas páginas visitadas por usuario. Es aconsejable para sites donde el usuario visita muchas páginas al mes o por sesión.
    32. 32. JAVASCRIPT/CSS INTERNOS <ul><li>Páginas HOME </li></ul>Tiene muchas visitas al mes pero solo una visita por sesión. Muchos usuarios vacían la caché al cerrar el navegador. En mucho casos es la única página visitada del site por lo que no comparte JavaScripts ni CSS con otras páginas.
    33. 33. POST-ONLOAD DOWNLOAD La home utiliza JavaScripts / CSS internos pero al cargarse esta. Con el evento OnLoad() descarga los archivos externos para las sucesivas páginas.
    34. 34. EJEMPLO POST-ONLOAD
    35. 35. INTERNO / EXTERNO DINÁMICAMENTE
    36. 36. Ejemplo de Post-onload. http://stevesouders.com/hpws/post-onload.php Ejemplo de Dynamic Inlining . http://stevesouders.com/hpws/dynamic-inlining.php
    37. 37. Regla 9: Reducir búsquedas DNS
    38. 38. TTLs & DNS CACHING Cada petición DNS del navegador tarda entre 20-120 ms. <ul><li>Cache DNS </li></ul><ul><li>En un servidor del ISP. </li></ul><ul><li>En el sistema operativo (DNS Client Service). </li></ul><ul><li>En el propio navegador </li></ul>
    39. 39. <ul><li>TTLs </li></ul>
    40. 40. <ul><li>Internet Explorer </li></ul>DnsCacheTimeout: 30 minutes KeepAliveTimeout: 1 minute ServerInfoTimeOut: 2 minutes <ul><li>Firefox </li></ul>network.dnsCacheExpiration: 1 minute network.dnsCacheEntries: 20 network.http.keep-alive.timeout: 5 minutes
    41. 41. Reducir el número de hostnames incluidos en el site.
    42. 42. Regla 10: Minimizar JavaScripts y CSS
    43. 43. OFUSCACIÓN <ul><li>Técnica alternativa a la minimización. </li></ul><ul><li>Consigue mejores resultados (25% sobre 21% de la minimización). </li></ul><ul><li>Problemas: </li></ul><ul><ul><li>Es más complejo que la minimización </li></ul></ul><ul><ul><li>Necesita revisarse. </li></ul></ul><ul><ul><li>Dificultad para debugar. </li></ul></ul>
    44. 44. OFUSCACIÓN <ul><li>Resultados </li></ul>http://crockford.com/javascript/jsmin http://dojotoolkit.org/
    45. 45. Resultados: reglas 6 - 10
    46. 46. Regla 11: Evitar redirecciones
    47. 47. Redirects <ul><li>Los Redirects hacen las páginas más lentas. </li></ul><ul><li>Existen diferentes razones para implementar redirects: rediseño de un sitio web, registrar trazas de tráfico, crear URLs fáciles de recordar, etc. </li></ul><ul><li>Tipos de Redirects: </li></ul><ul><ul><li>300 Multiple Choices </li></ul></ul><ul><ul><li>301 Moved Permanently </li></ul></ul><ul><ul><li>302 Moved Temporarily </li></ul></ul><ul><ul><li>303 See Other (clarification of 302) </li></ul></ul><ul><ul><li>304 Not Modified *** </li></ul></ul><ul><ul><li>305 Use Proxy </li></ul></ul><ul><ul><li>306 (no longer used) </li></ul></ul><ul><ul><li>307 Temporary Redirect (clarification of 302) </li></ul></ul><ul><li>Otros tipos de Redirects: </li></ul><ul><ul><li>La cabecera meta que redirecciona al cabo de unos segundo </li></ul></ul><ul><ul><li><meta http-equiv=&quot;refresh&quot; content=&quot;0; url=http://www.impok.com&quot;> </li></ul></ul><ul><ul><li>Javascript: modificando el valor de document.location </li></ul></ul>
    48. 48. Redirects <ul><li>Los Redirects se utilizan típicamente con las peticiones del documento HTML, pero también se pueden encontrar para obtener componentes de la web. </li></ul>
    49. 49. Usos y Alternativas de los Redirects <ul><li>Ausencia de la barra / al final de la URL y URL bonitas </li></ul><ul><ul><li>Razones para enviar un redirect cuando la barra final / no esté en la URL: </li></ul></ul><ul><ul><ul><li>Permite el autoindexado (páginas por defecto). </li></ul></ul></ul><ul><ul><ul><li>Permite recuerar URLs relativas al directorio actual. </li></ul></ul></ul><ul><ul><li>Las soluciones que se plantean para evitar estos redirects se basan en la configuración del servidor web. </li></ul></ul><ul><li>Conectar Sitios Web </li></ul><ul><ul><li>Es bastante común cambiar de sitio web para lo que se suelen usar redirects. </li></ul></ul><ul><ul><li>Existen sitios web que redireccionan a una página web u otra según el navegador que se use. </li></ul></ul><ul><ul><li>Las soluciones que se plantean para evitar estos redirects se basan en la configuración del servidor web. </li></ul></ul>
    50. 50. Evitar Redirects <ul><li>Registrar trazas de tráfico. </li></ul><ul><ul><li>Se realizan redirects a una página que registra el log de la traza y luego está redirecciona a la página correspondiente. </li></ul></ul><ul><ul><li>Para tráfico interno: </li></ul></ul><ul><ul><ul><li>Se evitan estos redirects registrando en la página a la que se quiere ir el log de la traza mediante el uso de Referer . </li></ul></ul></ul><ul><ul><li>Para tráfico a páginas externas: </li></ul></ul><ul><ul><ul><li>Se evitan los redirects con el uso de un beacon , una petición HTTP que contiene la información de la traza en la URL </li></ul></ul></ul>
    51. 51. Regla 12: Eliminar Scripts duplicados
    52. 52. Scripts Duplicados <ul><li>Motivos por los que pueden aparecer scripts duplicados en una página web: </li></ul><ul><ul><li>Tamaño del equipo de desarrollo. </li></ul></ul><ul><ul><li>Número de scripts que tiene la página. </li></ul></ul>
    53. 53. Scripts Duplicados <ul><li>Tener scripts duplicados en una página web empeoran el rendimiento porque: </li></ul><ul><ul><li>Se realizan peticiones HTTP innecesarias. </li></ul></ul><ul><ul><li>Se desperdicia tiempo de ejecución del script duplicado. </li></ul></ul>
    54. 54. Evitar Scripts Duplicados <ul><li>La solución es implementar un script management module . </li></ul><ul><li>El script management module debe encargarse de saber si el script ya está incluido. En el caso de que no esté incluido debe incluirlo y debe incluir también todas sus dependencias. </li></ul><ul><li>Hay que capturar las relaciones de dependencia de los scripts: </li></ul><ul><ul><li>En un sitio web sencillo se pueden mantener de forma manual. </li></ul></ul><ul><ul><li>En un sitio web más complejo hay que automatizar la generación de las dependencias escaneando los scripts. </li></ul></ul><ul><li>Es conveniente añadir la versión del script al nombre del fichero para que el script management module se encargue de incluir solo la versión correspondiente del script. </li></ul>
    55. 55. Regla 13: Configurar ETags
    56. 56. ¿Qué es un ETag? <ul><li>Los Entity tags son un mecanismo que utilizan el servidor web y los navegadors para validar los componentes cacheados de una web. </li></ul><ul><li>Un navegador se descarga los componentes de una web y los cachea. Mientras el componente tenga su fecha de expiración activa, el navegador lee el componente de disco. </li></ul><ul><li>Cuando la fecha de expiración caduca el navegador realiza una petición GET condicional ( conditional GET request ) para saber si el componente ha cambiado. </li></ul><ul><li>Si el componente no ha cambiado el servidor devuelve un código de estado “304 Not Modified” . </li></ul><ul><li>Si el componente ha cambiado el servidor lo devuelve. </li></ul>
    57. 57. ¿Qué es un ETag? <ul><li>Modos de saber si un componente ha cambiado: </li></ul><ul><ul><li>Comparando la fecha de última modificación </li></ul></ul><ul><ul><li>Comparando la fecha de última modificación </li></ul></ul>
    58. 58. Problema de los ETag’s <ul><li>Los ETag’s son más flexibles que el mecanismo que compara la última fecha de modificación ya que incluyen modificaciones que no tienen que ver con el componente en sí, como son las cabeceras. </li></ul><ul><li>El problema de los ETag’s es que se construyen usando atributos que lo hagan único en un servidor web. </li></ul><ul><li>Si una aplicación está distribuida en varios servidores, los Etag’s para un mismo componente que se encuentre en ambos servidores puede ser diferente y realizarse así la petición del componente varias veces. </li></ul>
    59. 59. Reconfigurar los ETag’s o eliminarlos <ul><li>Si la aplicación se encuentra solamente en un servidor no hay problema. </li></ul><ul><li>Pero si una aplicación se encuentra distribuida en varios servidores habría que reconfigurar la generación de los ETag’s o simplemente eliminarlos. </li></ul><ul><li>Dependiendo del servidor web que se utilice, esté inserta una información u otra propia del servidor. </li></ul><ul><li>Se puede personalizar la generación de los ETag’s para evitar que estos incluyan información propia del servidor. </li></ul><ul><li>Evitando esto, se obtiene prácticamente la misma información que mediante la última fecha de modificación, por lo que habría que plantearse simplemente eliminar la generación de los ETag’s. </li></ul>
    60. 60. ETag’s en el mundo real
    61. 61. Regla 14: Hacer el Ajax Cacheable
    62. 62. Web 2.0 <ul><li>“ El termino Web está comúnmente asociado con un fenómeno social, basado en la interacción que se logra a partir de diferentes aplicaciones web, que facilitan el compartir información, la interoperabilidad , el diseño centrado en el usuario y la colaboración en la World Wide Web” . </li></ul><ul><li>DHTML y Ajax son tecnologías para implementar estos conceptos. </li></ul><ul><li>Dynamic HTML permite modificar la representación HTML de una página después de que esta página se haya cargado. Esto es posible mediante JavaScript y CSS que interactuan con el DOM ( Document Object Model ). </li></ul><ul><li>Ajax es la tecnología usada en DHTML que permite interactuar al cliente con el servidor sin la necesidad de recargar la página. Ajax representa “ Asincrono JAvascript y Xml ”. </li></ul>
    63. 63. Ajax <ul><li>Es importante saber que “asíncrono” no implica “instantáneo”. </li></ul><ul><li>Ajax permite que mientras se realiza la petición asíncrona el usuario sigua visitando y realizando acciones sobre la página web. </li></ul><ul><li>Por lo que es necesario que las peticiones Ajax que se realicen sean óptimas. </li></ul><ul><li>Existen dos tipos de peticiones Ajax: </li></ul><ul><ul><li>Peticiones Pasivas: Están preparadas anticipando el futuro que se necesite. </li></ul></ul><ul><ul><li>Peticiones Activas: Se realizan cuando se necesita saber de la acción que realiza el usuario. </li></ul></ul>
    64. 64. Optimización de las peticiones Ajax <ul><li>Las técnicas que se pueden emplear para optimizar peticiones Ajax son las mismas que las reglas que se han descrito: </li></ul><ul><ul><li>Regla 4: Componentes Gzip </li></ul></ul><ul><ul><li>Regla 9: Busquedas DNS </li></ul></ul><ul><ul><li>Regla 10: Minimizar Javascript </li></ul></ul><ul><ul><li>Regla 11: Evitar Redirects </li></ul></ul><ul><ul><li>Regla 13: Etag’s </li></ul></ul><ul><li>Pero la regla más importante para la optimización de las peticiones activas Ajax es cachear las respuestas (Regla 3). </li></ul><ul><li>Cachear las peticiones Ajax es tan simple como modificar las cabeceras HTTP de la petición. </li></ul><ul><li>Pero la naturaleza dinámica y personalizada de la respuesta debe reflejarse en lo que se cachea. La mejor manera de hacer esto es mediante los parámetros de la query. </li></ul>
    65. 65. ¿Preguntas?

    ×