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 tarda mucho para verse. Muchos se cansan de esperar y directamente cierran la página y buscan otra. Además los primeros 3 segundos son importantes, es el tiempo promedio en que una persona decide leer tu página o cerrarla.
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)
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).
2. Usa las imágenes en el formato apropiado para reducir su peso
Si tienes muchas imágenes en tu página, es ESENCIAL que aprendas a usar el formato óptimo para 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 notable.
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).
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
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.
6. Usar compresión por el lado del servidor
Eso es similar a crear archivos ZIP. Si estas en un servidor de compartido que no incluya esto necesitarás al menos de un VPS para poder habilitarlo.
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
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.
