CaudalWeb Blog » css

14 reglas para mejorar el rendimiento de sitios web

Felipe López Hernández — Sat, 24 Nov 2007 08:37:22 +0000

La mayoría de las veces nos enfocamos a optimizar nuestros servidores concentrándonos en las opciones de compilación, indexación de bases de datos, administración de la memoria, etc. Se gasta mucho tiempo en mejorar estos aspectos. En la realidad, para la mayoría de las páginas web, se gasta menos del 10-20% del tiempo de respuesta en obtener el contenido HTML del servidor web hacia el browser; el otro 80–90% es gastado descargando los componentes de las páginas. A continuación se listan 14 reglas de oro que Steve Souders nos propone para mejorar el rendimiento de sitios web.

Regla 1: Reducir el número de solicitudes HTTP. Hay técnicas que ayudan a reducir el número de solicitudes HTTP sin comprometer el diseño de las páginas.

Regla 2: Usar un Content Delivery Network (CDN). Un CDN es una colección de servidores web distribuidos a través de múltiples localizaciones para entregar contenido a los usuarios más eficientemente.

Regla 3: Agregar un Expirer Header. Se trata de asegurar que los componentes sean configurados para maximizar las capacidades del caché del browser.

Regla 4: Componentes Gzip. Una variable que afecta el desempeño es el tamaño de la respuesta HTTP. Los componentes Gzip reducen el tamaño de los paquetes de respuesta que son transmitidos del servidor al cliente.

Regla 5: Poner las hojas de estilo (CSS) en el inicio. Al final de varias pruebas e investigación se ha encontrado que para cuestiones de desempeño se debe de colocar las CSS’s en el HEAD usando la etiqueta LINK.

Regla 6: Poner los scripts al final. Lo opuesto a las CSS’s, es mejor mover los scripts hacia el final de las páginas (siempre y cuando sea posible). Esto permite la renderización y descarga paralelamente.

Regla 7: Evitar expresiones CSS. Las expresiones CSS son una poderosa (y peligrosa) forma de poner propiedades dinámicamente. Un problema es que no todos los browser las soportan y otro es que podrían ser re-evaluadas cada vez que la página cambia, por redimensionamiento, scrolling, movimiento del mouse, clicks, etc.

Regla 8: Hacer externos los Javscripts y CSS’s. Esta regla hace que los componentes Javascript y CSS puedan ser cachados en el browser del usuario y ponerlos internos hace ineficiente la ventaja del cache del browser.

Regla 9: Reducir los DNS Lookups. Un Domanin Name System (DNS) tiene el rol de mapear nombres de dominios en direcciones IP. El browser no descarga nada hasta que el DNS resuelve completamente el nombre del dominio. Este es tiempo que las páginas gastan en hacer DNS lookups. Reduciendo el número de hostnames únicos en la página web se reduce los DNS lookups pero tambien reduce la descarga paralela.

Regla 10: Minimizar el JavaScript. Minificación es la práctica de remover los caracteres innecesarios del código para reducir su tamaño y de esta manera mejorar el tiempo de carga.

Regla 11: Evitar redireccionamientos. Un redireccionamiento (redirect) es usado para enrutar los usuarios de una URL a otra. Regularmente son para documentos HTML pero también para requerir componentes (imagenes, scripts, etc.) en las páginas.

Regla 12: Remover scripts duplicados. Incluir dos veces el mismo archivo Javascript afecta el desempeño. Este error no es raro, una revisión de sitios web mostró que CNN y YouTube contenían un script duplicado. Asegurarnos que los scripts sean incluidos una sola vez.

Regla 13: Configurar ETags. Los Entity Tags (ETags) son un mecanismo que los servidores web y browser utilizan para validar los componentes cachados.

Regla 14: Hacer AJAX cachable. Ajax tiene un gran impacto en el mundo Web 2.0 y con Ajax se puede lograr una mejora importante en el rendimiento. Aunque las solicitudes Ajax no son cachables, asegurarnos de que estas sigan los lineamientos, expecialemente de que tengan un futuro lejando de Expires Header.

Compartir/guardar

Herramientas y recursos para desarrollo web – CSS

Felipe López Hernández — Wed, 31 Oct 2007 06:59:39 +0000

CSS

456 Berea Street	Numerosas guías y tutoriales sobre trucos avanzados CSS.
CleanCSS.com	Herramienta que te ayuda a limpiar y optimizar tus archivos CSS.
CodeBeautifier.com	Formateador de código CSS y optimizador, pero no es validador.
CSS Tweak	Te permite subir tu CSS y ajustarlo.
CSS-Ref.com	Herramienta para practicar tus habilidades CSS.
CSSCreator.com	Podrías crear una página con un layout de tres columnas con un encabezado y un píe de página.
CSSDrive Compressor	Utilería para comprimir tus CSS ahorrándote espacio y ancho de banda y ganando velocidad de carga de las páginas.
CSSFly.net	Editor CSS browser que puede además crear código HTML.
CSSOptimiser.com	Herramienta para comprimir código CSS y permite la carga rápida de tus páginas.
CSS Pagemaker	Wizard para hacer páginas CSS a través de preguntas.
CSS Redundancy Checker	Te permite revisar URLs de llamadas redundantes y código repetido.
CSS Rollover Generator	Crea una imagen de cursor usando nada menos que CSS.
CSS Superdouche	Este sitio revisa tus CSS introduciendo la ruta de tus archivos CSS, los limpia y te genera un nuevo CSS, el cual podrás utilizarlo para reemplazar el original.
CSSTidy	Este es un proyecto de Sourceforge para optimizar y parsear CSS.
Em Calculator	Herramienta basada en javascript para hacer tu diseño CSS escalable.
Layout-o-matic	Herramienta que nos ayuda a generar layouts simples con algunas variaciones en las columnas.
List-u-Like CSS Generator	Te permite crear la barra de navegación basada en listas con con facilidad.
RoundedCornr.com	Genera imágenes y código HTMl y CSS con esquinas redondeadas y con gradientes.
Sky CSS Tool	Este sitio te permite formar tu CSS sin escribir código, solo necesitas tener habilitado javascript en tu browser.
Spiffy Corners	Es un sitio que genera cajas coloreadas con código CSS con esquinas redondeadas con la especificación que tu requieras.
TheBoxOffice.be	Generador de XHTML y CSS que te ayuda a envolver texto en torno de una imagen.
YAML Builder	Un editor en browser para codificar HTML/CSS con vista previa en tiempo real de cómo se vería tu página.

Compartir/guardar

Interfaces basadas en Tabs

Felipe López Hernández — Sat, 14 Jul 2007 06:02:31 +0000

La popularidad de los tabs, o interfaces basadas en tabs, está creciendo rápidamente, desafiando tanto la creatividad de desarrolladores como de diseñadores. Utilizando enfoques modernos, se pueden crear y mejorar las interfaces basadas en tabs en pocos minutos. Con CSS, JavaScript, DHTML y XMLHttpRequest (Ajax) todo es posible. La información no es cargada en nuevas ventanas, pero son instantaneamente cargadas con técnicas basadas en Ajax. A continuación se listan algunas técnicas (libres) de interfaces basadas en tabs.

Control.Tabs
Basada sobre Prototype.

Javascript Tabs vom Stilbüro
Basada sobre jQuery | Demo

Yahoo TabView
Parte de la UI Library | Demos

TabPanel provided by Google Web Toolkit.

Tabbed Panels, provided by Adobe Spry Framework.

AJAX Tabs Content Script
de Dynamic Drive.

Tab Panes
En dos versiones por DHTMLGoodies, con Close-Buttons. Demo I | Demo II

JavaScript Tabifier

AJAX Tabs

Ajax Project – Tabbed Page Interface

DOMTab – Navigation tabs with CSS and DOMscripting es presentado en dos versiones.

Tabtastic

Tabmenu
Trabaja como MouseOver sin el click del mouse.

Compartir/guardar

Soluciones AJAX: Auto completer

Felipe López Hernández — Mon, 02 Jul 2007 04:56:29 +0000

Hoy en día, las aplicaciones web pueden ser diseñadas con mejoradas interfaces de usuario y funcionalidades, lo cual es un privilegio de los profesionales. A continuación se muestran cinco auto completadores

1. AJAX AutoSuggest: un auto-completer AJAX para campo de texto

2. AJAX Autocompleter / script.aculo.us library

3. AJAX AutoCompleter

4. Ajax autosuggest/autocomplete desde una base de datos

5. Ajax dynamic list

Compartir/guardar

Mejores prácticas para diseñar formularios web

Felipe López Hernández — Wed, 27 Jun 2007 20:14:54 +0000

La siguiente presentación muestra muy buenas prácticas para el diseño e implementación de formularios web.

Aquí: WebForms.pdf, Luke Wroblewski pone a disposición las mejores practicas para diseñar formularios Web.

Compartir/guardar

30 scrips de galerías de imágenes

Felipe López Hernández — Fri, 01 Jun 2007 15:57:42 +0000

Actualmente hay una gran variedad de soluciones de galerías basadas en web, de las cuales aquí se lisntan 30 scripts (slideshows, lightboxes, y galerías) para que puedas utilizarlas de una manera efectiva en tus presentaciones de imágenes o fotos.

LightBoxes y Galerías de imágenes basadas en Ajax

Galerías de imágenes basadas en CSS

Galerías basadas en CSS + JavaScript y Galerías DHTML

Compartir/guardar

10 rápidos tips CSS – 1ra. parte

Felipe López Hernández — Fri, 27 Apr 2007 16:30:53 +0000

Como con la mayoría de las cosas, un enfoque estructural y lógico es la mejor forma de continuar.Voy a colocar 10 tips CSS en orden especial para ayudarte a hacer tu cógico CSS tan simple como sea posible.

1. Conservarlo simple

Esto suena obvio pero si nos encontramos que estamos haciendo uso de código complejo deberíamos de pensar acerca de si en el futuro realmente lo necesitaremos o solo estamos pensando en nuestro diseño y no en nuestros visitores. Frecuentemente los diseñadores nos inspiramos en nuestro propio diseño y nos “alzamos” para producir determinados efectos visuales solo para encontrarnos después con que los visitores lo ven pesado e inutilizable.

El código complejo es el resultado de un pensamiento desordenado. Planear el layout lógico y trabajar en el exterior en y desde arriba y hacia abajo tanto sea posible.

Usualmente hay que empezar con la envoltura de la página y entonces progresar lógicamente a través del encabezado, navegación, contenido principal y pies, etc. tratando de preservar el flujo de los documentos tanto como sea posible.

Mientras que un diseño visual bonito es necesario para atraer visitores se deberá pensar aún en tener buen contenido y que el sitio sea utilizable y accesible. Si encontramos que nuestro html y el css parecen como “spaguetti” entonces se tiene que pensar ver si se puede simplificar. Esto hará mas fácil mantenerlo en el futuro y frecuentemente ahorraremos código y ancho de banda.

2. No usar hacks a menos que este sea conocido y documentado

Este es un punto importante, frecuentemente vemos hacks empleados para componer algo que realmente no es imperfecto en primer lugar. Si encontramos que estamos buscando un hack para componer cierto elemento en nuestro diseño entonces primero hacemos una búsqueda (en nuestro amigo google) y tratamos de identificar el elemento con el que estamos teniendo problema.

Si encontramos que es un bug conocido entonces el 99% de las veces tendrá una solución para este bug y entonces podemos confiablemente usar un hack si es requerido, teniendo en cuenta que estamos componiendo el bug, que es diferente a corregir el mal código.
Dificilmente podríamos contar el número de veces que hemos visto layouts usando hacks cuando todo lo que se debio hacer era controlar los margenes por default en la página (vea el siguiente tip)

3. Tener cuidado con los margins y padding de todos los elementos que usamos

Todos los browsers aplican padding (rellenos) y marging (margen) por default en la mayoría de los elementos, y la cantidad que ellos aplican varía substancialmente. Por lo tanto, necesitamos controlar explícitamente, tanto el marging como el padding, en todos los elementos que usamos.

Esto será cubierto en “No margin por error”

(continuará…)

Compartir/guardar