Chalalo Land : Optimización

[Tips] Desactivar EnablePartialRendering en ScriptManager cuando no utilices UpdatePanels (WebForm no Dead)

Gonzalo Perez — Wed, 23 Feb 2011 05:19:08 GMT

Hola que tal?, si bien hay personas que se han puesto una bandera de lucha en contra de los webforms (no comparto esta postura, luego escribiré sobre eso), existen muchas aplicaciones construidas bajo la modalidad de WebForms que utilizan ASP.NET Ajax, y sin duda, se seguirán creando.

Uno de los elementos que utilizamos cuando ocupamos ASP.NET Ajax es el ScriptManager, que muchos desarrolladores lo utilizan sin mayor configuración. Es aquí en donde quiero detenerme un momento, y es que si no estas ocupando un UpdatePanel en la página, y tienes un ScriptManager en la página, ahorras generación y carga de Scripts seteando la propiedad EnablePartialRedering en false.

Ahora bien, por mail me preguntaron, “de que sirve un ScriptManager sin un UpdatePanel!”, y la respuesta es “de mucho”, por ejemplo, podemos utilizar algunos controles del Ajax Control Toolkit que no necesitan un UpdatePanel, sin ir más lejos el control Color Picker junto a un ToolkitScripManager (que hereda de Script Manager)

Caso Ejemplo 1

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>

<br />

Color:<br />

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

   <asp:ColorPickerExtender
        ID="TextBox1_ColorPickerExtender"
        runat="server" Enabled="True"
        TargetControlID="TextBox1">

</asp:ColorPickerExtender>

Lo que resulta en:

Caso Ejemplo 2

Como vez, sin UpdatePanel, otro escenario es por ejemplo la llamada asíncrona a un Webservice o a un WebMethod mediante el ScriptManager y Javascript, para el ejemplo veremos el primer caso:

Vamos a tener un WebService que se exponga un WebMethod que se llame cuadrado, que simplemente y para efectos del demo, calculará y devolverá el cuadrado de un número.

Public Class wsmartes

Inherits System.Web.Services.WebService

<WebMethod()> _

Public Function Cuadrado(numero As Integer) As Integer

Return numero * numero

End Function

End Class

Luego desde una página haremos la llamada, primero a configurar el ScriptManager para que pueda acceder al servicio:

<asp:ScriptManager ID="ScriptManager1" runat="server">

<asp:ServiceReference Path="~/wsmartes.asmx" />

</Services>

</asp:ScriptManager>

Luego el javascript para la llamada Async al Servicio Web.

function Calcula() {

demo1.wsmartes.Cuadrado(document.getElementById("Text1").value, ResultoBien, Falla);

}

function ResultoBien(args) {

alert("El Cuadrado es: " + args);

}

function Falla(error) {

alert("Error:" + error.get_message());

}

</script>

En la página tengo solo un un input text y un boton html, al momento de ejecutar:

Pero que pasa si no tenemos desactivada la propiedad EnablePartialRedering:

Tenemos aprox 464KB descargados a la página por la generación de Script (obviamente no contamos el WebForm1.aspx, que es la pagina propiamente tal) desde el ScriptManager, sin embargo si desactivamos la propiedad en cuestión:

Ahora tenemos 349Kb , es decir 115Kb aprox menos en la carga de pagina sin contar que no tenemos la propiedad ScriptMode en Release.

Ahora si agregamos esta propiedad, ScriptMode en Release:

Ahora disminuimos a 85kb aprox, es decir, logramos reducir el tamaño de los Script Considerablemente!

Como vez, con pequeños cambios podemos lograr optimizar nuestras aplicaciones existentes , espero que te sirva!.
Saludos,
Gonzalo

Tip – RIOT , Optimizador Gratis de Imágenes para la Web

Gonzalo Perez — Fri, 03 Dec 2010 02:39:00 GMT

Hace un tiempo atrás he estado hablando de la optimización de archivos JS, CSS , Image Sprites, reducir los request, etc. Sin embargo, muchas veces ganamos algunas optimizaciones, pero se nos van al pozo al utilizar imágenes de grandes tamaños.

Entonces para agregar un programa más a la excelente lista confeccionada por Stephen Walther , de programas que deberías usar en su Post:

http://stephenwalther.com/blog/archive/2010/11/22/10-essential-tools-for-building-asp-net-websites.aspx

Sprite and Image Optimization Framework
Microsoft Ajax Minifier.
ySlow
ELMAH
Pingdom
Host Tracker
HTML Spell Checker
IIS SEO Toolkit
LinqPad
NET Reflector

Ahora bien, quiero compartir este excelente software que encontré, se llama RIOT y nos permite actualizar las imágenes. Cual es la gracia? es bastante extensible y gratis.

Software como este, los utilizábamos bastante hace un par de años, cuando la banda ancha no era “ancha”, pero hora debemos igualmente de preocuparnos por el peso de las imágenes. LA imagen del ejemplo, pesa 50K, y luego de optimizarse 10k, 40K menos, nada de mal.

Descarga este excelente software en : http://luci.criosweb.ro/riot/download/

Pruébalo, no te vas a arrepentir, jejeje.
Saludos!
Gonzalo

[Tutorial] ASP.NET , El nuevo Sprite & Image Optimization Framework

Gonzalo Perez — Wed, 18 Aug 2010 05:56:00 GMT

Que tal? Vamos a revisar este nuevo release del Team de ASP.NET. Release que corresponde a un Framework de optimización de imágenes, que nos permite utilizar CSS Sprites y base64 image inlining para hacer que nuestro sitio web cargue las imágenes más rápido.

Lo primero , es que lo puedes descargar, junto a su documentación en:

http://aspnet.codeplex.com/releases/view/50140

La siguiente guía está basada en la documentación oficial del producto, al final vas a poder ver un video de como esto funciona. La documentación estaba en ingles, pero la traduje y aproveché de estudiar esta nueva herramienta, y quiero compartir lo que aprendí.

Técnicas de optimización de Imágenes

CSS Sprites

Si quieres saber más sobre CSS Sprites visita este artículo:

http://geeks.ms/blogs/gperez/archive/2010/01/04/optimizando-tu-website-con-css-sprites-caso-pr-225-ctico.aspx

Image Inlining Using Base-64 Encoding

Otra técnica de optimización para imágenes es la denominada (la dejo en inglés mejor) image inlining. En esta técnica, se embebe la data de la imagen (usando la codificación base-64) directamente en el HTML o en el CSS en lugar de hacer la referencia a la imagen como recurso externo. Cabe recordar que cuando es recurso externo, se realiza un request. Al integrar las imágenes en el HTML o CSS, podemos reducir el número de request a las imágenes en una página a cero (o a uno, dependiendo de si los datos de la imagen se encuentran en la misma página o en una hoja de estilos referenciada).El total del contenido se puede descargar en un resquest.

Ejemplo:

Desventajas el Inlining Images

Si bien esta técnica nos permite optimizar bastante el tema de la carga de imágenes en nuestro sitio, tiene algunas desventajas:

Soporte del Browser, ya que no todos los browser lo soportan , de hecho podríamos decir que la mayoría, hasta ahora, no lo soporta, para darnos una idea, IE8 lo soporta y las nuevas versiones, también FireFox desde la versión 3.5
Tamaño más grande de las imágenes, estas al estar codificadas en base-64, su tamaño se incrementa, hasta un 40% más del tamaño original.
Cache, ya que los browser no cachean imágenes encodeadas en base-64, si estas están encodeadas directamente en el HTML, sin embargo, si están n un archivo externo CSS, si funciona l cache.

Comparación entre Sprites e Inlining Images

Tag img normal	Sprites	Base-64 Inlining
Alto numero de request, uno por cada imagen de la página	Numero de Request HTTP Moderados (uno para el archivo RSS y otro para el Sprite)	Bajo número de request (solo uno, para el archivo CSS)
Tamaño de archivo moderado	Tamaño pequeño de archivo, se ahorra espacio al tener una sola imagen que contiene a todas.	Tamaño de archivo mayor al estar codificado en base-64
Compatible con todos los Browsers	Compatible con todos los Browsers actuales.	Solo compatible con las ultimas versiones de browser basados en WebKit y Mozilla

Optimización de Imágenes en ASP.NET

Para usar images Sprites en Web Forms, podemos utilizar el nuevo control SpriteImage, este control funciona de manera similar al control Image que ya conocíamos, pero automatiza totalmente la tarea de desplegar las imágenes optimizadas con la técnica CSSS Sprite. Además , podemos utilizar los sprites creados por este control en páginas HTML Standars (como elementos img), o ya sea utilizando helpers ImageSprite.Image para MVC o para Razor.

Instalando y Configurando el ASP.NET Image Optimización Framework

Para agregar la funcionalidad a nuestro sitio, debemos agregar las DLL al proyecto y referenciar al ensamblado ImageOptimizationFramework. Los sitios Web Form (ASP.NET Tradicional), además deben referenciar el ensamblado WebFormsControl. Para los sitios que utilizan MVC y Razor deben referenciar al ensamblado MVCHelper para tener acceso al helper ImageSprite.Image.

La siguiente imagen resume lo anterior:

El ensamblado ImageOptimizationFramework incluye un módulo que se debe ejecutar cuando la aplicación se inicia, para habilitar este módulo, agregamos en el Web.config:

Para II6

Para II7

<system.webServer>

<add type="Microsoft.Samples.Web.ImageOptimizationModule"

name ="Microsoft.Samples.Web.ImageOptimizationModule"/>

</modules>

</system.webServer>

Preparar las Imágenes para la Optimización

Para usar CSS Sprites, se debe agregar las imágenes al sitio en una carpeta específica. Opcionalmente podemos configurar opciones para el Sprite mediante un archivo XML.

Agregar imágenes a la Carpeta App_Sprites

Todos los imágenes deben ser agregadas a la carpeta App_Sprites, que debe estar por debajo de la raíz del sitio. Esta carpeta puede incluir Sub Carpetas. Para este post estoy utilizando las imágenes del ejemplo que viene por defecto (y en la documentación oficial)
Ej:

En tiempo de ejecución, las imágenes en casa subcarpeta se fusionan automáticamente en Sprites o embebido directamente en archivos CSS (que son creados por el paquete de optimización), dependiendo como se ha configurado.

Configuración las opciones de Optimización

Podemos sobrescribir la configuración por defecto creando el archivo settings.xml. Este archivo lo podemos crear en la carpeta App_Sprites o en cada subcarpeta que contiene los image sprites. Si una subcarpeta no contiene el archivo settings.xml, entonces esta hereda la configuración desde el archivo settings.xml de la carpeta padre (si es que existe, o si no se utiliza la configuración por defecto).

En el archivo settings,xml, podemos setear los siguientes elementos:

FileFormat: Esto controla el formato de la imagen del sprite generado. Las Opciones son JPG, GIF, PNG y BMP.

Calidad: Controla el nivel de compresión del resultando del sprite. El valor se especifica como un entero que representa el porcentaje de compresión

MazSize: Esto determina el tamaño máximo (en KB) para el image sprite. Si el tamaño del combinado de imágenes en una carpeta excede este valor, entonces se crearán multiples sprites automáticamente y será transparente la referencia a través de un solo archivo CSS.

BackgroundColor: Define el color de fondo de image sprite, incluyendo transparencia. Se especifica en el formato estándar ARGB. Esta configuración se suele utilizar cuando se agregan imágenes PNG transparentes a un sprite que se va a generar en un formato que no admite la transparencia.

Base64Encoding: Esto habilita o deshabilita el Base64Encoding. Incluso si esta opción está activada, los sprites se producirán por compatibilidad con navegadores que no soportan imágenes en línea)

El siguiente ejemplo muestra el contendido de un archivo setting,xml, que refleja la configuración por defecto.

<?xml version="1.0" encoding="utf-8"?><ImageOptimizationSettings>
<FileFormat>png</FileFormat>
<Base64Encoding>true</Base64Encoding>
<Quality>80</Quality>
<BackgroundColor>00000000</BackgroundColor>
<MaxSize>500</MaxSize>
</ImageOptimizationSettings>

Notar lo siguiente:

El elemento Quality es redundante para el ejemplo, debido a que es ignorado cuando el output de formato de salida seleccionado es png.
Si se especifica un formato de salida que no es reconocido , el defecto es PNG
El valor BackgroundColor es ignorado para las imágenes Base-64

¿Como funciona ASP.NET Image Optimization?

Monitoreo de la carpeta APP_Sprites para detección de Cambios

El módulo ImageOptimizationModule se ejecuta durante la fase de carga inicial de la aplicación ASP.NET e implementa el framework de optimización propiamente tal. Agrega un cache de dependencia a la carpeta App_Sprites y a todas las subcarpetas(si es que existen). Si el contenido de alguna de estas subcarpetas cambia, el framework de optimización hace lo siguiente:

Si una imagen o archivo de configuración es agregado, eliminado o modificado, o la carpeta se vuelve a generar, se creara una nueva imagen y archivo css. Si las subcarpetas no tienen un archivo settings.xml, será reconstruido, debido a que sus valores heredados pudieron haber cambiado.
Si una carpeta se agrega, se agrega también un elemento a la cache
Si una carpeta es eliminada, se elimina también de la cache

Adicionalmente, un archivo llamado timestamp.dat es utilizado para comprobar si la carpeta tiene que ser reconstruida (img y css) cuando se inicia la aplicación. Si este archivo no ha cambiado cuando se reinicia la aplicación, entonces no hay que reconstruir todo la carpeta App_Sprites, proceso que puede hacer uso intensivo de CPU y Disco.

¿Como son desplegadas las imágenes por el control Built-In?

Los Sprites y las inlined images son redenderizadas usando CSS IDs o clases, las cuales se asocian a los elementos de la pagina como los div, span,a ,p e img. Puesto que el fin es optimizar la carga de imágenes, y que la mejora se siga tratando como imágenes vs el CSS, el control para WebForm y las funciones Helpers hace que estas imágenes utilice una imagen GIF cuyas características son transparente y de 1x1 píxeles. (Codificada en el atributo scr), y luego se usan las clases CSS para mostrar la imagen correcta.

El siguiente ejemplo muestra el código generado al redenderizar:

Para asegurar la compatibilidad Cross Browser, el framework de optimización genera dos archivos CSS: highCompact.css, el cual permite el uso de images inline(si es que lo estamos utilizando), y lowCompat.css, que permite solo image Sprites. Para que la referencia correctamente, se debe vincular la hoja de estilo se debe vincular en el head de la página. El siguiente ejemplo muestra un link a la hoja de estilos que es compatible con todos los navegadores (esto es, que utiliza CSS Sprites)

Agregar las imágenes optimizadas a la Página.

El enfoque o la forma que se utiliza para aprovechar la ventaja de las imágenes optimizadas en una página web depende de si se está utilizando un WebForm, una vista de MVC o Razor, o incluso, si se quiere crear manualmente y agregar los tags de forma manual.

Control para ASP.NET Web Forms

Para usar la optimización de imágenes in ASP.NET Web Forms, agregamos el control SpriteImage, la sintaxis sería algo como:

<SpriteImage:SpriteImage ID="SpriteImage3" runat="server"
ImageUrl="~/App_Sprites/aspNetLogos/2.png" Optimize="true" />

Podemos setear la propiedad ImageUrl a la imagen sin optimizar en la carpeta App_Sprites, y adicionalmente setear la propiedad Optimize a true. Cuando la pagina se renderiza el framework de optimización agrega el link de referencia al CSS apropiado en la cabecera de la página y procesa la imagen adecuada para la opción elegida.

Helper ASP.NET MVC y Razor

Para usar la optimización en vistas MVC o páginas Razor, debemos agregar dos helpers, uno para procesar el link al archivo CSS en la vista, y el otro para renderizar la imagen en la página. Para lo primero, agregamos el siguiente helper en el tag head.

<%: Microsoft.Samples.Web.ImageSprite.ImportStylesheet("~/App_Sprites/") %>

El método ImageSprite.ImportStylesheet genera el HTML requerido para crear el link apropiado al CSS, según la compatibilidad del browser.Para las aplicaciones MVC, debemos pasar esto al header, típicamente utilizando un elemento ContentPlaceHolder, al estar utilizando MasterPages.Para insertar la imagen en la vista mvc o razor, usamos el helper ImageSprite.Image como el siguiente ejemplo:

<%: Microsoft.Samples.Web.ImageSprite.Image("~/App_Sprites/myImage.jpg")

Ahora el video

Como siempre, espero que te sirva!
Saludos,
Gonzalo

Material Charla Mejores Prácticas en el Desarrollo de Sitios Web & ASP.NET Ajax

Gonzalo Perez — Fri, 23 Jul 2010 15:59:00 GMT

Ayer jueves 22/07 tuve la oportunidad de participar como Orador en la charla Mejores Prácticas en el Desarrollo del Sitios Web & ASP.NET Ajax & Nuevas Funcionalidades en ASP.NET 4 junto a Juan Carlos Olamendy, un título Bastante Largo para una agenda también extensa. Estoy muy contento ya que recibimos buenos comentarios sobre la charla, las preguntas estuvieron muy buenas, y hubo espacio para discusión.

AGENDA:

Ya están subiendo al sitio de Comunidades Técnicas la grabación de ayer http://www.facebook.com/ComunidadesMS (si no está ahora, durante el día debería), te recomiendo que te hagas fan de esa manera siempre vas a estar actualizado con los eventos.

Creo que Juan Carlos va a subir también los ejemplos, por mi parte te dejo la PPT y links de mi sitio que están relacionados con lo que vimos ayer:

PPTX:
http://cid-053a660afa3473b3.office.live.com/view.aspx/P%c3%bablico/Charla22.pptx

LINKS:

Optimizando tu Web con CSS SPrites

Utilizar Microsoft Ajax CDN

Minificar los archivos JavaScript

CompositeScript – Combinar para optimizar

Mejora para los motores de Búsqueda (ASP.NET 4)

Mejorar el rendimiento optimizando los ViewState (ASP.NET 4)

Nuevas Plantillas en el Cliente con Jquery

[Tutorial]Introducción al nuevo ScriptLoader de ASP.NET AJAX Library

[Tips] ASP.NET 4 Comprime las variables de Session (Para WebFarm)

[Tips] ASP.NET 4 – Extensible Request Validation, con ejemplo.

[ScreenCast] ASP.NET 4.0 – ClientIDMode

[ScreenCast] ASP.NET 4.0 – ViewStateMode

[ScreenCast] ASP.NET 4.0 – Routing

[ScreenCast] ASP.NET 4.0 – RedirectPermanent

[ASP.NET 4.0] Mejora para los Motores de Búsqueda- Meta Tag y Descripción.

Espero que te sirvan los links, nos vemos!
Saludos,
Gonzalo

Material Charla - Técnicas Ninja de Optimización Web

Gonzalo Perez — Sat, 15 May 2010 04:45:00 GMT

Hola, quiero dar las gracias por los buenos comentarios que recibí por la charla sobre tips de optimización. Como me comprometí, comparto la presentación:

Sobre HTTP Watch:
http://geeks.ms/blogs/gperez/archive/2010/04/20/tips-debug-de-mejor-manera-con-ie8-y-http-watch.aspx

Sobre CSS Sprite:
http://geeks.ms/blogs/gperez/archive/2010/01/04/optimizando-tu-website-con-css-sprites-caso-pr-225-ctico.aspx

Sobre Ajax Minifier:
http://geeks.ms/blogs/gperez/archive/2009/11/17/tutoturial-microsoft-ajax-minifier-optimiza-tus-archivos-javascript.aspx

Sobre CompositeScript + ScriptRefenceProfiler:
http://geeks.ms/blogs/gperez/archive/2009/06/04/scriptreferenceprofiler-compositescript-y-pensando-por-que-no-lo-ocupe-antes-optimizaci-243-n-de-request-de-javasscripts.aspx

Descargar los ejemplos de la Charla:

Saludos!
Gonzalo

[Noticia] Ajax Minifier 4.0 Release, y con soporte de minificar los CSS! :)

Gonzalo Perez — Tue, 16 Feb 2010 19:42:00 GMT

Hace un tiempo escribí el artículo:
http://geeks.ms/blogs/gperez/archive/2009/11/17/tutoturial-microsoft-ajax-minifier-optimiza-tus-archivos-javascript.aspx <-que buen artículo! jejeje

En donde enseñaba a minificar los archivos JS a partir de la herramienta Microsoft Ajax Minifier, la buena noticia es que ahora, está el Release 4.0 y que trae como novedad el soporte para la minificación de nuestros CSS.

La Minificación por Defecto de CSS Permite:

Remover todos los espacios en blanco que no son relevantes
Remover todos los comentarios
Remover los punto y comas innecesarios
Reducir el código de color (por un equivalente,obvio)
Reducir representaciones de enteros, eliminando los ceros iniciales y finales.
Remover los especificadores de unidad que tienen valor Cero
Utilizar nombres de colores basados estrictamente en W3C para reducir aún más el código resultante

Y donde puedes conseguir esta herramienta:
Descarga:
http://aspnet.codeplex.com/releases/view/40584

Introducción:
http://geeks.ms/blogs/gperez/archive/2009/11/17/tutoturial-microsoft-ajax-minifier-optimiza-tus-archivos-javascript.aspx

Documentación completa:
http://www.asp.net/ajaxlibrary/AjaxMinDocumentation.ashx

Espero que te sea de utilidad, esta muy bueno!
Saludos,
Gonzalo

ASP.NET 4.0 El nuevo RedirectPermanent, otra mejora para los SEO

Gonzalo Perez — Fri, 12 Feb 2010 14:12:00 GMT

Para comenzar a hablar sobre este nuevo método de la Clase response, tenemos que hablar sobre como funciona el clásico Responde.Redirect.Cuando utilizamos Response.redirect se indica a nuestro server que haga una redirección temporal a la nueva URL (genera una respuesta HTTP 302) esto no tiene incidencia para el usuario que navega nuestra página, pero los motores de búsqueda asumen que solo es un cambio de URL temporal y no actualizaran sus índices.Existe con ASP.NET 4.0 el método Redirectpermanent que nos va a generar una respuesta HTTP 301, (redirección permanente) que le indica a los SEO que es la nueva URL a indexar.
Pero veamos un ejemplo práctico, vamos a tener una aplicación que utilice los dos métodos (redirect y redirectPermanent) y vamos a ver con Firebug es el resultado de la ejecución de ambos.

y el código…

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
Response.Redirect("destino.aspx")
End Sub

Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click
Response.RedirectPermanent("destino.aspx")
End Sub Todo listo , entonces …
Presionando el Primer Botón (HTTP 302) , con response.redirect:

Presionando el Segundo Botón (HTTP 301) , con response.redirectPermanent:

Esto es mucho “mejor recibido” por los SEO de los motores de búsqueda como Bing o Google, entonces para tener en cuenta esta mejora :).

El Maestro Ibon Landa también escribió sobre esto en su blog:
http://geeks.ms/blogs/ilanda/archive/2010/01/26/m-233-todo-response-redirectpermanent.aspx

También Eduard Tomas escribió sobre esto enfocado a MVC:
http://geeks.ms/blogs/etomas/archive/2010/02/10/asp-net-mvc-redirecciones-permanentes.aspx

Y un completo articulo sobre las diferencias de ambos métodos HTTP en:
http://www.mattcutts.com/blog/seo-advice-discussing-302-redirects/

Espero que te sirva :)
Saludos,
Gonzalo

Resumen de Post de Optimización Web – Chaloptimaze!

Gonzalo Perez — Wed, 13 Jan 2010 17:25:00 GMT

Hola, ya que algunos me han preguntado “tienes algún tip de optimización” voy a publicar un pequeño resumen de algunos de los post más relevantes sobre este tema que he realizado. Obviamente todavía estoy en deuda y es en esta época del año en donde puedo escribir más post, así que próximamente … más tips de optimización!

Dejo entonces algunos links de este humilde blog:

Saludos!
Gonzalo

Optimizando tu Website con CSS Sprites, caso práctico

Gonzalo Perez — Mon, 04 Jan 2010 04:12:00 GMT

Una de las Reglas de Oro en el temas de performance, tiene que ver con tratar de disminuir la cantidad de HTTP Request de nuestro sitio web. Para ser más claro, cada vez que se carga una imagen, un archivo Js, un archivo flash, un css, etc, existe una petición al servidor, y como en toda petición hay un proceso de conexión, solicitud y recepción que tiene un costo asociado, sumado a que existen cabeceras por cada petición, no es lo mismo tener que descargar 1 archivo de 100Kb que 10 de 10Kb , ya que este último caso, va a tomar más de 100Kb para su descarga ( y sumémosle el tiempo asociado).

Es aquí en donde nos sirven los CCS Sprites, la idea es similar a la Tabla Ouija, en donde tenemos una “tabla” con todos los símbolos que necesitamos y apuntamos a uno en particular (bueno, en la Ouija son los demoniacos espíritus)

El Caso Práctico

Vamos a tener una barra de menú en nuestra página web, que tiene los siguientes elementos:

El peso total de estas imágenes es de 128 KB, por otra parte se puede ver una imagen que se llama Todo.png, esta imagen contiene un solo “lienzo” con todas las imágenes individuales que he mostrado. El hecho de que pese menos, sin ser especialista en imágenes, creo que es por la info asociada a la imagen propiamente tal. (Si no estoy en lo correcto, me ayudan) . Sin embargo esto no nos va a detener en nuestro análisis, ya que esto lo consideraremos al momento de obtener los resultados.

Para analizar los cargas y los resultados vamos a utilizar FireBug de FireFox.

Página “Normal” Sin CSS Sprite

Al ejecutar la página, con imágenes independientes vemos que su comportamiento en tema de carga es la siguiente:

Existen 8 HTTP Request, y cada imagen tiene su procesamiento en términos de peticiones. El tamaño final es 125 Kb descargados y la duración es 4.08Seg. Según Firebug, fíjate en la petición del Icono7 siguiente:

Con esto podemos ver que la mayor parte del tiempo, en cada petición de imágenes es más el tiempo de conexión de la recepción de la imagen propiamente tal!

Página con CSS Sprite

Vamos a escribir el estilo que nos va a servir para crear nuestro ejemplo, el siguiente, a grosso modo puedes ver que se visualizan sectores de la imagen, de un ancho de 128px de tal manera de completar el menú completo. Cada uno de estos estilos se los asignaremos a etiquetas span.

En el siguiente código vemos las etiquetas Span y el contenedor DIV que vamos a utilizar.

Ahora veamos el resultado en FireBug con FireFox.:

Solo dos pedidos, el HTML propiamente tal y luego la imagen, también al igual que en el caso anterior, hay un tiempo de Conexión alto en comparación al de recepción, pero esto se hace solo una vez, el resultado es claro, 109Kb de descarga con un tiempo de 2.12s.

Método	Tamaño (Kb)	Tiempo (Seg)
Normal	125Kb	4.08
CSS Sprite	109Kb	2.12

Es decir, un 48% de reducción en el tiempo, claramente no es relevante que sean 16 kb menos, (ya que según ese razonamiento, la de regla de tres simple, el CSS Sprite debería demorar 3.5 seg)

Obviamente se nos viene a la cabeza los image maps, aunque no son aplicables en todas las ocasiones como los CSS Sprites , por ejemplo cuando las imágenes no están físicamente organizadas en la página una al lado de otra, o puedes estar en el header y otra en el footer de la página.

Entonces , para concluir, esta además de otras técnicas que ire posteando en el futuro, son consideradas reglas de oro en la optimización de sitios web, estas reglas no las escribí yo!, si no que las aprendí y quiero compartirlas. De donde las aprendí? Del Libro “High Performance Web Sites” del maestro Steve Souders, lectura obligada para un Ninja Web.

Espero que te haya servido!
Nos vemos!