Optimizacion Web – Reducción de peticiones HTTP

¿Qué es esto?

Este tipo de optimización se suele encontrar en muchos artículos y libros al respecto como la más importante y hay un factor que es primordial para esta consideración, que es que aplica a todo tipo de situaciones, tanto para sitios que tienen usuarios de una sola vez como para aquellos sitios que cuentan con usuarios recurrentes.

La reducción de peticiones HTTP consiste a grandes rasgos en reducir el número de componentes a solicitar de un sitio web, llámense imágenes, archivos CSS, JS, etc. lo importante es que sean menos!!. Ahora bien esto no esta peleado ni con buenas prácticas de programación porque es obvio que no hay ni pizca de modularidad en programar sobre un solo archivo JS, ni tampoco está peleado con el diseño web, porque esta claro que el diseño de un sitio tiende a incluir elementos tanto gráficos como de hojas de estilos así que no se preocupen por esto ahora que ya se explicará como obtener los beneficios de esta optimización sin sacrificar ni programación ni elementos de diseño.

¿Por qué es importante?

Lo que hace tan importante este tipo de optimización es como se gasta el tiempo de quien esta detrás de la pantalla de nuestros sitios web, el usuario final, aquel que tendrá que pasar un montón de tiempo esperando a que nuestros sitios carguen y decida no volver jamás o el que se sienta cómodo con nuestro sitio y se convierta en un visitante recurrente. Y es que de acuerdo a datos obtenidos en Yahoo y mencionados en el libro High Performance Web Sites – Essential Knowledge for Frontend Engineers de Steve Souders sólo del 10 al 20% del tiempo de respuesta del usuario final se gasta en la obtención del documento HTML, cifras muy contrastantes si se comparan con el 80 a 90% del tiempo que se toma en la descarga de componentes.

Ahora bien este punto no trata de minimizar el tamaño de los componentes sino los componentes en sí y esto es porque cada que se solicita un componente se hace una petición HTTP, la cual gasta tiempo y ancho de banda, lo que provoca que nuestros sitios puedan tardar más en cargar.

¿Qué hago para resolver esto?

Como dijimos al principio de este artículo, no es necesario que cambies por completo tu forma de programar, aunque esto no significa que no habrá ningún cambio. Existen varias técnicas recomendadas para lograr reducir el número de componentes y una gran cantidad de herramientas que nos ayudarán a lograr esto de forma sencilla, así que empecemos:

Reducción del número de imágenes

Existen diferentes técnicas para lograr reducir el número de imágenes de un sitio web, y con esto no me refiero a desaparecer algunas cuantas y dejar solo unas pocas para trabajar con el sitio porque seguro recibiré más de un reclamo de los diseñadores. Con esto me refiero a combinar imágenes en una sola más grande que sirve como de contenedor.

Anteriormente existía la creencia de que esto no era una buena práctica, pero eso es cosa del pasado, la realidad es que si lo hacemos adecuadamente este proceso nos dará como resultado una imágen de tamaño total menor al de la suma de las imágenes que contiene. Esto lo podemos realizar de diferentes maneras, con mapas de imágenes, sprites CSS o con imágenes en línea.

La manera más difundida de hacer esto es con sprites CSS, que como se comentó anteriormente no es mas que hacer una imagen que contiene otras imágenes y de las cuales sabemos su posición con respecto a la primera. Esta técnica se suele aplicar mucho en imágenes cuya naturaleza implica que siempre se van a cargar juntas, como las imágenes que representan los diferentes estados del botón de un menú.

Existen servicios como CSS Sprite Generator ó como SpriteMe que te ayudarán a crear tus sprites de forma sencilla y que además te evitarán la engorrosa tarea de crear el CSS adecuado para el mismo. Podemos ver un ejemplo de utilización de un sprite CSS en aquí. Observando el código fuente podemos notar como se hizo el uso del sprite CSS.

Primeramente veamos como pondríamos “la imagen”

    Firebug

Ahora veamos el código CSS necesario

.adonFirefoxImage
{
    background-image: url("http://www.octaviocortes.com/wp-content/uploads/2010/12/componentes_firefox.png");
    background-repeat: no-repeat;
    padding-left: 40px;
}
.adonFirefox-firebug
{
    background-position: 0 -128px;
    height: 32px;
}

Combinar scripts y hojas de estilo

Esto de lo que trata es de tener el menor número de archivos posibles y para esto podemos tratar de combinar los scripts de los que hacemos uso en nuestro sitio en la menor cantidad de archivos, lo mismo aplica para las hojas de estilo, obviamente no se trata de combinar en un solo archivo tanto scripts como hojas de estilo, creo que esta por demás pero igual lo aclaré.

Y me imagino que están pensando “este tipo esta loco, claro que no voy a perder modularidad por andar haciendo optimizaciones nadie programa así..” y tienen razón, de hecho yo no recomiendo que lo hagan en la etapa de desarrollo, es más bien en lo que se conoce como “deploy” o lo que es lo mismo la etapa en la que haces/mandas los archivos que irán directamente a producción en donde debe realizarse este proceso, que a grandes rasgos es meter todos los scripts a un solo archivo js y todos las hojas de estilo a un solo archivo css.

Bueno para los que manejan WordPress esta es una tarea que se puede automatizar muy fácilmente mediante el uso de plugins. Yo les recomiendo instalar el W3 Total Cache ya que cumple con esta tarea y nos ayuda con muchas otras más optimizaciones, sin necesidad de tener un montón de plugins instalados.

Para aquellos que gestionan su sitio directamente en PHP o con algún framework orientado a este lenguaje de programación les recomiendo chequen el proyecto minify el cual cumple perfectamente con el propósito de combinación de archivos y además realiza otras tareas como la minificación de los mismos.

Ir al índice

Evolucion geek

Vía: codigogeek.com

Complementos de Firefox para desarrolladores y diseñadores web

Firefox se ha vuelto muy popular entre la gente que nos dedicamos al desarrollo y diseño web, y una de las razones por las que ha sucedido esto es que cuenta con una cantidad enorme de complementos de calidad que se mantienen bien actualizados. La siguiente es una lista de los que entre mi experiencia y la revisión de otros artículos creo son los más útiles, esta lista solo contiene aquellos complementos compatibles con la versión 3.6.13 que hasta este momento es la última.

Además están estos otros que aunque encontré referencia a ellos en varios sitios, desafortunadamente no son compatibles con la versión 3.6 de Firefox, pero que igual valdría la pena echarles un ojo de vez en cuando para ver si se actualizan.

Fuentes:

• the best 50 firefox add ons for web developers
• best firefox extensions
• extremetech
• 35 absolutely useful firefox plugins for web designers and developers
• top 20 essential firefox add ons web designers
• 30 firefox add ons for web developers designers

Freedom

fuente: somethingofthatilk.com

Herramientas para conseguir un negocio web exitoso

Actualmente hay miles de herramientas web que te pueden ayudar a tener un sitio web exitoso, el problema es cual elegir. Estas son algunas bastante populares ojalá les sirva:

Diseño – Conceptos – Creatividad

• http://faveup.com/ – Ideas para tu logo
• http://99designs.com/ – Diseños de logos y sitios web
• http://www.domaintools.com/ – Registro de dominios
• http://stumbleupon.com – Inspiración pura, muchos tópicos, miles de sitios web
• http://smashingmagazine.com – Execelente contenido y muchos artículos al respecto
• http://www.dailybits.com/11-undiscovered-website-ideas-to-steal-and-make-you-rich/
• http://http://webmastercourse.com/articles/101/personal/
• http://www.google.com/insights/search/#- Mira lo que la gente buscamos en Google
• http://www.google.com/trends – Encuentra los términos de búsqueda más usados

Planeación

• http://deskera.com – DeskEra interactua excelentemente con programas de manejo de projectos como Microsoft Project®

Administración y Notas

• http://evernote.com – Organiza toda tu información a través de este excelente sistema de notas y accédelo desde cualquier parte
• http://teuxdeux.com/

Colaboración

• http://www.basecamphq.com/
• https://website.qtask.com/index.php
• http://mashable.com/2007/07/22/online-collaboration/ – Artículo con herramientas de colaboración
• http://www.activecollab.com/
• http://grouploop.com – Herramienta para organizar tu equipo, cuenta con un sistema de mensajes, calendario, compartición de archivos, etc.
• http://docs.google.com/

Plataforma

• http://wordpress.com/ – Excelente plataforma para creación de blogs
• http://www.joomla.org/ – Gran CMS para creación de sitios web y manejo de contenidos

Probar tu sitio

• http://crazyegg.com
• http://browsershots.org/ – Verifica el funcionamiento de tu web en múltiples navegadores
• http://www.browsercam.com/ – Verifica el funcionamiento de tu web en múltiples navegadores
• http://getfirebug.com/ – Complemento de Firefox que te ayuda a inspeccionar el HTML, CSS, etc. de tu sitio web
• http://www.google.com/webmasters/- Herramienta para optimización de sitios web

Análisis y diagnóstico

• http://google.com/analytics/ – Estadísticas de uso de tu sitio web
• http://woorank.com

Redes sociales (hay demasiadas para nombrarlas todas…)

• http://www.facebook.com
• http://twitter.com

Digital Marketing

• http://adwords.google.com
• http://www.facebook.com

Fuente: refreshsd.org

Herramientas para creacion de archivos .htaccess

Un archivo .htaccess es un archivo para Apache que nos permite definir diferentes directivas de configuración, esto se hace usualmente mediante el uso de expresiones regulares lo cual dificulta un poco la creación de reglas. Afortunadamente ya existen herramientas que nos ayudan a crear estos archivos, al menos de forma básica. Estas son algunas de ellas:

• .htaccess Editor
• .htaccess Redirect
• htAccessible
• .htaccess File Generator

Algunas buenas ligas:

• The Ultimate Htaccess
• Apache tutorial: .htaccess file
• Apache tweaking tutorial
• 21 hacks de htaccess que todo desarrollador debería conocer
• htaccess – Noob to Pro
• .HTACCESS files useful tips and tricks

Mi recomendación es que si les interesa mucho el tema o necesitan algo menos común empiecen a leer libros de Apache, les dejo algunos nombres:

• Apress The Definitive Guide to Apache mod_rewrite
• O’Reilly Apache Cookbook: Solutions and Examples for Apache Administrators
• O’Reilly Apache Security
• Apress Pro Apache
• O’Reilly Apache 2 Pocket Reference: For Apache Programmers & Administrators

15 cosas por las que los desarrolladores web deberiamos estar agradecidos

Les dejo un artículo que habla sobre algunas de las herramientas más usadas en el desarrollo web, en lo personal creo que faltaron algunas como Netbeans, Eclipse, SVN, Trac, etc, pero ya habrá tiempo de mencionarlas a estas también.

Via: webjackalope.com

Distribucion del tiempo dedicado al desarrollo web

Vía: gosquared

Los 15 productos mas usados de Google para la gente que construyen paginas web

Recientemente me encontré un artículo sobre los productos de Google para la gente que contruye páginas web y me pareció bastante interesante, esta es la liga. ¿Y tú cuantos usas?…

Por que viajar en el tiempo es imposible

Fuente: www.buzzfeed.com/reddit/simple-example-of-why-time-travel-is-impossible-p