MEJORES PRCTICAS PARA ACELERAR SU SITIO

WEB
El equipo de Rendimiento Excepcional ha identificado una serie de prcticas recomendadas para
hacer que las pginas web sean rpidas. La lista incluye 35 mejores prcticas divididas en 7 categoras.
Minimizar peticiones HTTP

Etiqueta: contenido

El 80% del tiempo de respuesta del usuario final se gasta en el front-end. La mayor parte de este
tiempo est atado en la descarga de todos los componentes de la pgina: imgenes, hojas de estilo,
secuencias de comandos, Flash, etc. Reducir el nmero de componentes a su vez reduce el nmero
de solicitudes HTTP requeridas para procesar la pgina. Esta es la clave para pginas ms rpidas.

Una forma de reducir el nmero de componentes en la pgina es simplificar el diseo de la pgina.

Pero hay una manera de construir pginas con contenido ms rico mientras que tambin consigue
tiempos de respuesta rpidos? Estas son algunas tcnicas para reducir el nmero de solicitudes HTTP,
mientras que sigue soportando diseos de pginas enriquecidas.

Los archivos combinados son una forma de reducir el nmero de solicitudes HTTP combinando todos
los scripts en un nico script, y de manera similar combinando todos los CSS en una sola hoja de
estilo. Combinar archivos es ms difcil cuando los scripts y hojas de estilo varan de una pgina a
otra, pero hacer que esta parte de su proceso de liberacin mejore los tiempos de respuesta.

CSS Sprites son el mtodo preferido para reducir el nmero de solicitudes de imagen. Combine sus
imgenes de fondo en una sola imagen y utilice las propiedades de background-image background-
position background-image CSS para mostrar el segmento de imagen deseado.

Los mapas de imgenes combinan varias imgenes en una sola imagen. El tamao general es
aproximadamente el mismo, pero reducir el nmero de peticiones HTTP acelera la pgina. Los mapas
de imagen slo funcionan si las imgenes son contiguas en la pgina, como una barra de navegacin.
Definir las coordenadas de los mapas de imagen puede ser tedioso y propenso a errores. El uso de
mapas de imgenes para la navegacin tampoco es accesible, por lo que no se recomienda.

Las imgenes en lnea utilizan el esquema de data: URL para incrustar los datos de la imagen en la
pgina real. Esto puede aumentar el tamao de su documento HTML. La combinacin de imgenes
en lnea en las hojas de estilo (en cach) es una forma de reducir las solicitudes HTTP y evitar el
aumento del tamao de las pginas. Las imgenes en lnea an no son compatibles con todos los
principales navegadores.

Reducir el nmero de solicitudes HTTP en su pgina es el lugar para comenzar. Esta es la gua ms
importante para mejorar el rendimiento de los visitantes por primera vez. Tal y como se describe en
el blog de Tenni Theurer, el uso del cach del navegador - Exposed! , 40-60% de los visitantes diarios
a su sitio vienen con una cach vaca. Hacer su pgina rpida para estos visitantes de primera vez es
clave para una mejor experiencia de usuario.

Arriba | Discutir esta regla

Utilizar una red de distribucin de contenido

Etiqueta: servidor

La proximidad del usuario a su servidor web tiene un impacto en los tiempos de respuesta. La
implementacin de su contenido en varios servidores geogrficamente dispersos har que sus
pginas se carguen ms rpido desde la perspectiva del usuario. Pero, por dnde empezar?

Como primer paso para implementar contenido geogrficamente disperso, no intente redisear su
aplicacin web para que funcione en una arquitectura distribuida. Dependiendo de la aplicacin, el
cambio de la arquitectura podra incluir tareas desalentadoras, como sincronizar el estado de la
sesin y replicar las transacciones de la base de datos en las ubicaciones de los servidores. Los
intentos de reducir la distancia entre los usuarios y su contenido podran ser demorados o nunca
pasar por este paso de la arquitectura de la aplicacin.

Recuerde que el 80-90% del tiempo de respuesta del usuario final se descarga descargando todos los
componentes de la pgina: imgenes, hojas de estilo, secuencias de comandos, Flash, etc. En lugar
de empezar con la difcil tarea de redisear la arquitectura de su aplicacin, es mejor primero
dispersar su contenido esttico. Esto no slo logra una reduccin mayor en los tiempos de respuesta,
sino que es ms fcil gracias a las redes de distribucin de contenido.

Una red de distribucin de contenido (CDN) es una coleccin de servidores web distribuidos en
mltiples ubicaciones para entregar contenido de manera ms eficiente a los usuarios. El servidor
seleccionado para entregar contenido a un usuario especfico normalmente se basa en una medida
de proximidad de red. Por ejemplo, se elige el servidor con menos saltos de red o el servidor con el
tiempo de respuesta ms rpido.

Algunas grandes empresas de Internet poseen su propia CDN, pero es rentable utilizar un proveedor
de servicios CDN, como Akamai Technologies , EdgeCast o level3 . Para las empresas en ciernes y los
sitios web privados, el costo de un servicio CDN puede ser prohibitivo, pero a medida que su pblico
objetivo crece y se vuelve ms global, es necesario un CDN para lograr tiempos de respuesta rpidos.
En Yahoo !, las propiedades que trasladaron el contenido esttico de sus servidores web de
aplicaciones a un CDN (ambos de terceros como se mencion anteriormente, as como el propio CDN
de Yahoo) mejoraron los tiempos de respuesta del usuario final en un 20% o ms. Cambiar a un CDN
es un cambio de cdigo relativamente fcil que mejorar drsticamente la velocidad de su sitio web.

Arriba | Discutir esta regla

Agregar un expira o un encabezado de control de cach

Etiqueta: servidor

Esta regla tiene dos aspectos:

Para componentes estticos: implementar la poltica de "Nunca caducar" estableciendo un futuro

lejano.
Para componentes dinmicos: utilice un encabezado apropiado de Cache-Control para ayudar al
navegador con solicitudes condicionales
Los diseos de pginas web son cada vez ms ricos, lo que significa ms secuencias de comandos,
hojas de estilo, imgenes y Flash en la pgina. Un visitante por primera vez en su pgina puede tener
que hacer varias solicitudes HTTP, pero al utilizar el encabezado Expires, hace que estos componentes
puedan ser almacenados en cach. Esto evita solicitudes HTTP innecesarias en vistas de pgina
subsiguientes. Los encabezados de caducidad se utilizan con mayor frecuencia en imgenes, pero
deben utilizarse en todos los componentes, incluidos los scripts, las hojas de estilo y los componentes
de Flash.

Los navegadores (y los proxies) utilizan un cach para reducir el nmero y el tamao de las solicitudes
HTTP, haciendo que las pginas web se carguen ms rpido. Un servidor web utiliza el encabezado
Expires en la respuesta HTTP para indicar al cliente cunto tiempo se puede almacenar en cach un
componente. Este es un futuro lejano Expire el encabezado, dicindole al navegador que esta
respuesta no ser viciada hasta el 15 de abril de 2010.

Expira: Jue, 15 Apr 2010 20:00:00 GMT

Si su servidor es Apache, utilice la directiva ExpiresDefault para establecer una fecha de caducidad
relativa a la fecha actual. Este ejemplo de la directiva ExpiresDefault establece la fecha de caducidad
10 aos fuera de la hora de la solicitud.

ExpiresDefault "acceso ms 10 aos"

Tenga en cuenta, si utiliza un futuro lejano Expires cabecera usted tiene que cambiar el nombre de
archivo del componente siempre que el componente cambia. En Yahoo! A menudo hacemos que
este paso sea parte del proceso de construccin: un nmero de versin est incrustado en el nombre
de archivo del componente, por ejemplo, yahoo_2.0.6.js.

Utilizar un futuro lejano El encabezado Expires afecta a las vistas de pgina slo despus de que un
usuario ya haya visitado su sitio. No tiene ningn efecto en el nmero de solicitudes HTTP cuando un
usuario visita su sitio por primera vez y el cach del navegador est vaco. Por lo tanto, el impacto de
esta mejora del rendimiento depende de la frecuencia con la que los usuarios golpean sus pginas
con un cach preparado. (Una "cache preparada" ya contiene todos los componentes de la pgina.)
Medimos esto en Yahoo! Y encontr que el nmero de pginas vistas con un cache preparado es 75-
85%. Mediante el uso de un encabezado Expiracin de futuro, aumenta el nmero de componentes
que el navegador almacena en cach y vuelve a utilizar en vistas de pgina subsiguientes sin enviar
un solo byte a travs de la conexin a Internet del usuario.

Arriba | Discutir esta regla

Componentes de Gzip

Etiqueta: servidor

El tiempo que tarda en transferir una solicitud y respuesta HTTP a travs de la red se puede reducir
significativamente mediante decisiones tomadas por ingenieros frontales. Es cierto que la velocidad
de ancho de banda del usuario final, el proveedor de servicios de Internet, la proximidad a los puntos
de intercambio de intercambio, etc. estn fuera del control del equipo de desarrollo. Pero hay otras
variables que afectan los tiempos de respuesta. La compresin reduce los tiempos de respuesta
reduciendo el tamao de la respuesta HTTP.

A partir de HTTP / 1.1, los clientes web indican compatibilidad con la compresin con el encabezado
Accept-Encoding en la solicitud HTTP.

Aceptar-Codificacin: gzip, desinflar

Si el servidor web ve este encabezado en la solicitud, puede comprimir la respuesta utilizando uno
de los mtodos enumerados por el cliente. El servidor web notifica al cliente web de esto a travs del
encabezado Content-Encoding en la respuesta.

Codificacin de contenido: gzip

Gzip es el mtodo de compresin ms popular y efectivo en este momento. Fue desarrollado por el
proyecto GNU y estandarizado por RFC 1952 . El nico otro formato de compresin que
probablemente ver es desinflar, pero es menos efectivo y menos popular.

Gzipping generalmente reduce el tamao de la respuesta en un 70%. Aproximadamente el 90% del

trfico de Internet de hoy en da viaja a travs de navegadores que dicen apoyar gzip. Si utiliza
Apache, el mdulo que configura gzip depende de su versin: Apache 1.3 usa mod_gzip mientras
Apache 2.x usa mod_deflate .

Hay problemas conocidos con los navegadores y los proxies que pueden causar un desajuste en lo
que el navegador espera y lo que recibe con respecto al contenido comprimido. Afortunadamente,
estos casos de borde estn disminuyendo a medida que el uso de los navegadores ms antiguos cae.
Los mdulos de Apache ayudan agregando cabeceras de respuesta Vary adecuadas
automticamente.

Los servidores eligen qu a gzip basndose en el tipo de archivo, pero normalmente son demasiado
limitados en lo que deciden comprimir. La mayora de los sitios web gzip sus documentos HTML.
Tambin vale la pena gzip sus scripts y hojas de estilo, pero muchos sitios web pierden esta
oportunidad. De hecho, vale la pena comprimir cualquier respuesta de texto incluyendo XML y JSON.
Los archivos de imagen y PDF no se deben comprimir porque ya estn comprimidos. Tratar de gzip
no slo los residuos CPU, pero puede potencialmente aumentar el tamao de los archivos.

Gzipping tantos tipos de archivos como sea posible es una manera fcil de reducir el peso de la pgina
y acelerar la experiencia del usuario.

Arriba | Discutir esta regla

Poner hojas de estilo en la parte superior

Etiqueta: css
Mientras investigbamos el rendimiento en Yahoo !, descubrimos que mover hojas de estilo al
documento HEAD hace que las pginas parezcan cargarse ms rpido. Esto se debe a que colocar
hojas de estilo en HEAD permite que la pgina se procese progresivamente.

Los ingenieros frontales que se preocupan por el rendimiento quieren que una pgina se cargue
progresivamente; Es decir, queremos que el navegador muestre el contenido que tenga tan pronto
como sea posible. Esto es especialmente importante para pginas con mucho contenido y para
usuarios con conexiones de Internet ms lentas. La importancia de dar a los usuarios
retroalimentacin visual, como los indicadores de progreso, ha sido bien investigado y documentado
. En nuestro caso la pgina HTML es el indicador de progreso! Cuando el navegador carga la pgina
de forma progresiva, el encabezado, la barra de navegacin, el logotipo en la parte superior, etc.,
sirven como retroalimentacin visual para el usuario que est esperando la pgina. Esto mejora la
experiencia general del usuario.

El problema de colocar hojas de estilo cerca de la parte inferior del documento es que prohbe la
reproduccin progresiva en muchos navegadores, incluido Internet Explorer. Estos navegadores
bloquean el procesamiento para evitar tener que volver a dibujar elementos de la pgina si cambian
sus estilos. El usuario est atascado viendo una pgina en blanco.

La especificacin HTML especifica claramente que las hojas de estilo se incluirn en la CABEZA de la
pgina: "A diferencia de A, [LINK] slo puede aparecer en la seccin HEAD de un documento, aunque
puede aparecer cualquier nmero de veces". Ninguna de las alternativas, la pantalla en blanco o flash
de contenido sin revestimiento, vale la pena el riesgo. La solucin ptima es seguir la especificacin
HTML y cargar las hojas de estilo en el documento HEAD.

Arriba | Discutir esta regla

Pon los scripts en la parte inferior

Etiqueta: javascript

El problema causado por los scripts es que bloquean las descargas paralelas. La especificacin HTTP
/ 1.1 sugiere que los navegadores no descargan ms de dos componentes en paralelo por nombre de
host. Si atiende sus imgenes de varios nombres de host, puede obtener ms de dos descargas en
paralelo. Mientras se descarga un script, sin embargo, el navegador no iniciar ninguna otra descarga,
ni siquiera en nombres de host diferentes.

En algunas situaciones, no es fcil mover secuencias de comandos a la parte inferior. Si, por ejemplo,
el script usa document.write para insertar parte del contenido de la pgina, no se puede mover ms
abajo en la pgina. Tambin podra haber problemas de alcance. En muchos casos, hay formas de
solucionar estas situaciones.

Una sugerencia alternativa que a menudo surge es usar scripts diferidos. El atributo DEFER indica que
el script no contiene document.write, y es una pista para los navegadores que pueden continuar
representando. Desafortunadamente, Firefox no admite el atributo DEFER . En Internet Explorer, la
secuencia de comandos puede diferirse, pero no tanto como se desee. Si un script puede ser diferido,
tambin se puede mover al final de la pgina. Eso har que tus pginas web se carguen ms rpido.

Arriba | Discutir esta regla

Evite las expresiones CSS

Etiqueta: css

Las expresiones CSS son una forma potente (y peligrosa) de establecer dinmicamente propiedades
CSS. Ellos fueron apoyados en Internet Explorer comenzando con la versin 5, pero fueron obsoletos
a partir de IE8 . Como ejemplo, el color de fondo se puede establecer para alternar cada hora
utilizando expresiones CSS:

Background-color: expression ((nueva fecha ()). GetHours ()% 2? "# B8D4FF": "# F08A00");

Como se muestra aqu, el mtodo de expression acepta una expresin JavaScript. La propiedad CSS
se establece en el resultado de la evaluacin de la expresin JavaScript. El mtodo de expression es
ignorado por otros navegadores, por lo que es til para establecer las propiedades en Internet
Explorer necesarias para crear una experiencia coherente entre navegadores.

El problema con las expresiones es que se evalan con ms frecuencia de lo que la mayora de la
gente espera. No slo se evalan cuando se procesa y se redimensiona la pgina, sino tambin
cuando se desplaza la pgina e incluso cuando el usuario mueve el ratn sobre la pgina. La adicin
de un contador a la expresin CSS nos permite realizar un seguimiento de cundo y con qu
frecuencia se evala una expresin CSS. Mover el ratn alrededor de la pgina puede generar
fcilmente ms de 10.000 evaluaciones.

Una manera de reducir el nmero de veces que se evala la expresin CSS es usar expresiones de
una sola vez, donde la primera vez que se evala la expresin, establece la propiedad style en un
valor explcito, que reemplaza la expresin CSS. Si la propiedad de estilo se debe establecer de forma
dinmica a lo largo de la vida de la pgina, el uso de controladores de eventos en lugar de expresiones
CSS es un enfoque alternativo. Si debe utilizar expresiones CSS, recuerde que pueden ser evaluadas
miles de veces y podran afectar el rendimiento de su pgina.

Arriba | Discutir esta regla

Hacer JavaScript y CSS externos

Etiqueta: javascript, css

Muchas de estas reglas de rendimiento tratan de cmo se administran los componentes externos.
Sin embargo, antes de estas consideraciones se debe hacer una pregunta ms bsica: Debe
JavaScript y CSS estar contenidos en archivos externos, o en lnea en la pgina?

El uso de archivos externos en el mundo real generalmente produce pginas ms rpidas porque los
archivos JavaScript y CSS son almacenados en cach por el navegador. JavaScript y CSS que estn en
lnea en documentos HTML se descargan cada vez que se solicita el documento HTML. Esto reduce
el nmero de solicitudes HTTP que se necesitan, pero aumenta el tamao del documento HTML. Por
otro lado, si el JavaScript y CSS estn en archivos externos almacenados en cach por el navegador,
el tamao del documento HTML se reduce sin aumentar el nmero de solicitudes HTTP.
El factor clave, entonces, es la frecuencia con la que los componentes JavaScript y CSS externos se
almacenan en cach en relacin con el nmero de documentos HTML solicitados. Este factor, aunque
difcil de cuantificar, se puede medir usando varias mtricas. Si los usuarios de su sitio tienen varias
vistas de pgina por sesin y muchas de sus pginas vuelven a usar las mismas secuencias de
comandos y hojas de estilo, existe un mayor beneficio potencial de los archivos externos
almacenados en cach.

Muchos sitios web caen en medio de estas mtricas. Para estos sitios, la mejor solucin generalmente
es desplegar JavaScript y CSS como archivos externos. La nica excepcin donde inlining es preferible
es con las pginas de inicio, como la portada de Yahoo! Y Mi Yahoo! . Las pginas de inicio que tienen
pocas (tal vez una sola) vista de pgina por sesin pueden encontrar que inline JavaScript y CSS
resulta en tiempos de respuesta de usuario final ms rpidos.

Para las pginas frontales que suelen ser la primera de muchas vistas de pgina, hay tcnicas que
aprovechan la reduccin de las solicitudes HTTP que ofrece inlining, as como los beneficios de cach
obtenidos mediante el uso de archivos externos. Una de estas tcnicas consiste en incrustar
JavaScript y CSS en la primera pgina, pero descargar dinmicamente los archivos externos despus
de que la pgina haya terminado de cargarse. Las pginas siguientes haran referencia a los archivos
externos que ya deberan estar en la cach del navegador.

Arriba | Discutir esta regla

Reducir las bsquedas DNS

Etiqueta: contenido

El Sistema de nombres de dominio (DNS) asigna nombres de host a direcciones IP, de la misma
manera que los directorios telefnicos asignan nombres de personas a sus nmeros de telfono.
Cuando escribe www.yahoo.com en su navegador, una resolucin de DNS contactada por el
navegador devuelve la direccin IP de ese servidor. DNS tiene un costo. Tarda generalmente 20-120
milisegundos para que DNS busque la direccin IP para un hostname dado. El navegador no puede
descargar nada de este nombre de host hasta que se complete la bsqueda de DNS.

Las bsquedas de DNS se almacenan en cach para un mejor rendimiento. Este almacenamiento en
cach puede ocurrir en un servidor de cach especial, mantenido por el ISP del usuario o la red de
rea local, pero tambin hay cach que se produce en el equipo del usuario individual. La informacin
de DNS permanece en la cach DNS del sistema operativo (el "Servicio de cliente DNS" en Microsoft
Windows). La mayora de los navegadores tienen sus propios cachs, separados del cach del sistema
operativo. Siempre y cuando el navegador mantenga un registro DNS en su propia cach, no
molestar al sistema operativo con una solicitud para el registro.

Internet Explorer almacena en cach las bsquedas de DNS durante 30 minutos de forma
predeterminada, como se especifica en la DnsCacheTimeout Registro DnsCacheTimeout . Firefox
almacena en cach las bsquedas DNS durante 1 minuto, controladas por la configuracin de
configuracin network.dnsCacheExpiration . (Fasterfox cambia esto a 1 hora.)

Cuando el cach DNS del cliente est vaco (tanto para el navegador como para el sistema operativo),
el nmero de bsquedas DNS es igual al nmero de nombres de host nicos en la pgina web. Esto
incluye los nombres de host utilizados en la URL de la pgina, las imgenes, los archivos de script, las
hojas de estilo, los objetos Flash, etc. Reducir el nmero de nombres de host nicos reduce el nmero
de bsquedas de DNS.

La reduccin del nmero de nombres de host nicos tiene el potencial de reducir la cantidad de
descarga paralela que tiene lugar en la pgina. Evitar las bsquedas de DNS reduce los tiempos de
respuesta, pero reducir las descargas paralelas puede aumentar los tiempos de respuesta. Mi gua es
dividir estos componentes en al menos dos, pero no ms de cuatro nombres de host. Esto da como
resultado un buen compromiso entre reducir las bsquedas de DNS y permitir un alto grado de
descargas paralelas.

Arriba | Discutir esta regla

Minify JavaScript y CSS

Etiqueta: javascript, css

Minificacin es la prctica de eliminar caracteres innecesarios del cdigo para reducir su tamao,
mejorando as los tiempos de carga. Cuando se minifica el cdigo, se eliminan todos los comentarios,
as como los caracteres de espacio en blanco no necesarios (espacio, nueva lnea y pestaa). En el
caso de JavaScript, esto mejora el rendimiento del tiempo de respuesta porque se reduce el tamao
del archivo descargado. Dos herramientas populares para minificar cdigo JavaScript son JSMin y YUI
Compressor . El compresor YUI tambin puede minify CSS.

La ofuscacin es una optimizacin alternativa que se puede aplicar al cdigo fuente. Es ms complejo
que la minificacin y, por lo tanto, es ms probable que genere errores como resultado del propio
paso de obfuscacin. En una encuesta de los diez principales sitios web de Estados Unidos, la
minificacin alcanz una reduccin del tamao del 21% frente al 25% para la ofuscacin. Aunque la
ofuscacin tiene una mayor reduccin de tamao, minificar JavaScript es menos riesgoso.

Adems de minificar scripts y estilos externos, los bloques <script> y <style> inline pueden y deben
ser minificados. Incluso si gzip sus secuencias de comandos y estilos, minifying ellos todava reducir
el tamao de un 5% o ms. A medida que aumenta el uso y el tamao de JavaScript y CSS, tambin
aumentar el ahorro al minificar el cdigo.

Arriba | Discutir esta regla

Evitar los redireccionamientos

Etiqueta: contenido

Los redireccionamientos se realizan usando los cdigos de estado 301 y 302. He aqu un ejemplo de
los encabezados HTTP en una respuesta 301:

HTTP / 1.1 301 movido permanentemente

Ubicacin: http://example.com/newuri
Tipo de contenido: text / html

El navegador lleva automticamente al usuario a la URL especificada en el campo Location . Toda la

informacin necesaria para una redireccin se encuentra en los encabezados. El cuerpo de la
respuesta es tpicamente vaco. A pesar de sus nombres, ni una 301 ni una respuesta 302 se
almacenan en cach en la prctica a menos que los encabezados adicionales, como Expires o Cache-
Control , indican que debe ser. La meta refresh tag y JavaScript son otras maneras de dirigir a los
usuarios a una URL diferente, pero si debe realizar una redireccin, la tcnica preferida es utilizar los
cdigos de estado HTTP 3xx estndar, principalmente para asegurar que el botn de retroceso
funcione correctamente.

Lo ms importante a recordar es que los redireccionamientos ralentizan la experiencia del usuario.

Insertar una redireccin entre el usuario y el documento HTML retrasa todo en la pgina ya que no
se puede procesar nada en la pgina y ningn componente puede empezar a descargarse hasta que
el documento HTML haya llegado.

Uno de los redireccionamientos ms costosos ocurre con frecuencia y los desarrolladores web
generalmente no son conscientes de ello. Se produce cuando falta una barra diagonal (/) en una
direccin URL que de lo contrario debera tener uno. Por ejemplo, ir a
http://astrology.yahoo.com/astrology da como resultado una respuesta 301 que contiene un
redireccionamiento a http://astrology.yahoo.com/astrology/ (observe la barra inclinada). Esto se
arregla en Apache utilizando Alias o mod_rewrite o la directiva DirectorySlash si est utilizando
controladores de Apache.

La conexin de un sitio web antiguo a uno nuevo es otro uso comn para los redireccionamientos.
Otros incluyen la conexin de diferentes partes de un sitio web y la direccin del usuario sobre la
base de ciertas condiciones (tipo de navegador, tipo de cuenta de usuario, etc). El uso de una
redireccin para conectar dos sitios web es simple y requiere poca codificacin adicional. Aunque el
uso de redirecciones en estas situaciones reduce la complejidad para los desarrolladores, degrada la
experiencia del usuario. Las alternativas para este uso de redirecciones incluyen el uso de Alias y
mod_rewrite si las dos rutas de cdigo estn alojadas en el mismo servidor. Si un cambio de nombre
de dominio es la causa del uso de redirecciones, una alternativa es crear un CNAME (un registro DNS
que crea un alias que apunta de un nombre de dominio a otro) en combinacin con Alias o
mod_rewrite .

Arriba | Discutir esta regla

Eliminar secuencias de comandos duplicadas

Etiqueta: javascript

Daa rendimiento para incluir el mismo archivo JavaScript dos veces en una pgina. Esto no es tan
inusual como usted podra pensar. Una revisin de los diez principales sitios web de EE. UU. Muestra
que dos de ellos contienen una secuencia de comandos duplicada. Dos factores principales aumentan
las probabilidades de que un script se duplique en una sola pgina web: el tamao del equipo y el
nmero de secuencias de comandos. Cuando sucede, los scripts duplicados perjudican el
rendimiento creando solicitudes HTTP innecesarias y la ejecucin de JavaScript desperdiciada.

Las peticiones HTTP innecesarias ocurren en Internet Explorer, pero no en Firefox. En Internet
Explorer, si un script externo se incluye dos veces y no se puede almacenar en cach, genera dos
solicitudes HTTP durante la carga de la pgina. Incluso si la secuencia de comandos se puede
almacenar en cach, las solicitudes HTTP adicionales se producen cuando el usuario vuelve a cargar
la pgina.
Adems de generar solicitudes HTTP intiles, se pierde tiempo evaluando el script varias veces. Esta
ejecucin redundante de JavaScript ocurre en Firefox e Internet Explorer, independientemente de si
la secuencia de comandos se puede almacenar en cach.

Una forma de evitar accidentalmente incluir el mismo script dos veces es implementar un mdulo de
administracin de secuencias de comandos en su sistema de plantillas. La forma tpica de incluir un
script es usar la etiqueta SCRIPT en su pgina HTML.

<Script type = "text / javascript" src = "menu_1.0.17.js"> </ script>

Una alternativa en PHP sera crear una funcin llamada insertScript .

<? Php insertScript ("menu.js")?>

Adems de evitar que el mismo script se inserte varias veces, esta funcin podra manejar otros
problemas con secuencias de comandos, como la verificacin de dependencia y agregar nmeros de
versin a los nombres de archivo de script para soportar futuros encabezados Futuros.

Arriba | Discutir esta regla

Configurar ETags

Etiqueta: servidor

Las etiquetas de entidad (ETags) son un mecanismo que utilizan los servidores web y los navegadores
para determinar si el componente 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.) ETags se
agregaron para proporcionar un mecanismo para validar entidades que es ms flexible que la fecha
de ltima modificacin. Un ETag es una cadena que identifica de forma nica una versin especfica
de un componente. Las nicas restricciones de formato son que la cadena sea citada. El servidor de
origen especifica el ETag del componente utilizando el ETag respuesta ETag .

HTTP / 1.1 200 OK

ltima modificacin: Tue, 12 Dec 2006 03:03:59 GMT
ETag: "10c24bc - 4ab - 457e1c1f"
Contenido-Longitud: 12195

Posteriormente, si el navegador tiene que validar un componente, utiliza el encabezado If-None-

Match para pasar el ETag al servidor de origen. Si coincide el ETags, se devuelve un cdigo de estado
304 reduciendo la respuesta en 12195 bytes para este ejemplo.

GET /i/yahoo.gif HTTP / 1.1

Anfitrin: us.yimg.com
Si-Modificado-Desde: mar, 12 dic 2006 03:03:59 GMT
If-None-Match: "10c24bc-4ab-457e1c1f"
 HTTP / 1.1 304 no modificado

El problema con ETags es que normalmente se construyen utilizando atributos que los hacen nicos
a un servidor especfico que aloja un sitio. Los ETags no coinciden cuando un navegador obtiene el
componente original de un servidor y ms tarde intenta validar ese componente en un servidor
diferente, situacin que es muy comn en sitios Web que utilizan un grupo de servidores para
gestionar solicitudes. De forma predeterminada, tanto Apache como IIS incrustan datos en el ETag
que reduce drsticamente las probabilidades de que la prueba de validez tenga xito en sitios web
con varios servidores.

El formato ETag para Apache 1.3 y 2.x es inode-size-timestamp . Aunque un archivo determinado
puede residir en el mismo directorio en varios servidores y tener el mismo tamao de archivo,
permisos, marca de tiempo, etc., su inodo es diferente de un servidor a otro.

IIS 5.0 y 6.0 tienen un problema similar con ETags. El formato para ETags en IIS es
Filetimestamp:ChangeNumber . Un ChangeNumber es un contador utilizado para realizar un
seguimiento de los cambios de configuracin en IIS. Es poco probable que ChangeNumber sea el
mismo en todos los servidores de IIS detrs de un sitio web.

El resultado final es ETags generado por Apache e IIS para el mismo componente que no coincidir
de un servidor a otro. Si los ETags no coinciden, el usuario no recibe la respuesta pequea y rpida
304 para la que se dise ETags; En su lugar, obtendrn una respuesta 200 normal junto con todos
los datos del componente. Si alojas tu sitio web en un solo servidor, esto no es un problema. Pero si
tiene varios servidores que alojan su sitio web y est utilizando Apache o IIS con la configuracin
predeterminada de ETag, sus usuarios estn recibiendo pginas ms lentas, sus servidores tienen una
carga ms alta, estn consumiendo mayor ancho de banda y los proxies no son " T cach su contenido
de manera eficiente. Incluso si sus componentes tienen un futuro futuro Expires , una solicitud GET
condicional se sigue realizando siempre que el usuario pulse Recargar o Actualizar.

Si no est aprovechando el modelo de validacin flexible que proporciona ETags, es mejor

simplemente eliminar el ETag por completo. El encabezado Last-Modified valida basado en la marca
de tiempo del componente. Y la eliminacin de la ETag reduce el tamao de los encabezados HTTP
en la respuesta y las solicitudes posteriores. Este artculo de soporte tcnico de Microsoft describe
cmo quitar ETags. En Apache, esto se hace simplemente agregando la siguiente lnea a su archivo
de configuracin de Apache:

FileTone ninguno

Arriba | Discutir esta regla

Hacer Ajax Cacheable

Etiqueta: contenido

Uno de los beneficios citados de Ajax es que proporciona retroalimentacin instantnea al usuario
porque solicita informacin de forma asncrona desde el servidor web back-end. Sin embargo, el uso
de Ajax no es garanta de que el usuario no ser twiddling sus pulgares a la espera de que JavaScript
asncrono y XML respuestas para volver. En muchas aplicaciones, el hecho de que el usuario se
mantenga o no espera depende de cmo se utilice Ajax. Por ejemplo, en un cliente de correo
electrnico basado en web, el usuario se mantendr esperando los resultados de una solicitud de
Ajax para encontrar todos los mensajes de correo electrnico que coincidan con sus criterios de
bsqueda. Es importante recordar que "asincrnico" no implica "instantneo".

Para mejorar el rendimiento, es importante optimizar estas respuestas de Ajax. La forma ms

importante de mejorar el rendimiento de Ajax es hacer que las respuestas puedan ser almacenadas
en cach, como se describe en Agregar un expira o un encabezado de control de cach . Algunas de
las otras reglas tambin se aplican a Ajax:

Componentes de Gzip
Reducir las bsquedas DNS
Minify JavaScript
Evitar los redireccionamientos
Configurar ETags

Veamos un ejemplo. Un cliente de correo electrnico Web 2.0 puede utilizar Ajax para descargar la
libreta de direcciones del usuario para el autocompletado. Si el usuario no ha modificado su libreta
de direcciones desde la ltima vez que utiliz la aplicacin web de correo electrnico, la respuesta
anterior de la libreta de direcciones podra leerse desde la memoria cach si dicha respuesta de Ajax
se realiz en cach con un futuro encabezado Expires o Cache-Control. El navegador debe ser
informado cuando utilizar una respuesta de la libreta de direcciones en cach antes de solicitar una
nueva. Esto puede hacerse aadiendo una marca de tiempo a la direccin URL de Ajax de la libreta
de direcciones que indica la ltima vez que el usuario modific su libreta de direcciones, por ejemplo,
&t=1190241612 . Si la libreta de direcciones no se ha modificado desde la ltima descarga, la marca
de tiempo ser la misma y la libreta de direcciones se leer en la memoria cach del navegador
eliminando un viaje en red HTTP adicional. Si el usuario ha modificado su libreta de direcciones, la
marca de hora garantiza que la nueva URL no coincida con la respuesta almacenada en cach y el
navegador solicite las entradas actualizadas de la libreta de direcciones.

A pesar de que sus respuestas de Ajax se crean de forma dinmica y slo pueden aplicarse a un solo
usuario, todava se pueden almacenar en cach. Si lo hace, sus aplicaciones Web 2.0 sern ms
rpidas.

Arriba | Discutir esta regla

Enjuague el buffer temprano

Etiqueta: servidor

Cuando los usuarios solicitan una pgina, puede tardar entre 200 y 500 ms para que el servidor
backend pueda unir la pgina HTML. Durante este tiempo, el navegador est inactivo mientras espera
a que los datos lleguen. En PHP tiene la funcin flush () . Le permite enviar su respuesta HTML
parcialmente lista al navegador para que el explorador pueda comenzar a buscar componentes
mientras el backend est ocupado con el resto de la pgina HTML. El beneficio se ve principalmente
en los backends ocupados o frontends ligeros.
Un buen lugar para considerar el enjuague es justo despus de la CABEZA porque el HTML para la
cabeza es generalmente ms fcil producir y permite que usted incluya cualquier CSS y archivos de
Javascript para que el browser comience a buscar en paralelo mientras que el backend todava est
procesando.

Ejemplo:

... <! - css, js ->

</ Head>
<? Php flush (); ?>
<Body>
... <! - contenido ->

Yahoo! La bsqueda fue pionera en la investigacin y pruebas reales de usuarios para probar los
beneficios de usar esta tcnica.

parte superior
Utilizar GET para solicitudes AJAX

Etiqueta: servidor

El Yahoo! Mail encontr que al usar XMLHttpRequest , POST se implementa en los navegadores como
un proceso de dos pasos: enviar los encabezados primero, luego enviar datos. As que lo mejor es
utilizar GET, que slo tiene un paquete TCP para enviar (a menos que tenga un montn de cookies).
La longitud mxima de URL en IE es de 2K, por lo que si envas ms de 2K de datos, es posible que no
puedas usar GET.

Un efecto secundario interesante es que POST sin realmente contabilizar datos se comporta como
GET. Basado en las especificaciones HTTP , GET est destinado a recuperar informacin, por lo que
tiene sentido (semnticamente) utilizar GET cuando slo est solicitando datos, en lugar de enviar
datos que se almacenarn en el servidor.

parte superior
Componentes de post-carga

Etiqueta: contenido

Usted puede mirar ms de cerca su pgina y pregntese: "Qu es absolutamente necesario para
hacer la pgina inicialmente?". 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 tiene
cdigo JavaScript y bibliotecas que arrastran y sueltan y animaciones, stas pueden esperar, porque
arrastrar elementos en la pgina viene despus de la representacin inicial. Otros lugares para buscar
candidatos para post-carga incluyen contenido oculto (contenido que aparece despus de una accin
de usuario) e imgenes debajo del doblez.
Herramientas para ayudarte en tu esfuerzo: YUI Image Loader te permite retrasar las imgenes
debajo del doblez y la utilidad YUI Get es una manera fcil de incluir JS y CSS sobre la marcha. Para
un ejemplo en el salvaje echar un vistazo a Yahoo! Home Page con Firebug's Net Panel activado.

Es bueno cuando las metas de rendimiento estn en lnea con otras prcticas recomendadas de
desarrollo web. En este caso, la idea de la mejora progresiva nos dice que JavaScript, cuando se
admite, puede mejorar la experiencia del usuario, pero hay que asegurarse de que la pgina funciona
incluso sin JavaScript. As que despus de asegurarse de que la pgina funciona bien, puede mejorarla
con algunos scripts cargados que le dan ms timbres y silbidos como arrastrar y soltar y animaciones.

parte superior
Componentes de precarga

Etiqueta: contenido

Precarga puede parecer lo contrario de la post-carga, pero en realidad tiene un objetivo diferente.
Por la precarga de los componentes se puede aprovechar la vez que el navegador est inactivo y
componentes de solicitud (como imgenes, estilos y scripts) que necesitar en el futuro. De esta
manera, cuando el usuario visita la pgina siguiente, usted podra tener la mayor parte de los
componentes que ya estn en la memoria cach y su pgina se carga mucho ms rpido para el
usuario.

En realidad, hay varios tipos de precarga:

Incondicional precarga - tan pronto como incendios onload, de seguir adelante y buscar unos
componentes adicionales. A google.com para obtener un ejemplo de cmo se solicita una imagen de
sprite proceso de carga. Esta imagen de sprite no es necesario en la pgina google.com, pero es
necesario en la pgina de resultados de bsqueda consecutiva.
Condicional precarga - sobre la base de una accin del usuario a tomar una conjetura en que el
usuario se dirige al lado y la precarga en consecuencia. En search.yahoo.com se puede ver cmo se
solicitan algunos componentes adicionales despus de empezar a escribir en el cuadro de entrada.
Anticipado precarga - precarga de antemano antes de lanzar un nuevo diseo. A menudo sucede
despus de un rediseo que se oye: "El nuevo sitio es fresco, pero es ms lento que antes." Parte del
problema podra ser que los usuarios estaban visitando su sitio de edad con una memoria cach
completa, pero el nuevo es siempre una experiencia cach vaca. Puede mitigar este efecto
secundario mediante la precarga algunos componentes antes de que incluso puso en marcha el
rediseo. Su sitio de edad puede utilizar el tiempo que el navegador est inactivo y las imgenes de
peticin y scripts que ser utilizado por el nuevo sitio

parte superior
Reducir el nmero de DOM Elementos

etiqueta: contenido

Una pgina compleja significa ms bytes para descargar y tambin significa un acceso ms lento DOM
en JavaScript. Se hace una diferencia si se recorre a travs de 500 o 5000 elementos DOM en la pgina
cuando desea agregar un controlador de eventos por ejemplo.
Un alto nmero de elementos DOM puede ser un sntoma de que hay algo que debe ser mejorado
con el marcado de la pgina sin eliminar necesariamente el contenido. Est utilizando tablas
anidadas para fines de diseo? Est lanzando en ms <div>s slo para corregir problemas de diseo?
Tal vez hay una manera mejor y ms semnticamente correcta de hacer su margen de beneficio.

Una gran ayuda con los diseos son las utilidades YUI CSS : grids.css le puede ayudar con el diseo
general, y fonts.css reset.css puede ayudar tira de lejos el formato por defecto del navegador. Esta
es una oportunidad para empezar de nuevo y pensar en su margen de beneficio, por ejemplo, utilizar
<div>s slo cuando tiene sentido semntico, y no porque se hace una nueva lnea.

El nmero de elementos DOM es fcil de probar, slo tiene que escribir en la consola de Firebug:
document.getElementsByTagName('*').length

Y cuntos elementos DOM son demasiadas? Compruebe otras pginas similares que tienen buen
margen de beneficio. Por ejemplo, el Yahoo! Home Page es una pgina muy ocupado y an menos
de 700 elementos (etiquetas HTML).

parte superior
Componentes divisin a travs de dominios

etiqueta: contenido

La divisin de componentes le permite maximizar descargas paralelas. Asegrese de que est

utilizando no ms de 2-4 dominios debido a la pena de bsqueda de DNS. Por ejemplo, puede alojar
su HTML y contenido dinmico en www.example.orgy separacin de componentes estticos entre
static1.example.orgystatic2.example.org

Para obtener ms informacin de verificacin " Maximizacin de descargas paralelas en el viaje

compartido Carril " por Tenni Theurer y Patty Chi.

parte superior
Minimizar el nmero de marcos flotantes

etiqueta: contenido

Marcos flotantes permiten que un documento HTML que se insertar en el documento principal. Es
importante entender cmo funcionan iframes para que puedan ser utilizados con eficacia.

<iframe> pros:

Ayuda con el contenido lenta de terceros, como insignias y anuncios

entorno limitado de seguridad
guiones de descarga en paralelo

<iframe> contras:

Costoso, incluso si est en blanco

Pgina de bloques onload
 No semntica

parte superior
No hay 404s

etiqueta: contenido

peticiones HTTP son caros, as hacer una peticin HTTP y obtener una respuesta intil (es decir, 404
no encontrado) es totalmente innecesario y se ralentizar la experiencia del usuario sin ningn
beneficio.

Algunos sitios tienen 404 votos "quiso decir X?", Que es ideal para la experiencia del usuario, sino
tambin los desechos recursos del servidor (como la base de datos, etc.). Particularmente malo es
cuando el enlace a JavaScript externo est mal y el resultado es un 404. En primer lugar, esta descarga
se bloquear descargas paralelas. A continuacin, el navegador puede tratar de analizar el cuerpo de
la respuesta 404 como si se tratara de cdigo JavaScript, tratando de encontrar algo til en ella.

parte superior
Reducir el tamao de las cookies

etiqueta: Galleta

cookies HTTP se utilizan para una variedad de razones tales como la autenticacin y la
personalizacin. Informacin sobre cookies se intercambia en las cabeceras HTTP entre los servidores
web y navegadores. Es importante mantener el tamao de las galletas tan bajas como sea posible
para minimizar el impacto en el tiempo de respuesta del usuario.

Para ms informacin consultar "Cuando el trocitos de galletas" por Tenni Theurer y Patty Chi. El
llevar a casa de esta investigacin:

Eliminar las cookies innecesarias

Mantenga tamaos de galletas tan bajo como sea posible para minimizar el impacto en el tiempo
de respuesta de los usuarios
Tenga en cuenta la configuracin de cookies en el nivel de dominio adecuado para que otros
subdominios no se vean afectados
Establecer una fecha de caducidad apropiadamente. Expira una anterior fecha o ninguno elimina
la cookie antes, mejorar el tiempo de respuesta de los usuarios

parte superior
Utilizar dominios de cookies libres para Componentes

etiqueta: Galleta

Cuando el navegador hace una peticin para una imagen esttica y enva las galletas junto con la
solicitud, el servidor no tiene ningn uso para esas galletas. Por lo que slo crean trfico de la red sin
una buena razn. Usted debe asegurarse de componentes estticos se solicitan con las peticiones sin
cookies. Crear un subdominio y alojar todos sus componentes estticos all.
Si su dominio es www.example.org , puede alojar sus componentes estticos en static.example.org
.Sin embargo, si ya ha configurado cookies en el dominio de nivel superior example.orgen lugar de
www.example.org, a continuacin, todas las solicitudes para static.example.orgincluirn esas
galletas. En este caso, puede comprar un dominio completamente nuevo, alojar sus componentes
estticos all y mantener este dominio libre de cookies. Yahoo! Utiliza yimg.com , YouTube utiliza
ytimg.com , Amazon utiliza images-amazon.com y as sucesivamente.

Otro de los beneficios de albergar componentes estticos en un dominio sin cookies es que algunos
servidores proxy podran negarse a almacenar en cach los componentes que se solicitan con
galletas. En una nota relacionada, si usted se pregunta si debe usar example.org o www.example.org
para su pgina de inicio, considerar el impacto de la galleta. Omitiendo www le deja otra opcin que
escribir cookies para *.example.org, por razones de rendimiento que es mejor usar el subdominio
www y escribir las cookies para ese subdominio.

parte superior
Minimizar Acceso DOM

etiqueta: javascript

El acceso a los elementos DOM con JavaScript es lento por lo que con el fin de tener una pgina ms
sensible, usted debe:

referencias de cach a los elementos de los que se accede

Actualizacin de nodos "en lnea" y luego aadirlos al rbol
Evitar la fijacin de diseo con JavaScript

Para ms informacin consultar el teatro de YUI "High Performance Ajax Aplicaciones" por Julien
Lecomte.

parte superior
Desarrollar inteligente Gestores de Eventos

etiqueta: javascript

A veces, las pginas se sienten menos sensible debido a demasiados manejadores de eventos unidos
a diferentes elementos del rbol DOM que luego se ejecuta con demasiada frecuencia. Es por eso
que el uso de delegacin de eventos es un buen enfoque. Si usted tiene 10 botones dentro de una
div, conecte slo un controlador de eventos a la envoltura div, en lugar de un controlador para cada
botn. Eventos burbuja hasta por lo que ser capaz de capturar el evento y averiguar qu botn se
origin.

Tambin no es necesario esperar a que el proceso de carga con el fin de empezar a hacer algo con el
rbol DOM. A menudo, todo lo que necesita es el elemento que desee acceder a estar disponible en
el rbol. Usted no tiene que esperar a que todas las imgenes para ser descargados.
DOMContentLoadedes el evento que podra considerar el uso en lugar del proceso de carga, pero
hasta que est disponible en todos los navegadores, se puede utilizar el YUI Evento utilidad, que tiene
un onAvailablemtodo.
Para ms informacin consultar el teatro de YUI "High Performance Ajax Aplicaciones" por Julien
Lecomte.

parte superior
Elija <link> sobre @import

etiqueta: css

Una de las mejores prcticas anteriores CSS establece que debe ser en la parte superior con el fin de
permitir el procesamiento progresivo.

En IE @importse comporta igual que el uso <link>en la parte inferior de la pgina, as que es mejor
no usarlo.

parte superior
Evitar Filtros

etiqueta: css

El IE-propietaria AlphaImageLoaderfiltro intenta solucionar un problema con el color verdadero PNG

semitransparentes en las versiones de IE <7. El problema con este filtro es que bloquea la
representacin y congela el navegador mientras la imagen est siendo descargado. Tambin
aumenta el consumo de memoria y se aplica por cada elemento, no por imagen, por lo que el
problema se multiplica.

El mejor enfoque es evitar AlphaImageLoaderpor completo y utilizar PNG8 gracia degradantes lugar,
que son bien en IE. Si es absolutamente necesario AlphaImageLoader, utilizar el hack subrayado
_filterque no penaliza a los usuarios de IE7 +.

parte superior
optimizar Imgenes

etiqueta: imgenes

Despus de un diseador se realiza con la creacin de las imgenes para su pgina web, todava hay
algunas cosas que usted puede probar antes de FTP esas imgenes a su servidor web.

Puede comprobar los archivos GIF y ver si estn utilizando una paleta de tamao correspondiente
al nmero de colores de la imagen. El uso de ImageMagick que es fcil de comprobar utilizando
identify -verbose image.gif
Cuando vea una imagen utilizando 4 colores y unas 256 de color "slots" en la paleta, hay espacio
para la mejora.
Intenta convertir GIF a PNG y ver si hay un ahorro. Ms a menudo que no, no lo es. Los
desarrolladores a menudo dudan en utilizar PNG debido a la limitada ayuda en los navegadores, pero
esto ahora es una cosa del pasado. El nico problema real es alfa-transparencia en verdaderos
archivos PNG de color, pero de nuevo, GIF no son color verdadero y no son compatibles con
transparencia variable tampoco. As que cualquier cosa que un GIF puede hacer, una paleta de PNG
(PNG8) puede hacer tambin (a excepcin de las animaciones). Este sencillo resultados de los
comandos de ImageMagick en PNG totalmente seguros de usar:
convert image.gif image.png
"Todo lo que decimos es: Dar PiNG una oportunidad"
Ejecutar pngcrush (o cualquier otra herramienta de optimizador PNG) en todos sus archivos PNG.
Ejemplo:
pngcrush image.png -rem alla -reduce -brute result.png
Jpegtran ejecutar en todos sus archivos JPEG. Esta herramienta hace operaciones JPEG sin prdida,
como la rotacin y tambin se puede utilizar para optimizar y eliminar los comentarios y otra
informacin intil (como la informacin EXIF) de sus imgenes.
jpegtran -copy none -optimize -perfect src.jpg dest.jpg

parte superior
Optimizar Sprites CSS

etiqueta: imgenes

La organizacin de las imgenes en el sprite horizontalmente en lugar de forma vertical por lo

general resulta en un menor tamao de archivo.
La combinacin de colores similares en un sprite le ayuda a mantener bajo el nmero de color,
idealmente bajo 256 colores para encajar en un PNG8.
"Be-amigable mvil" y no dejar grandes huecos entre las imgenes de un sprite. Esto no afecta el
tamao del archivo como mucho, pero requiere menos memoria para el agente de usuario para
descomprimir la imagen en un mapa de pxeles. imagen de 100x100 pxeles es de 10 mil, donde
1000x1000 es 1 milln de pxeles

parte superior
No escalar imgenes en HTML

etiqueta: imgenes

No use una imagen ms grande de lo que necesita slo porque se puede ajustar la anchura y la altura
en HTML. Si necesitas
<img width="100" height="100" src="mycat.jpg" alt="My Cat" />
entonces su imagen (Mycat.jpg) debe ser una imagen de 100x100px 500x500px reducido en lugar de.

parte superior
Hacer favicon.ico Pequeas y cacheable

etiqueta: imgenes

El favicon.ico es una imagen que permanece en la raz de su servidor. Es un mal necesario porque
incluso si no se preocupan por que el navegador seguir siendo solicitarlo, as que es mejor no
responder con una 404 Not Found. Tambin, ya que es en el mismo servidor, se envan las cookies
cada vez que se solicita. Esta imagen tambin interfiere con la secuencia de descarga, por ejemplo,
en Internet Explorer cuando se solicita componentes adicionales en el proceso de carga, el favicon
se descargar antes de que estos componentes adicionales.
As que para mitigar los inconvenientes de tener un favicon.ico asegrese de que:

Es pequeo, preferiblemente bajo 1K.

Conjunto Expira cabecera con lo que se sienta cmodo (ya que no se puede cambiar el nombre si
decide cambiarlo). Probablemente se puede establecer con seguridad el encabezado Caduca unos
meses en el futuro. Puede comprobar la ltima fecha de modificacin de su favicon.ico actual para
tomar una decisin informada.

Imagemagick puede ayudar a crear pequeas faviconos

parte superior
Separacin de los componentes bajo 25K

etiqueta: mviles

Esta restriccin est relacionada con el hecho de que el iPhone no lo har componentes de cach
ms grande que 25K. Tenga en cuenta que este es el comprimido de tamao. Aqu es donde la
minimizacin es importante porque gzip por s sola puede no ser suficiente.

Para ms informacin consultar " Performance Research, Parte 5: iPhone Cacheabilidad - Hacer que
se pegue " por Wayne Shea y Tenni Theurer.

parte superior
Componentes del paquete en un documento multiparte

etiqueta: mviles

componentes de embalaje en un documento de varias partes es como un correo electrnico con

archivos adjuntos, que ayuda a hacer salir varios componentes con una peticin HTTP (recuerde: las
peticiones HTTP son caros). Cuando se utiliza esta tcnica, comprobar primero si el agente de usuario
soporta (iPhone no lo hace).
Evitar src imagen vaca

etiqueta: servidor

Imagen con cadena vaca src atributo aparece ms de uno va a esperar. Aparece en forma de dos:

HTML puro

<Img src = "">

JavaScript

var img = new Image ();

img.src = "";

Ambas formas causan el mismo efecto: navegador hace otra peticin al servidor.
 Internet Explorer realiza una solicitud al directorio en el que se encuentra la pgina.
Safari y Chrome hacer una solicitud a la pgina en s.
Firefox 3 y versiones anteriores se comportan igual que Safari y Chrome, pero la versin 3.5
abordaron esta cuestin [bug 444931] y ya no enva una solicitud.
Opera no hace nada cuando se encuentra una imagen src vaca.

Por qu es malo este comportamiento?

Paralizar sus servidores mediante el envo de una gran cantidad de trfico inesperado,
especialmente para las pginas que reciben millones de pginas vistas por da.
servidor de residuos de computacin ciclos generar una pgina que nunca se puede ver.
Posiblemente datos de usuario corrupto. Si est realizando el seguimiento del estado de la
solicitud, ya sea por las cookies o de otra manera, usted tiene la posibilidad de destruir los datos. A
pesar de que la solicitud de imagen no devuelve una imagen, todas las cabeceras son ledos y
aceptados por el navegador, incluyendo todas las cookies. Mientras que el resto de la respuesta se
tira, el dao ya se puede hacer.

La causa de este comportamiento es la forma en que la resolucin URI se realiza en los navegadores.
Este comportamiento se define en el RFC 3986 - Uniform Resource Identifiers. Cuando una cadena
vaca se encuentra como un URI, se considera un URI relativa y se resuelve de acuerdo con el
algoritmo definido en la seccin 5.2. Este ejemplo especfico, una cadena vaca, aparece en la seccin
5.4. Firefox, Safari y Chrome estn resolviendo una cadena vaca correctamente por la especificacin,
mientras que Internet Explorer est resolviendo de forma incorrecta, al parecer, de acuerdo con una
versin anterior de la especificacin, RFC 2396 - Identificadores Uniformes de Recursos (esto fue
hecho anticuado por RFC 3986) . As que, tcnicamente, los navegadores estn haciendo lo que
tienen que hacer para resolver URIs relativas. El problema es que, en este contexto, la cadena vaca
es claramente intencional.

HTML5 se suma a la descripcin del atributo src de la etiqueta para instruir a los navegadores no
hacer una solicitud adicional en la seccin 4.8.2:

El atributo src debe estar presente y debe contener una URL vlida referencia a un recurso de
imagen animada opcionalmente no interactivo, que ni est paginado ni guin. Si el URI base del
elemento es la misma que la direccin del documento, a continuacin, el valor del atributo src no
debe ser la cadena vaca.

Con suerte, los navegadores no tendrn este problema en el futuro. Por desgracia, no existe tal
clusula para <script src = ""> y <link href = "">. Tal vez todava hay tiempo para hacer que el ajuste
para asegurar los navegadores no implementan accidentalmente este comportamiento.

Esta regla fue inspirado por el gur de JavaScript Yahoo! 'S Nicolas C. Zakas. Para obtener ms
informacin, consulte su artculo " imagen vaca src puede destruir su sitio ".