High performance Web Sites
-
Upload
openfinancedev -
Category
Technology
-
view
18 -
download
0
description
Transcript of High performance Web Sites
1
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
Regla 1: Reducir HTTP Regla 1: Reducir HTTP RequestsRequests
3
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
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
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
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
Regla 2: Content Delivery Regla 2: Content Delivery NetworkNetwork
8
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
Regla 3: Añadir Expires HeaderRegla 3: Añadir Expires Header
10
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
Regla 4: Componentes GzipRegla 4: Componentes Gzip
12
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
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)
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)
Regla 5: CSSRegla 5: CSS en la cabecera en la cabecera
16
Poner las hojas de estilo al principio de la página permite que se renderice progresivamente.
Poner en el Head utilizando LINK tag.
CSS
Regla 6:Regla 6:Scripts al final de la Scripts al final de la
páginapágina
18
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
2 descargas paralelas por host.
4 descargas paralelas por host.
8 descargas paralelas por host.
20
Utilizar CNAMEs (alias DNS) para dividir sus componentes en múltiples hostnames.
21
JavaScripts bloquean la descarga paralela.
22
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
Regla 7:Regla 7:Evitar expresiones CSSEvitar expresiones CSS
24
• ¿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
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>
27
SOLUCIÓN
• Event Handlers
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
Regla 8:Regla 8:Hacer Javascript y CSS Hacer Javascript y CSS
externosexternos
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.
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.
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.
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
EJEMPLO POST-ONLOAD
35
INTERNO / EXTERNO DINÁMICAMENTE
36
Ejemplo de Post-onload.
http://stevesouders.com/hpws/post-onload.php
Ejemplo de Dynamic Inlining.
http://stevesouders.com/hpws/dynamic-inlining.php
37
Regla 9:Regla 9:Reducir búsquedas DNSReducir búsquedas DNS
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
39
• TTLs
40
• Internet Explorer
DnsCacheTimeout: 30 minutesKeepAliveTimeout: 1 minuteServerInfoTimeOut: 2 minutes
• Firefox
network.dnsCacheExpiration: 1 minutenetwork.dnsCacheEntries: 20network.http.keep-alive.timeout: 5 minutes
41
Reducir el número de hostnames incluidos en el site.
42
Regla 10:Regla 10:Minimizar JavaScripts y CSSMinimizar JavaScripts y CSS
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.
44
OFUSCACIÓN
• Resultados
http://crockford.com/javascript/jsmin
http://dojotoolkit.org/
45
Resultados: reglas 6 - 10Resultados: reglas 6 - 10
Regla 11:Regla 11:Evitar redireccionesEvitar redirecciones
46
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
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
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
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
Regla 12:Regla 12:Eliminar Scripts Eliminar Scripts
duplicadosduplicados
51
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
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
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
Regla 13:Regla 13:Configurar ETagsConfigurar ETags
55
¿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
¿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
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
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
ETag’s en el mundo real
60
Regla 14:Regla 14:Hacer el Ajax CacheableHacer el Ajax Cacheable
61
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
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
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
¿Preguntas?¿Preguntas?