High performance Web Sites

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 Requests

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 Network

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 Header

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

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)

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: Scripts al final de la página

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.

2 descargas paralelas por host. 4 descargas paralelas por host. 8 descargas paralelas por host.

Utilizar CNAMEs (alias DNS) para dividir sus componentes en múltiples hostnames.

JavaScripts bloquean la descarga paralela.

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.

Regla 7: Evitar expresiones CSS

¿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.

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>

Ejemplo de CSS Expression. http://stevesouders.com/hpws/expression-counter.php Ejemplo de One-Time Expression. http://stevesouders.com/hpws/onetime-expressions.php

Regla 8: Hacer Javascript y CSS externos

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.

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.

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.

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.

INTERNO / EXTERNO DINÁMICAMENTE

Ejemplo de Post-onload. http://stevesouders.com/hpws/post-onload.php Ejemplo de Dynamic Inlining . http://stevesouders.com/hpws/dynamic-inlining.php

Regla 9: Reducir búsquedas DNS

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

Internet Explorer DnsCacheTimeout: 30 minutes KeepAliveTimeout: 1 minute ServerInfoTimeOut: 2 minutes Firefox network.dnsCacheExpiration: 1 minute network.dnsCacheEntries: 20 network.http.keep-alive.timeout: 5 minutes

Reducir el número de hostnames incluidos en el site.

Regla 10: Minimizar JavaScripts y CSS

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.

OFUSCACIÓN Resultados http://crockford.com/javascript/jsmin http://dojotoolkit.org/

Regla 11: Evitar redirecciones

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

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.

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.

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

Regla 12: Eliminar Scripts duplicados

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.

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.

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.

¿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.

¿Qué es un ETag? Modos de saber si un componente ha cambiado: Comparando la fecha de última modificación 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.

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.

Regla 14: Hacer el Ajax Cacheable

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 ”.

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.

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.

High performance Web Sites

Más contenido relacionado

La actualidad más candente (17)

Destacado (7)

Similar a High performance Web Sites (20)

Último (20)

High performance Web Sites

Notas del editor