2. 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)
OPTIMIZA EL TIEMPO DE CARGA DE
CADA MÓDULO DE TU SITIO.
3. 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.
USA LAS IMÁGENES EN EL FORMATO
APROPIADO PARA REDUCIR SU PESO
4. 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;}
OPTIMIZA TUS ARCHIVOS CSS Y JAVASCRIPT
PARA AHORRAR UNOS BYTES
5. 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 esuna guía al
respecto.
COMBINA ARCHIVOS CSS PARA REDUCIR
LOS LLAMADOS HTTP
6. 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.
USAR CSS SPRITES PARA REDUCIR
LLAMADOS HTTP
7. 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.
USAR COMPRESIÓN POR EL LADO DEL
SERVIDOR
8. 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.
EVITAR EL CÓDIGO CSS Y JAVASCRIPT
DENTRO DE TU HTML
9. 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.
CARGA ALGUNAS COSAS DE TU SITIO EN SERVICIOS
DE TERCEROS QUE ACEPTEN EL HOTLINKING
10. 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.
REDISEÑA TU SITIO WEB PARA QUE NO
USE MUCHAS IMÁGENES
11. 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.
MONITOREA EL RENDIMIENTO DE TU
SERVIDOR