Optimización de la web de Foto DNG (parte II)

FavIcon

La primera optimización de la que vamos a tratar en esta serie de posts, es sobre el favicon. La definición de favicon según la wikipedia es:

«Favicon (abreviatura del inglés ‘favorites icon’), también conocido como icono de página, es un icono asociado con un sitio web o página web en particular. Un diseñador web puede crear este icono y muchos navegadores gráficos pueden hacer uso de él. Los navegadores que permiten esta función suelen mostrar el icono junto a la barra de direcciones, al lado del nombre del sitio en la lista de favoritos y al lado del título de la página en una interfaz de documentos en pestañas.»

http://es.wikipedia.org/wiki/Favicon

La primera vez que me fije en el tema fue al observar los logs de errores de Apache de una página web, al ver varias peticiones no servidas (error 404) de un archivo llamado favicon.ico, por lo que me decidía a añdir un favicon al raíz de dicho sitio web para evitar dichos errores 404.

«Los navegadores más modernos implementan ambos métodos. » (referido al párrafo anterior) «Debido a esto, los servidores web reciben muchas peticiones por el archivo favicon.ico incluso cuando este no existe. Esto puede molestar a los administradores de servidores web creando muchas entradas en el registro del servidor, e innecesariamente cargando el disco, CPU, y la red. Otro problema común es que los favicons pueden desaparecer si se borra la caché del navegador.»

http://es.wikipedia.org/wiki/Favicon

Desde el inicio de Foto DNG, esta cuenta con un favicon favicon foto dng anterior pero el problema que hemos detectado estos día al volver sobre el tema es que su tamaño era de 29,2 KB (29.926 bytes), algo a todas luces excesivo y nos pusimos con su optimización teniendo en cuenta el documento de Yahoo «Best Practices for Speeding Up Your Web Site» en la sección del favicon http://developer.yahoo.com/performance/rules.html#favicon

Después de diversas pruebas con varios programas, optamos por utilizar un servicio de creación del favicon on-line (creo recordar que fue el ofrecido por Dynamic Drive en http://tools.dynamicdrive.com/favicon/ aunque existen varios servicios similares). Para la creación del icono utilizamos la imagen que teníamos asignada a la carpeta desde la que maquetamos la revista que es la siguiente:

carpetas

El resultado ha sido un icono de 1,12 KB (1.150 bytes), hemos reducido su tamaño 26 veces, lo cual viene a significar que en 1000 peticiones de página (sin caché) antes consumíamos  unos 28Mb. y ahora aproximadamente 1 Mb.

Una optimización mínima, pues a fin de cuentas 29KB puede parecer insignificante, puede reportarnos un ahorro de más de 30Mb. de reducción de tráfico al día (según los accesos a Foto DNG), además de una ligera aceleración en la carga de dicha página (veremos mejoras más significativas con otros cambios posteriores).

Ya puestos y por cuestión de imagen, hemos asignado ese mismo icono a las demás páginas, foros, este blog (mediante las respectivas entradas en la cabecera del blog y poniendo el favicon en Google APP Engine ™ con una expiración de cache de 90 días) y los sitios alternativos de descarga.

barra direcciones

Vista del favicon.ico en diferentes navegadores y en las diferentes webs de Foto DNG.

Para servir el favicon.ico desde Google APP Engine ™ hemos creado la siguiente entrada en app.yaml

– url: /favicon.ico
static_files: static/favicon.ico
upload: static/favicon.ico
mime_type: image/x-icon
expiration: «90d»

Hemos visto algún favicon de menos de medio kilobyte y nos gustaría optimizar aún más nuestro favicon, si alguien conoce algún programa que nos ayude a optimizar el icono actual, serán bienvenidas las entradas en forma de comentarios.

Actualizado: Hemos abierto el icono con The Gimp y hemos reducido su tamaño a 318 bytes. (menos de un tercio de su anterior tamaño).

Hemos descargado algunos favicons de conocidas webs y teniendo en cuenta las indicaciones de Yahoo ™ en http://developer.yahoo.com/performance/rules.html#favicon nos ha extrañado que su favicon sea el que más ocupe con 6,44 KB (6.598 bytes).

 

favicons webs

  • favicon Foto DNG actual: 1,12 KB (1.150 bytes). (actualizado 318B.)
  • favicon Google ™ : 1,12 KB (1.150 bytes).
  • favicon YouTube™ : 1,12 KB (1.150 bytes).
  • favicon Picasa™ : 1,37 KB (1.406 bytes)
  • favicon Blogger™ : 3,55 KB (3.638 bytes).
  • favicon MSN™ : 3,55 KB (3.638 bytes).
  • favicon Yahoo™ : 6,44 KB (6.598 bytes)
  • favicon Foto DNG antes: 29,2 KB (29.926 bytes).

En la próxima entrada seguiremos optimizando la web de Foto DNG con las imágenes.