Varias veces analicé como mejorar el tiempo en que una página web tarda en cargar ya sea con Aeromental (el cual sigue en proceso continuo de mejora) y con mis otros proyectos.
Es importante que una página cargue rápido, puesto que no es bueno que una visita espera frente a una página en blanco o a un contenido que tarada mucho para verse. Muchos se cansan de esperar y directamente cierran la página y buscan otra. Además los primeros 7 segundos son importantes, es el tiempo promedio en que una persona decide leer tu página o cerrarla. Es la primera impresión, SI SOLO 7 segundos, así que es mejor optimizar la estructura y diseño para captar visitantes, futuros seguidores y evitar al máximo el tener desertores.
Hay 3 formas de optimizar la velocidad de carga para que se vea tu página web:
- Hardware: El servidor donde se encuentra alojada tu página debe ser rápido.
- La optimización del código por el lado del servidor (PHP, Java, Perl, Ajax, Python)
- La optimización del front-end de tu página (HTML, CSS, JavaScript, e imágenes)
En este artículo se verán puntos para optimizar el front-end, el cual es más simple de mejorar e influye bastante en el tiempo de carga.
Si uno quisiera optimizar el Servidor, se necesita tener acceso de root y en la mayoría de los casos tal ves no lo tengas, ya que te encuentras en un servidor compartido, además tocar opciones de un servidor o de la base de Datos es un trabajo muy delicado, con buenos resultados, pero se necesita bastante conocimiento especializado para no arruinar la configuración de un server.
Estos son los 10 consejos prácticos:
1. Optimiza el tiempo de carga de cada módulo de tu sitio. Identifica a los gordos
Cuanto más rápido cargue tu sitio, los usuarios tendrán menos tiempo de espera para la información que necesitan ver.
Es bueno que analices que componentes (imágenes, animaciones flash, CSS, JavaScript, etc) son redundantes, innecesarios, y cuales pueden ser optimizados. Identifica a los que pesan más y trata de ponerles en dieta rigurosa de bytes.
Es recomendable que la mayoría de tus componentes (ya sea un script o un ícono) no sobrepasen los 25KB cada uno (peso para una página ligera).
Yahoo recomienda mantener todo inferior a 25, porque ese es el peso estándar para que el archivo se quede guardado en la mayoría de los celulares, como en el iPhone.
El plugin firebug de Firefox tiene una opción para ver el tiempo de carga de cada archivo de una página. Lo puedes usar para optimizar este paso.
2. Usa las imágenes en el formato apropiado para reducir su peso
JPEG vs GIF vs PNG la eterna discordia.
Si tienes muchas imágenes en tu página, es ESENCIAL que aprendas a usar el formato óptimo apra cada una de ellas, podrás conseguir GRANDES diferencias.
Los formatos recomendados son JPG, PNG y GIF (por nada del mundo uses TIFF o BMP).
De todas maneras estos 3 formatos son diferentes. JPG lo tendrías que usar sólo para fotos. PNG y GIF para dibujos con colores sólidos, dibujos vectoriales, logotipos, iconos, gráficos de barras, etc. Si hay muchos degrades de tonos, PNG es mejor que GIF en calidad y tamaño.
3.- Optimiza tus archivos CSS y JavaScript para ahorrar unos bytes
Cada byte cuenta, uno por uno luego sumaran una diferencia significativa.
Optimizar y minimizar estos archivos consiste en un proceso de quitar caracteres innecesarios (como espacios, comentarios largos de código, código comentado, variables redundantes, saltos de linea (enter), etc).
Por ejemplo, este código de CSS:
.soy-una-clase-linda {
color: #ffffff;
line-height: 20px;
font-size: 9px;
}Puede ser optimizado a:
.linda{color:#fff;line-height:20px;font-size:9px;}
… y funcionará igual que la primera opción. Drástico pero efectivo.
Nota.- El CSS de Aeromental pesa 20KB y no he optimizado drásticamente como en el ejemplo
Para este punto hay buenas noticias. existen servicios que te optimizan tu código automáticamente con sólo dar un click del mouse: Lista de servicios para optimizar CSS, y para optimizar código JavaScript puedes usar: JSMIN (The JavaScript Minifier), YUI Compressor, y JavaScript Code Improver.
Una buena herramienta reductora de código te da la opción de revertir el proceso y reordenar tu código con espacios y enters para cuando necesites hacer modificaciones, porque siendo sinceros te volverías loco leyendo todo sin altos de línea.
4. Combina archivos CSS para reducir los llamados HTTP
Para cada componente que se necesita para cargar una página web, se hace un llamado HTTP al servidor. De esta manera si tienes 5 archivos CSS se necesitarán de 5 HTTP GET. Si los unieras en menos archivos, reducirías los llamados HTTP y tus páginas cargarían más rápido.
Si quieres unir tu CSS con los archivos JavaScript en uno solo puedes hacerlo con PHP, esta es una guía al respecto.
5. Usar CSS sprites para reducir llamados HTTP
CSS Sprites on Digg.
Un CSS Sprite es una combinación de pequeñas imágenes en una sola. Puedes poner todos tus pequeño iconos, esquineros, logos, flechas, fondos, etc en una sola imagen que se cargue solo una vez en tu página y no se hagan varios llamados HTTP.
Con CSS luego puedes dar las coordenadas X Y de la imagen a usarse en las propiedades del background.
La famosa página Digg usa ese método: CSS Sprite de Digg
Para crear estas grandes imágenes puedes usar este: CSS Sprite Creator.
6. Usar compresión por el lado del servidor
Eso es similar a crear archivos ZIP. Si estas en un servidor dedicado necesitaras de un VPS, si es que no tienes la compresión habilitada, deberás instalar. Puedes ver esta guía de como instalar mod_gzip en Apache.
7. Debes evitar el código cSS y JavaScript dentro de tu HTML
Un gran error es poner el código CSS o de JavaScript internamente en el código HTMl de tu página. Los archivos externos con guardados en la memoria caché de los navegadores, por lo tanto no necesitan volverse a cargar si el usuario sigue navegando por tu sitio.
8. Carga algunas cosas de tu sitio en servicios de terceros que acepten el hotlinking
Enviando algunos archivos del contenido de tu sitio a servicios web de terceros reduce grandemente el trabajo de tu servidor web. Esto se llama offloading.
Por ejemplo tu feed RSS se lo puedes dejar a los servidores de FeedBurner.
Las fotos de los posts las puedes subir a imgur.com (el mejor) o a flickr.
Tus vídeos pueden estar en YouTube, y si eres más detallista puedes usar el Google AJAX Libraries API para llamar a librerías y frameworks populares de JavaScript como: MooTools, jQuery, y Dojo.
Algunas veces debes asumir que dependes que los servidores de estos servicios podrán estar caídos o quien sabe un día desaparezcan del mapa, por lo que tiene cierto riesgo.
9. Rediseña tu sitio web para que no use muchas imágenes
Debes ver como optimizar el diseño de tu sitio web de tal manera de usar la decoración apropiada sin sobrecargar su diseño con imágenes, lo que lo vuelve pesado de cargar. Optimiza y encuentra un equilibrio entre lo liviano, lo agradable visualmente y lo funcional.
A nadie le gusta un decorado sobrecargado o un sitio muy simple sin nada de especial. Algunas veces un decorado se puede sustituir por simples líneas de efectos con CSS.
10. Monitorea el rendimiento de tu servidor
A veces nunca se puede cubrir todos los detalles de cada página. Será bueno que revises de tiempo en tiempo si algún archivo esta sobrecargando el procesador de tu servidor o si todos los pedidos y respuestas están llegando a destino.
si tienes acceso root puedes usar ab para Apache o Httperf de IBM.
si no tienes acceso a tu webserver puedes usar: Fiddler o HTTPWatch para analizar tu tráfico HTTP.
__
Basado en la guía de sixrevisions: 10 ways to improve your web page performance