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?