High performance Web Sites
-
Upload
openfinancedev -
Category
Technology
-
view
18 -
download
0
description
Transcript of High performance Web Sites
![Page 1: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/1.jpg)
1
![Page 2: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/2.jpg)
El 80% del tiempo de carga de un sitio web se debe principalmente a los siguientes componentes:◦ Javascript◦ CSS◦ Imágenes◦ Flash
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.
MOTIVACIÓN
![Page 3: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/3.jpg)
Regla 1: Reducir HTTP Regla 1: Reducir HTTP RequestsRequests
3
![Page 4: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/4.jpg)
Asociar múltiples urls a una sola imagen La imagen se divide en varias áreas con diferentes
direcciones
Ejemplo ASP.NET:<asp:ImageMap ID="ImageMap1" runat="server" Height="220px" ImageUrl="~/Menu.gif"
Width="420px">
<asp:RectangleHotSpot Bottom="220" HotSpotMode="Navigate" NavigateUrl="~/Productos.aspx" Right="140" AlternateText="Productos" />
<asp:RectangleHotSpot Bottom="220" HotSpotMode="Navigate" Left="141" NavigateUrl="~/Carteras.aspx" Right="280" AlternateText="Cartera" />
<asp:RectangleHotSpot Bottom="220" HotSpotMode="Navigate" Left="281" NavigateUrl="~/Contacto.aspx" Right="420" AlternateText="Contacto" />
</asp:ImageMap>
Problema: tedioso y posibilidad de error al crearlo Solución: CSS Sprites.
UTILIZAR IMAGE MAPS
![Page 5: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/5.jpg)
Combinar múltiples imágenes en una sola
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.
Ejemplos: http://www.w3schools.com/css/css_image_sprites.asp
UTILIZAR CSS SPRITES
![Page 6: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/6.jpg)
Incrustar la imagen en la página usando data: Url Scheme.
Problema: No soportado por IE. Ejemplo:
<IMG ALT="Red Star"
SRC="data:image/gif;base64,R0lGODlhDAAMALMLAPN8ffBiYvWW
lvrKy/FvcPewsO9VVfajo+w6O/zl5estLv/8/AAAAAAAAAAAAAAAACH5BAEA
AAsALAAAAAAMAAwAAAQzcElZyryTEHyTUgknHd9xGV+qKsYirKkwDYiKDBia
tt2H1KBLQRFIJAIKywRgmhwAIlEEADs=">
UTILIZAR INLINE IMAGES
![Page 7: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/7.jpg)
Incluir jscript y css que se utilizan en la misma página en un único fichero.
Lo ideal es un fichero .js y otro .css por página.
Problema: unificar los ficheros complica el desarrollo.
Solución: Desarrollar proceso que combine los archivos para generar los que necesitan las páginas.
UNIFICAR SCRIPTS Y CSS
![Page 8: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/8.jpg)
Regla 2: Content Delivery Regla 2: Content Delivery NetworkNetwork
8
![Page 9: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/9.jpg)
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...).
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.
Problema: Coste muy elevado para pequeñas empresas.
UTILIZAR CDN
![Page 10: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/10.jpg)
Regla 3: Añadir Expires HeaderRegla 3: Añadir Expires Header
10
![Page 11: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/11.jpg)
Para los archivos estáticos: implementar "Never expire" como Expires Header para las próximas visitas.
Para los archivos dinámicos: usa el Cache-Control Header más propiado para ayudar al navegador en las llamadas HTTP.
Usar un Expires Header permite que algunos componentes (scripts, hojas de estilo, imágenes, animaciones Flash,etc.) se guarden en la cache del navegador.
Ej: Expires: Thu, 16 Apr 2011 20:00:00 GMT
Problema: Actualización de recursos Solución: Utilizar versiones en .js, .css
La mejora es útil si el usuario visita con frecuencia el sitio web.
EXPIRES HEADER
![Page 12: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/12.jpg)
Regla 4: Componentes GzipRegla 4: Componentes Gzip
12
![Page 13: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/13.jpg)
A partir de HTTP/1.1, los navegadores web permiten el soporte para compresion con la cabecera Accept-Encoding en la petición HTTP.
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.
Content-Encoding: gzip. Es el más utilizado. Apache (mod_gzip, mod_deflate) / IIS (PipeBoost,
VIGOS o Hyperspace)
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.
COMPONENTES GZIP
![Page 14: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/14.jpg)
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.
PROXY CACHE (I)
![Page 15: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/15.jpg)
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.
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.
Solución: Vary Header en el Response (Vary: Accept-Encoding). Se mantendrán las dos versiones.
Sporte gzip para IIS: utilizar User-Agent para indicar versiones del navegador.
PROXY CACHE (II)
![Page 16: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/16.jpg)
Regla 5: CSSRegla 5: CSS en la cabecera en la cabecera
16
![Page 17: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/17.jpg)
Poner las hojas de estilo al principio de la página permite que se renderice progresivamente.
Poner en el Head utilizando LINK tag.
CSS
![Page 18: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/18.jpg)
Regla 6:Regla 6:Scripts al final de la Scripts al final de la
páginapágina
18
![Page 19: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/19.jpg)
DESCARGAS PARALELAS
• HTTP/1.1: sugiere que los navegadores descarguen 2 componentes por host.
• network.http.max-persistent-connections-per-server = 6 (Firefox 3.6.3).
• 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.
19
![Page 20: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/20.jpg)
2 descargas paralelas por host.
4 descargas paralelas por host.
8 descargas paralelas por host.
20
![Page 21: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/21.jpg)
Utilizar CNAMEs (alias DNS) para dividir sus componentes en múltiples hostnames.
21
![Page 22: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/22.jpg)
JavaScripts bloquean la descarga paralela.
22
![Page 23: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/23.jpg)
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.
23
![Page 24: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/24.jpg)
Regla 7:Regla 7:Evitar expresiones CSSEvitar expresiones CSS
24
![Page 25: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/25.jpg)
• ¿Qué son?Una manera de establecer propiedades CSS de forma
dinámica.
EXPRESIONES CSS
Width: expression(document.body.clientWidth < 600 ? “600px” : “auto”);• ¿Inconvenientes?
- Solo funcionan con Internet Explorer 5 y superior.
- El resto de navegadores ignoran las expresiones CSS.
- 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.
25
![Page 26: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/26.jpg)
26
SOLUCIÓN
• One-Time Expressions
<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>
![Page 27: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/27.jpg)
27
SOLUCIÓN
• Event Handlers
![Page 28: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/28.jpg)
28
Ejemplo de CSS Expression.
http://stevesouders.com/hpws/expression-counter.php
Ejemplo de One-Time Expression.
http://stevesouders.com/hpws/onetime-expressions.php
![Page 29: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/29.jpg)
29
Regla 8:Regla 8:Hacer Javascript y CSS Hacer Javascript y CSS
externosexternos
![Page 30: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/30.jpg)
30
JS/CSS EXTERNOS vs JS/CSS INTERNOS
• INTERNO
Es aconsejable para sites con pocas páginas visitadas por usuario.
• EXTERNO
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.
![Page 31: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/31.jpg)
31
JAVASCRIPT/CSS EXTERNOS
• UN SOLO ARCHIVO
• VARIOS ARCHIVOS
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.
![Page 32: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/32.jpg)
32
JAVASCRIPT/CSS INTERNOS
• Páginas HOME
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.
![Page 33: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/33.jpg)
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.
![Page 34: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/34.jpg)
34
EJEMPLO POST-ONLOAD
![Page 35: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/35.jpg)
35
INTERNO / EXTERNO DINÁMICAMENTE
![Page 36: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/36.jpg)
36
Ejemplo de Post-onload.
http://stevesouders.com/hpws/post-onload.php
Ejemplo de Dynamic Inlining.
http://stevesouders.com/hpws/dynamic-inlining.php
![Page 37: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/37.jpg)
37
Regla 9:Regla 9:Reducir búsquedas DNSReducir búsquedas DNS
![Page 38: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/38.jpg)
38
TTLs & DNS CACHING
Cada petición DNS del navegador tarda entre 20-120 ms.
• Cache DNS
En un servidor del ISP.
En el sistema operativo (DNS Client Service).
En el propio navegador
![Page 39: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/39.jpg)
39
• TTLs
![Page 40: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/40.jpg)
40
• Internet Explorer
DnsCacheTimeout: 30 minutesKeepAliveTimeout: 1 minuteServerInfoTimeOut: 2 minutes
• Firefox
network.dnsCacheExpiration: 1 minutenetwork.dnsCacheEntries: 20network.http.keep-alive.timeout: 5 minutes
![Page 41: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/41.jpg)
41
Reducir el número de hostnames incluidos en el site.
![Page 42: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/42.jpg)
42
Regla 10:Regla 10:Minimizar JavaScripts y CSSMinimizar JavaScripts y CSS
![Page 43: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/43.jpg)
43
OFUSCACIÓN
• Técnica alternativa a la minimización.
•Consigue mejores resultados (25% sobre 21% de la minimización).
•Problemas: Es más complejo que la minimización
Necesita revisarse.
Dificultad para debugar.
![Page 44: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/44.jpg)
44
OFUSCACIÓN
• Resultados
http://crockford.com/javascript/jsmin
http://dojotoolkit.org/
![Page 45: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/45.jpg)
45
Resultados: reglas 6 - 10Resultados: reglas 6 - 10
![Page 46: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/46.jpg)
Regla 11:Regla 11:Evitar redireccionesEvitar redirecciones
46
![Page 47: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/47.jpg)
Redirects
• Los Redirects hacen las páginas más lentas.
•Existen diferentes razones para implementar redirects: rediseño de un sitio web, registrar trazas de tráfico, crear URLs fáciles de recordar, etc.
•Tipos de Redirects: 300 Multiple Choices 301 Moved Permanently 302 Moved Temporarily 303 See Other (clarification of 302) 304 Not Modified *** 305 Use Proxy 306 (no longer used) 307 Temporary Redirect (clarification of 302)
• Otros tipos de Redirects:• La cabecera meta que redirecciona al cabo de unos segundo
<meta http-equiv="refresh" content="0; url=http://www.impok.com">• Javascript: modificando el valor de document.location
47
![Page 48: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/48.jpg)
Redirects
• Los Redirects se utilizan típicamente con las peticiones del documento HTML, pero también se pueden encontrar para obtener componentes de la web.
48
![Page 49: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/49.jpg)
Usos y Alternativas de los Redirects• Ausencia de la barra / al final de la URL y URL bonitas
• Razones para enviar un redirect cuando la barra final / no esté en la URL:
• Permite el autoindexado (páginas por defecto).• Permite recuerar URLs relativas al directorio actual.
• Las soluciones que se plantean para evitar estos redirects se basan en la configuración del servidor web.
• Conectar Sitios Web
• Es bastante común cambiar de sitio web para lo que se suelen usar redirects.• Existen sitios web que redireccionan a una página web u otra según el navegador que se use.• Las soluciones que se plantean para evitar estos redirects se basan en la configuración del servidor web.
49
![Page 50: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/50.jpg)
Evitar Redirects
• Registrar trazas de tráfico.
•Se realizan redirects a una página que registra el log de la traza y luego está redirecciona a la página correspondiente.
• Para tráfico interno: • 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.
• Para tráfico a páginas externas:• 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
50
![Page 51: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/51.jpg)
Regla 12:Regla 12:Eliminar Scripts Eliminar Scripts
duplicadosduplicados
51
![Page 52: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/52.jpg)
Scripts Duplicados
• Motivos por los que pueden aparecer scripts duplicados en
una página web:
Tamaño del equipo de desarrollo.
Número de scripts que tiene la página.
52
![Page 53: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/53.jpg)
Scripts Duplicados
• Tener scripts duplicados en una página web empeoran el
rendimiento porque:
Se realizan peticiones HTTP innecesarias.
Se desperdicia tiempo de ejecución del script duplicado.
53
![Page 54: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/54.jpg)
Evitar Scripts Duplicados
• La solución es implementar un script management module.
• 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.
•Hay que capturar las relaciones de dependencia de los scripts:
En un sitio web sencillo se pueden mantener de forma
manual.
En un sitio web más complejo hay que automatizar la
generación de las dependencias escaneando los scripts.
• 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.
54
![Page 55: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/55.jpg)
Regla 13:Regla 13:Configurar ETagsConfigurar ETags
55
![Page 56: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/56.jpg)
¿Qué es un ETag?
• Los Entity tags son un mecanismo que utilizan el servidor web y los navegadors para validar los componentes cacheados de una web.
• 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.
• 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.
• Si el componente no ha cambiado el servidor devuelve un código de estado “304 Not Modified”.
•Si el componente ha cambiado el servidor lo devuelve.
56
![Page 57: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/57.jpg)
¿Qué es un ETag?
• Modos de saber si un componente ha cambiado:
Comparando la fecha de última modificación
57
Comparando la fecha de última modificación
![Page 58: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/58.jpg)
Problema de los ETag’s
• 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.
•El problema de los ETag’s es que se construyen usando atributos que lo hagan único en un servidor web.
• 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.
58
![Page 59: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/59.jpg)
Reconfigurar los ETag’s o eliminarlos
• Si la aplicación se encuentra solamente en un servidor no hay problema.
• 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.
• Dependiendo del servidor web que se utilice, esté inserta una información u otra propia del servidor.
• Se puede personalizar la generación de los ETag’s para evitar que estos incluyan información propia del servidor.
• 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.
59
![Page 60: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/60.jpg)
ETag’s en el mundo real
60
![Page 61: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/61.jpg)
Regla 14:Regla 14:Hacer el Ajax CacheableHacer el Ajax Cacheable
61
![Page 62: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/62.jpg)
Web 2.0
• “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”.
•DHTML y Ajax son tecnologías para implementar estos conceptos.
• 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).
• 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”.
62
![Page 63: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/63.jpg)
Ajax
• Es importante saber que “asíncrono” no implica “instantáneo”.
• Ajax permite que mientras se realiza la petición asíncrona el usuario sigua visitando y realizando acciones sobre la página web.
•Por lo que es necesario que las peticiones Ajax que se realicen sean óptimas.
•Existen dos tipos de peticiones Ajax:
• Peticiones Pasivas: Están preparadas anticipando el
futuro que se necesite.
•Peticiones Activas: Se realizan cuando se necesita saber
de la acción que realiza el usuario.
63
![Page 64: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/64.jpg)
Optimización de las peticiones Ajax• Las técnicas que se pueden emplear para optimizar peticiones Ajax son las mismas que las reglas que se han descrito:
• Regla 4: Componentes Gzip• Regla 9: Busquedas DNS• Regla 10: Minimizar Javascript• Regla 11: Evitar Redirects• Regla 13: Etag’s
•Pero la regla más importante para la optimización de las peticiones activas Ajax es cachear las respuestas (Regla 3).
• Cachear las peticiones Ajax es tan simple como modificar las cabeceras HTTP de la petición.
• 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.
64
![Page 65: High performance Web Sites](https://reader033.fdocuments.es/reader033/viewer/2022061111/54542ac9af795987748b6d5a/html5/thumbnails/65.jpg)
¿Preguntas?¿Preguntas?