Aumenta tu rendimiento web con YSlow

Gracias a las 34 reglas de YSlow puedes mejorar el rendimiento de tu web y hacerla

considerablemente mas rpida. Las 34 normas se dividen en 7 categoras.
Clica sobre la categora que deseas repasar:

Contenido
Servidor
Cookie
CSS
Javascript
Imgenes
Mviles
Todo

Haz pocas llamadas HTTP

Categora: Contenido
El 80% del tiempo de respuesta de una pgina web se emplea en las llamadas. La mayor
parte de este tiempo est vinculada en la descarga de todos los componentes en la
pgina: imgenes, hojas de estilo, scripts, flash, etc. Reducir el nmero de componentes,
a su vez, reduce el nmero de peticiones HTTP necesarias para hacer la pgina. Esta es
la clave fundamental de la rapidez de la pgina.
Una forma de reducir el nmero de componentes en la pgina es simplificar el diseo de
la misma. Hay maneras de construir las pginas con el mismo diseo pero con menor
nmero de peticiones HTTP, he aqu algunas tcnicas para reducir el nmero de
llamadas HTTP manteniendo un diseo rico.
La unin de archivos es una manera de reducir el nmero de peticiones HTTP
mediante la combinacin de todos los scripts en una nica secuencia de comandos, y
tambin la combinacin de todos los CSS en una sola hoja de estilos. La combinacin
de los archivos es ms difcil cuando los javascripts y las hojas de estilo varan de una
pgina a otra, pero el proceso mejora los tiempos de carga.
Los CSS Sprites son un mtodo de referencia para reducir el nmero de imagenes
unificandolas en una nica. Combinando las imagenes de fondo con las propiedades
background-position y background-image puedes mostrar trozos dse una misma

imagen haciendo que todas las imagenes principales de la web se llamen de una sola
vez.
Los Image maps combinan varias imgenes en una sola. El tamao total es de
aproximadamente el mismo, pero la reduccin del nmero de peticiones HTTP acelera
la pgina. El mapa de imagenes slo funcionar si las imgenes son contiguas, como
una barra de navegacin. La creacin de un mapa de imagenes puede ser tedioso y
propenso a errores. El uso de esta tcnica no es recomendable para la navegacin, elija
CSS Sprites antes.
Imgenes utilizar los datos: URL scheme incrustar los datos de la imagen en la pgina
real. Esto puede aumentar el tamao de su documento HTML. La combinacin de
imgenes en su (en cach) las hojas de estilo es una manera de reducir las peticiones
HTTP y evitar el aumento del tamao de sus pginas. Imgenes an no se han apoyado
en todos los principales navegadores.
Reducir el nmero de peticiones HTTP de su web es muy efectivo. Esta es la norma
ms importante para mejorar el rendimiento por primera vez los visitantes. Como se
describe Tenni Theurer en su blog, Browser Cache Usage - Exposed!, el 40-60% de los
visitantes diarios llegan a su site con un cach vaco. Mejorar el tiempo de carga de
estos primeros visitantes es clave para una mejor experiencia del usuario.
top

Use a Content Delivery Network

Categora: Servidor
La proximidad del usuario a su servidor web tiene un impacto sobre los tiempos de
respuesta. El despliegue de su contenido a travs de mltiples servidores dispersos
geogrficamente har que sus pginas se carguen ms rpido desde la perspectiva del
usuario. Pero por dnde debe empezar?
Como primer paso para aplicar esta tcnica, no intente redisear su aplicacin web para
trabajar en una arquitectura distribuida. Dependiendo de la aplicacin, la modificacin
de la arquitectura podra incluir enormes tareas como la sincronizacin del estado de la
sesin y replicar la base de datos del servidor a travs de transacciones lugares. Los
intentos de reducir la distancia entre los usuarios y su contenido podra retrasarse, o que
pase nunca, esta aplicacin arquitectura paso.
Recuerde que el 80-90% de los visitantes pierden tiempo mientras se descargan todos
los componentes en la pgina: imgenes, hojas de estilo, scripts, Flash, etc. sta es la la
regla de oro del rendimiento. En lugar de comenzar con la tediosa prtica de redisear
la arquitectura de su aplicacin, es mejor deplegar primero el contenido esttico. sto
aparte de conllevar una fantstica reduccin del tiempo de descarga, se facilita gracias a
las Content Delivery Network.
Una Content Delivery Network (CDN) es un grupo de servidores web distribuidos en
varias ubicaciones para ofrecer contenidos de manera ms eficiente a los usuarios. El
servidor seleccionado para la entrega de contenido a un usuario concreto es tpicamente

basado en una medida de aproximacin. Por ejemplo, el servidor con el menor nmero
de saltos o el servidor con ms rpida respuesta es el elegido.
Algunas empresas poseen sus propias CDN, dado que es menos costoso que usar un
proveedor del servicio, como Akamai Technologies, Mirror Image Internet, o Limelight
Networks. Para los sitios web de pequeas empresas pblicas o privadas, el costo del
servicio CDN puede ser prohibitivo, pero dado que su objetivo principal es crecer y
abarcar cada vez ms audiencia, una CDN es necesaria para lograr una rpida respuesta.
En Yahoo!, el contenido esttico de nuestras aplicaciones se traslad desde nuestros
servidores a una CDN, lo cual mejor el tiempo de respuesta a los usuarios en un 20% o
ms. El cambio a una CDN es relativamente fcil, lo que mejorar dramticamente la
velocidad de su sitio web.
top

Agrega un Expires o Cache-Control Header

Categora: Servidor
Esta norma tiene dos sencillos objetivos:

Para los archivos estticos: implementar "Never expire" como Expires Header
para las prximas visitas
Para los archivos dinmicos: usa el Cache-Control Header mas apropiado para
ayudar al navegador en las llamadas HTTP.

Los diseos de las pginas web se enriquecen cada vez ms, lo cual representa ms
scripts, hojas de estilo, imgenes y animaciones Flash en el contenido. Una visita por
primera vez a la pgina puede contener muchas llamadas HTTP, pero usando un Header
Expires permitir que esos componentes se guardarden en la cache. Esto evita llamadas
HTTP innecesarias en subsecuentes visitas. Los Expires Headers se usan muy a menudo
con las imgenes, pero se debera usar con todos los componentes incluyendo scripts,
hojas de estilo y animaciones Flash.
Los navegadores (y proxies) usan la cach para reducir el nmero y el tamao de las
peticiones HTTP, permitiendo que la pgina web cargue ms rpido. Un servidor web
utiliza las Expires Header en las respuestas HTTP para comunicarle al cliente cunto
tiempo puede estar un componente en la cach. sta es una Expires Header con mucha
duracin, dicindole al nevagdor que esta respuesta no caducar hasta el 15 de Abril del
2010.
Expires: Thu, 15 Apr 2010 20:00:00 GMT

Si tu servidor es Apache, use la directiva ExpiresDefault para determinar una fecha de

expiracin relativa a la fecha actual. Este ejemplo de la directiva ExpiresDefault
establece la fecha de exiracin a 10 aos a partir del momento de la peticin.
ExpiresDefault "access plus 10 years"

Recurdalo, si usas una Expires header con mucha duracin, debes cambiar el nombre
del archivo del componente cada vez que lo modifiques. En Yahoo! nosotros realizamos
este paso como parte del proceso de construccin: un nmero de versin es embebido en
el nombre del archivo, por ejemplo, yahoo_2.0.6.js.
Usando una Expires header de larga duracin, slo afecta a las pginas vistas despus
de que un usuario ha visitado su sitio. No tiene ningn efecto en el nmero de peticiones
HTTP cuando un usuario visita su sitio por primera vez y la cach del navegador est
vaca. Por lo tanto, la mejora del rendimiento depende en medida de la frecuencia en
que sus usuarios visitan sus pginas con una primed cache. (Una "primed cache" ya
contiene la totalidad de los componentes en la pgina.) Nosotros implantamos esta
medida en Yahoo! y encontramos que el nmero de pginas visistadas con una primed
cache es del 75-85%. El usar una Expires header de larga duracin, le incrementar el
nmero de componentes que son cacheables por el navegador y reutilizarlos en
posteriores visitas a la pgina, sin necesidad de enviar un solo byte al cliente.
top

Gzip Components
Categora: Servidor
El tiempo que le toma transferir una peticin HTTP y su respuesta a travs de la red
pueden ser reducirse significativamente por las decisiones tomadas por los ingenieros en
el "front-end". Es cierto que el ancho de banda, proveedor de Internet, proximidad a los
puntos de intercambio, etc. del usuario, estn fuera del control del equipo de desarrollo.
Pero hay otras variables que afectan los timepos de respuesta. La compresion reduce los
tiempos de respuesta al reducir el tamao de las peticiones HTTP.
A partir de HTTP/1.1, los navegadores web permiten el soporte para compresion con la
cabecera Accept-Encoding en la peticin HTTP.
Accept-Encoding: gzip, deflate

Si el servidor web visualiza esta cabecera en la peticin, puede comprimir la respuesta

usando uno de los mtodos listados por el client. El servidor web notifica al cliente a
travs de la cabecera Content-Encoding en la respuesta.
Content-Encoding: gzip

Gzip es el mtodo ms popular y efectivo de compresin en este momento. El mismo

fue desarrollado por el proyecto GNU y estandarizado por RFC 1952. El otro formato
de compresin que puede usar es Deflate, pero es menos efectivo y menos popular.
Comprimiendo con Gzip generalmente reduce el tamao de la respuesta hasta en un
70%. Aproximadamente el 90% del trfico en internet hoy en da viaja a travs de los
navegadores que especifican el soporte para Gzip. Si usas Apache, el mdulo de
configuracin de Gzip depende de la versin: Apache 1.3 usa mod_gzip mientras que
Apache 2.x usa mod_deflate.

Existen problemas conocidos con navegadores y proxies que pueden causar un

desequilibrio en lo que el navegador espera y lo que recibe en relacin con el contenido
comprimido. Afortunadamente, estos casos estn disminuyendo dado que el uso de
navegadores antiguos tambin disminuye Los mdulos de Apache ayudan aadiendo las
cabeceras apropidas automticamente.
Los servidores escogen qu comprimir, basado en el tipo de archivo, pero suelen ser
muy limitados en lo que deciden comprimir. Muchos sitios web comprimin sus
documentos HTML. Tambin es recomendable comprimir sus scripts y hojas de estilo,
pero muchos sitios web desaprovechan esta cualidad. De hecho, es til comprimir
cualquier texto incluyendo respuestas XML y JSON. Las imgenes y los documentos
PDF no deben ser tratados con Gzip ya que estos ya estn comprimidos. Intentar hacerlo
no slo desperdicia recursos del CPU, sino que incrementan el tamao del archivo.
Tratar con Gzip cuanto tipo archivo sea posible, es una excelente manera de reducir el
peso de la pgina y acelerar la carga para el usuario.
top

Colocar Hojas de estilo en la cabecera

Categora: CSS
Mientras investigbamos cmo aumentar el rendimiento en Yahoo!, decubrimos que
moviendo las hojas de estilo a la cabecera del documento, aparentemente las pginas
cargaban con ms rapidez. Esto se debe a que poner las hojas de estilo en la cabecera,
permita a la pgina renderizarse progresivamente.
Tras bastidores, los ingenieros se preocupan por el rendimiento deseado en una pgina
de carga progresiva; eso es, nosotros queremos desplegar en el navegador cualquier
contenido lo ms pronto posible. sto es especialmente importante en pginas con
mucho contenido con usuarios con una conexin lenta. La importancia de proporcionar
a los usuarios informacin visual, tales como indicadores de progreso, ha sido bien
investigada y documentada. En nuestro caso la misma pgina HTML es el indicador de
progreso!Cuando el navegador carga la pgina, aparece progresivamente la cabecera, la
barra de navegacin, el logotipo en la parte superior, etc. sirven como retroalimentacin
visual para el usuario que est a la espera. Esto mejora la experiencia del usuario.
El problema de poner las hojas de estilo en la parte inferior del documento es que se
anula la carga progresiva en muchos navegadores como Internet Explorer. Estos
navegadores bloquean el renderizado para evitar tener que redefinir los elementos de la
pgina si sus estilos cambian, el usuario estaria recibiendo una pgina en blanco.
La Especificacin HTML establece claramente que las hojas de estilo se incluirn en la
seccin HEAD de la pgina: "A diferencia de A, [LINK] slo pueden aparecer en la
seccin HEAD de un documento, aunque puede aparecer cualquier nmero de veces."
Ninguna de las alternativas, la pantalla en blanco o las animaciones flash sin estilos,
valen la pena arriesgarse. La solucin ptima es seguir la especificacin HTML y cargar
sus hojas de estilo en el HEAD.

top

Colocar scripts en el fondo

Categora: JavaScript
El problema causado por los scripts, es que bloquean las descargas paralelas. La
especificacin HTTP/1.1 sugiere que los navegadores descarguen no ms de dos
componentes en paralelo por servidor. Si usted sirve sus imgenes desde mltiples
servidores multiple hostnames, usted puede tener ms de dos descargas que se
produzcan en paralelo. Mientras un script est descargndose, sin embargo, el
navegador no iniciar otra descarga, incluso de diferentes servidores.
En algunas situaciones no es fcil mover los scripts al fondo. Si, por ejemplo, el script
utiliza document.write para insertar contenido en la pgina, no se lo puede mover ms
abajo. Tambin podran haber problemas de alcance. En muchos casos, hay formas de
soluciar estas situaciones.
Una sugerencia alternativa que a menudo surge es utilizar scripts en diferido. El atributo
indica que el scriptno contiene document.write, y es una pista para los
navegadores para que ellos puedan continuar trabajando. Desafortunadamente, Firefox
no soporta el atributo DEFER. En Internet Explorer, el script se lo puede diferir, pero no
tanto como se desea. En caso de que un script pueda ser diferido, tambin puede ser
trasladado a la parte inferior de la pgina. Que har que sus pginas web se carguen ms
rpido.
DEFER

top

Evitar Expresiones CSS

Categora: CSS
Las expresiones CSS son una poderosa (y peligrosa) manera de establecer propiedades
CSS dinmicamente. Estn soportadas por Internet Explorer, desde la versin 5. Como
por ejemplo, el color de fondo puede ser alternado cada hora usando expresiones CSS.
background-color: expression( (new Date()).getHours()%2 ?
"#B8D4FF" : "#F08A00" );

Como se muestra aqu, el mtodo expression acepta una expresin JavaScript. La

propiedad CSS se establece en el resultado de la evaluacin de la expresin JavaScript.
El mtodo expression es ignorado por otros navegadores, por lo que es til para
ajustar las propiedades de Internet Explorer necesarias para crear una experiencia
consistente a travs de navegadores.
El problema con las expresiones que son evaluadas ms frecuentemente de lo que la
mayoria de la gente espera. No slo son evaluadas cuando la pgina se renderiza y
redimensiona, sino que adems cuando la pgina es navegada e incluso cuando el
usuario mueve el cursor del ratn sobre la misma. Aadir un contador a la expresin

CSS nos permite monitorear cundo y como una expresin CSS es evaluada. Moviendo
el cursor del ratn alrededor de la pgina puede fcilmente generar ms de 10.000
evaluaciones.
Una forma de reducir el nmero de veces en que son evaluadas tus expresiones CSS es
usar una sola vez las expresiones, donde la primera vez en que la expresin se evala se
establece el estilo de propiedad a un valor explcito, que sustituye a la expresin CSS. Si
el estilo de propiedad debe ser dinmico durante toda la vida til de la pgina, se puede
enfocar una alternativa con eventos en lugar de las expresiones CSS. Si es irreversible el
utilizar expresiones CSS, recuerde que pueden ser evaluadas en miles de veces y podra
afectar el rendimiento de su pgina.
top

JavaScript y CSS externo

Categora: JavaScript, CSS
Muchas de estas reglas de rendimiento refieren sobre cmo son gestionados los
componentes externos. Sin embargo, antes de estas consideraciones debera hacerse una
pregunta bsica: Deberan el cdigo JavaScript y los estilos CSS estar contenidos en
ficheros externos, o introducidos en la propia pgina?
El usar ficheros externos generalmente produce una carga rpida del documento, ya que
el cdigo JavaScript y los archivos CSS son guardados en el cach del navegador. Los
cdigos JavaScript y CSS que estn embebidos en el documento HTML son
descargados cada vez que el documento HTML es llamado. Esto reduce el nmero de
peticiones HTTP, pero incrementa el tamao del documento HTML. Por otro lado, si el
cdigo JavaScript y CSS estn en archivos externos cacheados por el navegador, el
tamao de el documento HTML es reducido sin incrementar el nmero de llamadas
HTTP.
El factor clave, entonces, es la frecuencia con la que el archivo externo JavaScript y
CSS son cacheados en relacin al numero de documentos HTML llamados. Este factor,
aunque difcil de cuantificar, se puede medir utilizando diversos. Si los usuarios en su
sitio tienen varias pginas vistas por sesin y muchas de sus pginas reutilizarn los
scripts y hojas de estilo your site, hay un mayor beneficio de los archivos externos
guardados en cach.
Muchos sitios web se enredan en medio de estos parmetros. Para estos sitios, la mejor
solucin generalmente es desarrollar el cdigo JavaScript y CSS en archivos externos.
La nica excepcin en donde el cdigo embebido es recomendable es en las pginas de
inicio, tales como el inicio de Yahoo! y My Yahoo!. Las pginas de inicio que tienen
pocas (por no decir slo una) visita por sesin pueden encontrar que embebiendo el
cdigo JavaScript y CSS resulta en una respuesta ms rpida.
Para las pginas de inicio que son comnmente la primera de muchas the first of many
page views, hay que aprovechar el embebido como una tcnica de reduccin de
peticiones HTTP, as como el beneficio obtenido mediante el almacenamiento en cach
de los archivos externos. Una de estas tcnicas es embeber javascript y CSS en la pgina

de inicio, salvo descargar dinmicamente los archivos externos luego de que la pgina
ha terminado de cargar. Las pginas de referencia a los archivos externos deberan estar
ya en la cach del navegador
top

Reducir bsquedas DNS

Categora: Contenido
El sistema de nombres de dominios (DNS) mapas hostnames a direcciones IP, as como
los directorios telefnicos en donde aparecen los nombres de las personas y su nmero
de telfono. Cuando usted escribe www.yahoo.com en su navegador, una resolucin de
DNS en contacto con el navegador devuelve la direccin IP del servidor. El DNS tiene
un costo. Que generalmente es de 20-120 milisegundos por DNS para encontrar la
direccin IP de un hostname dado. El navegador no puede descargar nada de este
hostname hasta que la bsqueda DNS se haya completado.
Las bsquedas DNS son cacheadas para mejor rendimiento. Este cacheo puede
acontecer en un servidor especial de cach, mantenido por el usuario del ISP o red de
rea local, pero tambin est el cacheo que ocurre en la computadora individual de cada
usuario. La informacin DNS queda en el cach de DNS del Sistema Operativo (el
"DNS Client service" en Microsoft Windows). Muchos navegdores tienen sus propias
caches, separadas de la cach del sistema operativo. En la medidad en que el navegador
guarda un registro DNS en su propia cach, ello no infiere al sistema operativo con una
peticin de ese registro.
Internet Explorer almacena en cach las bsquedas DNS por 30 minutes por defecto,
especificado la entrada del registro DnsCacheTimeout. Firefox cachea las bsquedas
DNS por 1 minuto, controlada por la opcin network.dnsCacheExpiration en la
configuracin del navegador. (Fasterfox cambia esto a 1 hora.)
Cuando la cach DNS del cliente est vaca (tanto en el navegador como en el sistema
operativo), el nmero de bsquedas DNS es igual al nmero de hostname nicos en la
pgina web. Esto incluye los hostnames usados en la pgina URL, imgenes, archivos
de script, hojas de estilo, animaciones Flash, etc. Reduciendo el nmero hostnames
nicos se reduce el nmero de bsquedas DNS.
Reduciendo el nmero de hostname nicos tiene el potencial de reducir la cantidad de
descargas parlelas que toman a lugar en la pgina. Evitando bsquedas DNS acorta los
tiempos de respuesta, pero reduciendo las descargas paralelas puede aumentarlos. Mi
preferencia es dividir estos componentes a travs de al menos dos, pero no ms de
cuatro hostnames. Esto resulta en un buen compromiso entre reducir las bsquedas DNS
y permitir un alto grado de descargas paralelas.
top

Minificar JavaScript y CSS

Categora: JavaScript, CSS

Minificacin es la prctica de eliminar el cdigo de caracteres innecesarios para reducir
su tamao, mejorando as los tiempos de carga. Cuando el cdigo es minimizado todos
los comentarios se eliminan, as como los espacios en blanco y caracteres innecesarios
(espacio, nueva lnea...). En el caso de JavaScript, esto mejora el tiempo de respuesta de
rendimiento debido a que el tamao del archivo descargado es reducido. Una importante
herramienta de compresin es el a
href="http://developer.yahoo.com/yui/compressor/">JSMin YUI Compresor. Tambin
puedes ver este interesante articulo donde explica como minizar el css de manera
manual.
La ofuscacin es una alternativa de optimizacin que se pueden aplicar al cdigo fuente.
Es ms complejo que la minificacin y, por tanto, ms posibilidades de generar errores.
En una encuesta de los diez principales sitios web de EE.UU., la minificacin alcanz
un 21% la reduccin de tamao frente a un 25% de la ofuscacin. A pesar de la
ofuscacin tiene mayor reduccin de tamao, minificar JavaScript es menos arriesgado.
Incluso si usted comprime con gzip sus archivos javascript y de estilo, minificarlos
podra reducir el tamao en un 5% o ms.
top

Evite las redirecciones

Categora: Contenido
Las redireciones web se consiguen utilizando los cdigos de estado 301 y 302. He aqu
un ejemplo de las cabeceras HTTP 301 en una respuesta:
HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html

El navegador automticamente lleva al usuario a la pgina especificada en el campo

Location. Toda la informacin necesaria para el redireccionamiento est en el
encabezado. A pesar de sus nombres, ni un archivo con 301 ni uno con 302 es cacheado
en la prctica a menos que tenga otras cabeceras, como Expires o Cache-Control. La
etiqueta meta refresh y JavaScript son otras formas de dirigir a los usuarios a una URL
diferente, pero si usted tiene que hacer un redireccionamiento, la tcnica preferida es
utilizar el estndar de cdigos de estado HTTP 3xx, principalmente para garantizar que
el botn Atrs funciona correctamente.
Lo principal a recordar es que redireciones frenan la experiencia del usuario. La
utilizacin de un redireccionamiento obliga al navegador a buscar nuevamente la pgina
web perdiendo un tiempo, a veces, notable.
Uno de los errores mas comunes de los desarrolladores y programadores web es colocar
urls a una carpeta sin la diagonal al final (/). Por ejemplo, si usted enlaza
http://astrology.yahoo.com/astrology desde su sitio web ver que le agrega

automaticamente "/" al final, dejandola as; http://astrology.yahoo.com/astrology/. Esto

se fija en Apache utilizando Alias o mod_rewrite, o la directiva DirectorySlash si
ests usando Apache handlers.
Conectar un sitio web viejo con uno nuevo es otra prctica comn para redirecciones.
Otras incluyen conectar diferentes partes de sitios weby redireccionar al usuario
basndose en ciertas condiciones (tipo de navegador, tipo de cuenta de usuario, etc).
Usar una redireccin para conectar dos sitios web es simple y requiere poco cdigo
adicional. Aunquq usando redirecciones en estas situaciones reduce la complejidad para
los desarrolladores, ello disminuye la experiencia del usuario. Alternativas para esto
incluyen el uso de redirecciones usando Alias y mod_rewrite si las dos rutas fsicas
del cdigo estn alojadas en el mismo servidor. Si un cambio del nombre de dominio es
la causa del uso de redirecciones, una alternativa es crear un CNAME (un registro DNS
que crea un alias apuntando desde uno de los dominios a otro) en combinacin con
Alias o mod_rewrite.
top

Remover Scripts Duplicados

Categora: JavaScript
Cmo afecta al rendimiento incluir el mismo javascript dos veces en una misma pgina.
Esto no es tan inusual como se cree. Una revisin del top 10 de los sitios de EE.UU.
revela que dos de ellos contienen scripts duplicados. Hay dos principales factores que
incrementan las probabilidades de que un script est duplicado en una pgina web:
tamao del equipo y el nmero de scripts. Cuando esto ocurre, los scripts duplicados
afectan el rendimiento creando peticiones HTTP innecesarias y desperdicia la ejecucin
del javascript.
Las llamadas HTTP innecesarias ocurren en internet explorer, mas no en firefox. En
Internet Explorer, si un script externo es incluido dos veces y no es cacheable, ello
genera dos llamadas HTTP durante la carga de la pgina. Incluso si el script es
cacheable, las peticiones extra ocurren cuando el usuario recarga la pgina.
Adems de generar un torrente de peticiones HTTP, se pierde tiempo evaluando el
script varias veces. Esta redundancia en la ejecucin del Javascript ocurre tanto en
firefox como en internet explorer, independientemente de que el script sea o no
caheable.
Una solucin para evitar accidentalmente incluir dos veces el mismo guin dos veces es
implementar un mdulo administrador de scripts en su sistema de plantillas. La forma
ms comn de incluir un script es mediante el uso de la etiqueta SCRIPT en su pgina
HTML.
<script type="text/javascript" src="menu_1.0.17.js"></script>

Una alternativa en php podra ser crear una funcin llamada insertScript.
<?php insertScript("menu.js") ?>

En adicin, para prevenir que el mismo script sea insertado varias veces, esta funcin
debera manejar otros temas con los scripts, tales como aadir el nmero de versin al
nombre del archivo para soportar Expires headers de larga duracin.
top

Configure ETags
Categora: Servidor
Entity tags (ETags) son un mecanismo que servidores y navegadores usan para
determinar si el componente guardado en la cach del navegador coincide con el del
servidor de origen. (Una "entidad" es otra palabra, un "componente": imgenes, scripts,
hojas de estilo, etc.) las ETags se han creado para proveer un mecanismo para validar
entidades, que es ms flexible que la fecha de modificacin. Una ETag es una cadena
que identifica de forma exclusiva una versin especfica de un componente. The only
format constraints are that the string be quoted. El servidor de origen especifica el
componente usando la cabecera ETag.
HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: "10c24bc-4ab-457e1c1f"
Content-Length: 12195

Luego, si el navegador tiene que validar un componente, utiliza la cabeceraIf-NoneMatch para traspasar la ETag de regreso al servidor de origen. Si la ETag enviada,
devuelve un cdigo 304 es retornada reduciendo la respuestaen 12195 bytes para este
ejemplo.
GET /i/yahoo.gif HTTP/1.1
Host: us.yimg.com
If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
If-None-Match: "10c24bc-4ab-457e1c1f"
HTTP/1.1 304 Not Modified

El problema con las ETags es que generalmente se construyen utilizando los atributos
que la hacen nica para un determinado sitio alojado en el servidor. Las ETags no
coincidirn cuando un navegador obtiene el componente original de un servidor y luego
intenta validar ese componente en un servidor distinto, una situacin que es muy comn
en sitios web que usan un grupo de servidores para manejar las peticiones. Por defecto,
tanto Apache como IIS embeben datos en la ETag que reducen drsticamente las
posibilidades de xito en la prueba de validez en sitios web con mltiples servidores.
El formato de la ETag para Apache 1.3 y 2.x es inode-size-timestamp. Aunque un
determinado archivo puede estar en el mismo directorio a travs de mltiples servidores,
y tener el mismo tamao, permisos, fecha, etc., su Inodo es diferente de un servidor a
otro.
IIS 5.0 y 6.0 tienen un problema similar con las ETags. El formato para las ETags en
IIS es Filetimestamp:ChangeNumber. Un ChangeNumber es un contador utilizado para
realizar un seguimiento track de los cambios en la configuracin de IIS. Es poco

probable que el ChangeNumber sea el mismo en todos los sitios web alojados en un
servidor IIS.
El resultado final es un ETags generado por Apache e IIS para el mismo componente no
coincidir de un servidor a otro.Si las ETags no coinciden, el usuario no recibe la
pequea respuesta 304 que las ETags han diseado; en cambio, se obtendr unas 200
respuestas normales con todos los datos del componente. Si usted aloja su sitio web en
un solo servidor, esto no es un problema. Pero si usted tiene mltiples servidores para
alojar su sitio web, y est usando Apache o IIS con la configuracin predeterminada de
las ETag, sus usuarios estarn ante pginas cada vez ms lentas, sus servidores tendrn
una sobrecarga, estar consumiendo mucho ancho de banda, y los proxies no estarn
caheando el contenido eficientemente. Incluso si sus componentes tienen una Expires
header de larga duracin, una solicitud GET condicional sigue siendo realizanda
siempre que el usuario presione Recargar o Refrescar.
Si usted no est tomando ventaja de la flexibilidad que proporciona el modelo de
validacin de las ETags, es mejor que simplemente retire la ETag completamente. La
cabecera Last-Modified header validates based on the component's timestamp. And
removing the ETag reduces the size of the HTTP headers in both the response and
subsequent requests. This Microsoft Support article describes how to remove ETags. In
Apache, this is done by simply adding the following line to your Apache configuration
file:
FileETag none

top

Hacer al Ajax cacheable

Categora: Contenido
Uno de los beneficios citados de Ajax es que provee de informacin visual instantnea
al usuario porque la informacin es trada asncrona desde el backend del servidor web.
Sin embargo, el uso de Ajax no garantiza que el usuario no se rascar la cabeza
esperando el retorno de las respuestas Asncronas de Javascript y XML. En muchas
aplicaciones, independientemente de si el usuario se mantendr o no en espera depende
de cmo se utiliza Ajax. Por ejemplo en un cliente de correo basado en web, el cliente
se mantendr en espera de los resultados de una peticin Ajaxpara encontrar todo los
mensajes de correo electrnico que coincidan con sus criterios de bsqueda. Es
importante recordar que"asncrono" no implica que sea "instantneo".
Para mejorar el rendimiento, es importante optimizar esas repuestas Ajax. La manera
ms importante para mejorar el rendimiento de Ajax es hacer que esas respuestas sean
cacheables como se discuti en Aadir una cabecera Expires o Cache-Control. Algunas
otras reglas aplican tambien a Ajax:

Componentes Gzip
Reducir bsquedas DBS
Simplificar Javascript
Evitar Redirecciones

Configurar las ETags

Veamos unm ejemplo. Un cliente de correo basado en web 2.0, puede usar Ajax para
descargar la libreta de direcciones del usuario para realizar un autocompletado. Si el
usuario no ha modificado su libreta de direcciones desde la ltima vez que el usuario
us la aplicacin, la anterior libreta de direcciones podra ser leda desde la cach si esa
respuesta Ajax fue hecha cacheable con una cabecera Expires o Cache-Control de larga
duracin. El navegador debe ser informado de cundo utilizar una libreta de direcciones
guardada en cach versus solicitar una nueva. Esto podra hacerse mediante la adicin
de una fecha a la libreta de direcciones indicando la ltima vez que el usuario modific
su libreta de direcciones, por ejemplo &t=1190241612. Si la libreta de direcciones no ha
sido modificada desde la ltima descarga, la fecha deber ser la misma y la libreta de
direcciones ser leda desde la cache del navegador eliminando una peticin HTTP
extra. Si el usuario ha modificado su libreta de direcciones, la fecha indica que la nueva
URL no se asemeja a la respuesta guardada, as el navegador solicitar las entradas
actualizadas.
Aunque sus respuestas Ajax responses sean creadas dinmicamente, y pueden ser
aplicables a un usuario en particular, an pueden ser cacheadas. Haciendo as, har que
sus aplicaciones Web 2.0 apps sean ms rpidas.
top

Vaciar el Buffer temprano

Categora: Servidor
Cuando los usuarios solicitan una pgina, se puede tomar de 200 a 500 milisegundos
para el servidor crear el cdigo html. Durante este tiempo, el navegador est inactivo ya
que espera la llegada de los datos. En PHP tienes la funcin flush(). La que te permite
enviar una respuesta HTML parcialmente lista al navegador as el navegador puede
comenzar a buscar los componentes mientras que en el fondo est ocupado con el resto
de la pgina HTML. El beneficio se encuentra principalmente en fondos ocupados o
portadas ligeras.
Un buen lugar para considerar esto es inmediatamente despus de la cabecera, es
generalmente ms fcil de producir y permite incluir cualquier cualquier archivo CSS o
Javascript para que el navegador comienze a buscar en paralelo mientras en el fondo
est aun procesando.
Example:
... <!-- css, js -->
</head>
<?php flush(); ?>
<body>
... <!-- content -->

Yahoo! search pioneered research and real user testing to prove the benefits of using
this technique.
top

Usar GET para peticiones AJAX

Categora: Servidor
El equipo de Yahoo! Mail que cuando se usaba XMLHttpRequest, el POST es
implementado en los navegadores en un proceso de dos pasos: enviando las cabeceras
primero, luego se envan los datos. Por lo tanto es mejor usar GET, el cual solo envia un
paquete (a menos que tengas un montn de cookies). La longitud mxima en Internet
Explorer es de 2kb, de modo que si necesitas enviar mas de 2kb no ser capaz de usar
GET.
Un lado interesante es que el envio mediante POST sin ningn dato, hace que se
comporte como GET. Basado en las especificaciones HTTP, GET es para recuperar la
informacin, as tiene sentido (semnticamente) el usar GET slo para la solicitudes de
datos, a diferencia del envio de datos para ser guardados en el servidor.
top

Retrasar la carga de componentes

Categora: Contenido
Usted puede ver ms de cerca su pgina y preguntarse: "Qu es absolutamente necesario
para crear la pgina de inicio?". El resto del contenido y los componentes pueden
esperar.
JavaScript es un candidato ideal para dividir antes y despus del evento onload. Por
ejemplo si usted tiene el cdigo y las libreras necesarias para hacer un "arrastrar y
soltar" y animaciones, esos pueden esperar porque el arrastre de los elementos en la
pgina vienen despus del renderizado inicial. Otros lugares que lucen como candidatos
para el post-loading incluyen el contenido oculto (contenido que aparece luego de una
accin del usuario) y las imgenes ocultas
Estas herramientas le ayudarn en su objetivo: YUI Image Loader le permite ocultar las
imgenes y el YUI Get utility es una fcil manera de incluir Javascript y CSS sobre la
marcha. Para un ejemplo en vivo, dele un vistazo a La pgina de inicio de Yahoo! con
Firebug activado.
Es bueno cuando se obtienen los resultados deseados con otras prcticas de desarrollo
web. En este caso, la idea de la progresiva mejora de Javascript nos dice que, cuando
cuentan con el soporte, pueden mejorar la experiencia del usuario improve the user
experience, pero dehbe asegurarse de que la pgina igualmente funcione sin javascript.
As, luego de que usted se haya cerciorado que la pgina funciona correctamente, usted

puede mejorarlar con algunos scripts para acicalarla con funcionalidades como el
arrastrar y soltar y animaciones.
top

Precargar componentes
Categora: Contenido
El Preload o precarga puede parecer lo opuesto a la Post-load o carga posterior, pero
actualmente tiene una meta distinta. Por precargar componentes usted puede tomar
ventaja del tiempo en que el navegador est inactivo y as pedir los componentes (como
imgenes, estilos y scripts) que necesitar en el futuro. De esta manera cuendo el
usuario visite la pgina siguiente, usted podra tener muchos de los componentes ya en
la cachdel navegador y la pgina le cargar mucho ms rpido al usuario.
Aqu hay varios tipos de precarga:

Precarga Incondicional - tan pronto como carga la pgina, puedes continuar y

obtener algunos componentes extra. Dele un vistazo a google.com para un
ejemplo de como una imagen sprite es pedida en la carga. Esta imagen sprite no
es necesarria en la pgin de inicio de google.com, pero es necesaria en las
pginas consecutivas de los resultados de la bsqueda.
Precarga condicional - basada en las acciones del usuario, you make an
educated guess where the user is headed next and preload accordingly. On
search.yahoo.com you can see how some extra components are requested after
you start typing in the input box.
Anticipated preload - preload in advance before launching a redesign. It often
happens after a redesign that you hear: "The new site is cool, but it's slower than
before". Part of the problem could be that the users were visiting your old site
with a full cache, but the new one is always an empty cache experience. You can
mitigate this side effect by preloading some components before you even
launched the redesign. Your old site can use the time the browser is idle and
request images and scripts that will be used by the new site

top

Reducir el nmero de elementos DOM

Categora: Contenido
Una pgina compleja quiere decir muchos bytes para descargar y adems supone un
lento acceso al DOM en Javascript. Ello denota la diferencia si usted repite a travs de
500 o 5000 elementos DOM en la pgina cuando quiera aadir un manejador de eventos
por ejemplo.
Un alto nmero de elementos DOM puede ser un sntoma de que hay algo que debe ser
mejorado con la marcacin de la pgina sin la necesidad de afectar o remover el
contenido. Est usted usando tablas anidadas con fines de diseo? Est usted creando

solo para fijar problemas de diseo? Tal vez hay una mejor forma de hacer sus
marcados ms semnticmente.
<div>

Una gran ayuda son los diseos con YUI CSS utilities: grids.css le puede ayudar con el
diseo, fonts.css y reset.css puede ayudarle a help you strip away the browser's defaults
formatting. Esta es una oportunidad para comenzar de nuevo y pensar sobre el marcado,
Por ejemplo el uso de <div>solo tiene cuando sentido semntico, y no porque crea una
nueva lnea.
Encontrar el nmero de elementos DOM es sencillo, solo escriba en la consola de
Firebug:
document.getElementsByTagName('*').length

Y cuntos elementos DOM se consideran como demasiados? Compruebe otras pginas

similares que tienen un buen marcado. Por ejemplo, la pgina de inicio de Yahoo es una
pgina muy vistosa y cargada, sin embargo se mantiene por debajo de los 700 elementos
(etiquetas HTML).
top

Split Componentes a travs de dominios

Categora: Contenido
Dividir los componentes le permite maximizar las descargas paralelas. Asegrese de
que no est usando no ms de 2-4 dominios porque las bsquedas DNS le penalizarn.
Por ejemplo, usted puede alojar su HTML y el contenido dinmico en
www.example.org y dividir los componentes estticos entre static1.example.org y
static2.example.org

Para ms informacin, dele un vistazo a "Maximizar las descargas paralelas en la lnea

Carpool" por Tenni Theurer y Patty Chi.
top

Minimizar el numero de Iframes

Categora: Contenido
Los Iframes permiten que un documento HTML sea insertado en un documento padre.
Es importante entender cmo trabajan los iframes para que puedan ser usados
eficazmente.
<iframe>

pros:

Ayuda con lentitud a contenidos de terceros como logos y anuncios

Seguridad sandbox
Download scripts in parallel

<iframe>

contras:

Costosos, aunque estn en blanco

Bloquean la carga de la pgina
son Anti-semnticos

top

No 404s
Categora: Contenido
Las peticiones HTTP son costosas, de modo que hacer una peticin HTTP y no obtener
un resultado (ej. error 404 Not Found) son totalmente innecesarias y ralentizarn la
experiencia del usuario sin ningn beneficio.
Algunos sitios tienen pginas 404 con contenido til "Quiz est buscando X?", lo cual
es ideal para la experiencia del usuario, pero adems representan un desperdicio de
recursos del servidor (como la base de datos, etc.). Es particularmente malo cuando el
enlace a un javascript externo falla y ello deriva en una pgina 404. Primero, esta
descarga bloquear las dems descargas paralelas. Luego el navegador tratar de
interpretar el cuerpo de la respuesta 404 como si fuera el mismo cdigo javascript,
intentando hallar algo usable en l.
top

Reducir el tamao de las cookies

Categora: Cookie
Las cookies son usadas por una variadad tales como la autenticacin y personalizacin.
La informacin de las cookies es intercambiadas en las cabeceras HTTP entre los
servidores web y los navegadores. Es importante mantener el tamao de las cookies lo
ms bajo posible para reducir al mnimo el impacto que pueda ocasionar en el tiempo de
respuesta al usuario.
Para ms informacin vea "Cuando las Cookies se desmigajan" por Tenni Theurer y
Patty Chi. The take-home of this research:

top

Eliminar las cookies innecesarias

Mantener el tamao de las cookies lo ms bajo posible para reducir el impacto
en el tiempo de respuesta.
Ser conscientes de configurar la cookie al nivel apropiado del dominio, as otros
subdominios no sern afectados.
Establecer una fecha de expiracin apropiada. Una fecha de expiracin pasada o
ninguna eliminan rpido la cookie, mejorando el tiempo de respuesta al usuario.

Use Cookie-free Domains for Components

Categora: Cookie
Cuando el navegador hace una peticin de una imagen esttica y envia cookies junto a
la peticin, el servidor no tiene ningn uso para esas cookies. Por lo que se crean sin
obtener un beneficio. Usted debera asegurarse de que los componente estticos son
pedidos libres de cookies. Abra un subdominio y ah aloje los comoponentes estticos.
Si su dominio es www.example.org, usted puede alojar los componentes estticos en
static.example.org. Sin embargo, si usted ya ha establecido las cookies en el
dominio superior example.org frente a www.example.org, entonces todas las llamadas
a static.example.org se incluirn en estas cookies. En este caso, usted puede
comprar un nuevo dominio,para alojar sus componentes estticos ah, y mantener este
dominio sin cookies. Yahoo! usa yimg.com, YouTube usa ytimg.com, Amazon usa
images-amazon.com y as sucesivamente.
Otros beneficios de alojar los componentes estticos en un dominio libre de cookies es
que algunos proxys pueden rechazar el cacheo de los componentes que son pedidos
junto con las cookies. En una nota relacionada, si usted se pregunta si debera usar
example.org o www.example.org para su pgina de inicio, considere el impacto de la
cookie. El omitir las www no le deja otra opcin que escribir las cookies para
*.example.org, por lo que por razones de rendimiento es mejor utilizar las www. y
escribir las cookies para ese subdominio.
top

Minimizar Accesos DOM

Categora: JavaScript
Acceder a elementos DOM con JavaScript es lento con el fin de tener una mejor
capacidad de respuesta, usted debera:

Cachear referencias para acceder a los elementos

Actualizar nodos "offline" y luego aadirlos al rbol
Evitar fijar la posicin con Javascript

For more information check the YUI theatre's "High Performance Ajax Applications"
by Julien Lecomte.
top

Develop Smart Event Handlers

Categora: JavaScript

Algunas veces las pginas tienen menos respuesta a cauda de demasiados manejadores
de eventos adjuntados a diferentes elementos del rbol DOM los cuales son ejecutados
con demasiada frecuencia. Esa es la razn por la que usar delegacin de eventos es una
buena prctica. Si tienes 10 botones dentro de un div, conecte un solo evento a la capa,
en lugar de un manejador para cada botn. Englobe los eventos, de modo que usted
pueda encontrar el evento y averiguar de qu botn se origin.
Adems no es necesario esperar a la carga del evento para comenzar a hacer algo con el
rbol DOM. A menudo todo lo que se necesita es que elemento al cual quiere acceder
est disponible en el rbol. Usted no necesita esperar a a que todas las imgenes se
hayan descargado. El DOMContentLoaded es el evento que usted puede usar e lugar de
onload, pero hasta que est disponible en todos los navegadores usted puede usar la
utilidad YUI, que tiene un mtodoonAvailable.
Para ms informacin dele un vistazo a "the YUI theatre's" "Alto rendimiento en
aplicaciones Ajax" por Julien Lecomte.
top

<link>mejor que @import

Categora: CSS
Una de las mejores prcticas de la categora CSS explica el porqu deben llamarse las
hojas de estilo en el encabezado, con el fin de permitir la carga progresiva.
En Internet Explorer el cdigo @import se comporta de la misma forma que el cdigo
<link> desde la parte inferior de la pgina, por lo que no se debe usar.
top

Evitar el uso de filtros

Categora: CSS
El filtro propietario de IE AlphaImageLoader tiene por ojbeto solucionar un problema
con PNGs semi transparentes true-color en las versiones de IE inferiores a la 7. El
problema con este filtro es que bloquea el renderizado y congela el navegador mientras
la imagen est siendo descargada. Esto adems incrementa el consumo de memoria y es
aplicado por elemento, no por imagen, de modo que el problema se multiplica.
El mejor enfoque es evitar el uso de AlphaImageLoader completamente y usar en su
reemplazo PNG8 con degradado, lo cual se ve bien en IE. Si usted necesita
irremediablemente el uso de AlphaImageLoader, use el truco de relieve _filter que
no afecta a los usuarios de ie7.
top

Optimizar Imgenes
Categora: Imgenes
Despus de que un diseador termina con la creacin de las imgenes de tu sitio web,
hay algunas cosas que usted puede probar antes de subir esas imgenes por FTP a su
servidor.

Usted puede revisar los GIFs y ver si ellos estn usando una paleta de tamao
correspondiente al nmero de colores de la imagen. Con imagemagick es fcil
usando
identify -verbose image.gif

Cuando vea una imagen que usa 4 colores y una paleta de 256, es idnea para
mejorarla.
Pruebe convertir los GIFs a PNGs y vea si reducen su tamao. Muchas veces no
es as. Los desarrolladores a menudo dudan en utilizar PNGs debido al soporte
limitado de los navegadores, pero eso es cosa del pasado. El nico problema real
es la transparencia-alpha en PNGs con color real, pero igual, los GIFs no son de
color verdadero y tampoco soportan transparencia variable. As que cualquier
cosa que pueda hacer un GIF, un PNG con paleta (PNG8) tambin puede
(excepto para animaciones). Este simple comando de imagemagick resulta
totalmente seguro de usar con PNGs:
convert image.gif image.png

"Lo que estamos dicindole es: Dle una oportunidad a los PNGs!"
Ejecute pngcrush (o cualquier otra herramienta optimizadora de PNGs) en todos
sus PNGs. Por ejemplo:
pngcrush image.png -rem alla -reduce -brute result.png

Ejecute jpegtran en todos sus JPEGs. Esta herramienta realiza operaciones con
los JPEG sin prdida de calidad, tales como rotacin, y adems puede ser usado
para optimizar y remover comentarios y otra informacin intil (como la
informacin EXIF) de sus imgenes.
jpegtran -copy none -optimize -perfect src.jpg dest.jpg

top

Optimizar Sprites CSS

Categora: Imgenes

top

La organizacin de las imgenes en sprite horizontalmente, en lugar de

verticalmente usualmente resulta usualmente en un archivo ms pequeo.
Combinar colores similares en un sprite le ayuda a mantener bajo el contador de
color the color, siendo ideal de 256 colores de modo que caben en un PNG8.
"Be mobile-friendly" y no deje demasiados espacios en blanco entre las
imgenes de un srpite. Esto no afecta mucho el tamao final del archivo, pero
necesita menos memoria para descomprimir la imagen en un mapa de pixeles.
Una imagen de 100x100 son diez mil pixeles, mientras que 1000x1000 son 1
milln de pixeles

No escalar imgenes en HTML

Categora: Imgenes
No use una imagen ms grande de la que necesita simplemente por que usted puede
ajustar el ancho y el alto en HTML. Si usted necesita
<img width="100" height="100" src="mycat.jpg" alt="My Cat" />

entonces su imagen (mycat.jpg) debera ser ms que una imagen con una medida de
500x500px reducida a 100x100px.
top

favicon.ico, ligero y cacheable

Categora: Imgenes
La favicon.ico es una imagen que se almacena en la raz de tu servidor. sta es un mal
necesario, porque aunque usted no le tenga ciudado, el navegador siempre va a pedirla,
por lo que es mejor no responder con un 404 Not Found. Adems desde el hecho de
que est en el mismo servidor, las cookies son enviadas cada vez que es pedida. Esta
imagen tambien interfiere con la secuencia de descargas , por ejemplo en IE cuando
usted pide componentes extra en la carga, la favicon ser descargada antes que esos
componentes.
Por lo tanto para mitigar los inconvenientes de tener una favicon.ico primero asegrese
de que:

Es muy pequea, preferiblemente menor a 1kb.

Establecer Expires header con las cuales se sienta cmodo (ya que no le puede
cambiar el nombre aunque quiera hacerlo). Usted probablemente puede
establecer con seguridad la Expires header unos pocos meses de duracin. Usted
puede revisar que la ltima fecha de modificacin de su favicon.ico actual para
tomar una desicin informada.

Imagemagickpuede ayudarle a crear favicons pequeos.

top

Que los archivos no superen los 25K

Categora: Mvil
Esta restriccin est relacionada con el hecho de que el iPhone no cach componentes
mayores de 25K. Tenga en cuenta que este es el tamao descomprimido. Es importante
aclarla porque la compresin de los archivos no puede solucionar esto.
For more information check "Performance Research, Part 5: iPhone Cacheability Making it Stick" by Wayne Shea and Tenni Theurer.

top

Pack Components into a Multipart Document

Categora: Mvil
Embalalar los documentos en un archivo es como un mensaje de correo electrnico con
archivos adjuntos, le ayudar a obtener varios archivos en una sola peticin HTTP,
haciendo valer la primera regla de YSlow. Para utilizar esta norma nates debes verificar
que el telfono mvil admita este tipo de tcnica.