Mucho se ha hablado de los costes adicionales que supone tener sitios web lentos y pesados. Estos costes se deben a la necesidad de utilizar servidores más potentes, almacenamiento más caro, etc.
El menor coste suele ser el principal motivo para optimizar nuestras páginas web, pero otras ventajas de los sitios web rápidos respecto a los sitios lentos menos comentadas pero muy valiosas son:
- SEO: los motores de búsqueda dan un mejor posicionamiento a los sitios web más rápidos.
- Mejora del porcentaje de rebote: los usuarios vuelven a los sitios que nunca les han dado problemas al cargar.
- Usabilidad: Los usuarios utilizan mejor nuestras páginas.
- Movilidad: Los sitios web tienen tiempos de carga aceptables en teléfonos móviles y tablets.
Cómo crear sitios web rápidos y ligeros:
Aquí os dejo algunos consejos básicos:
1. Optimizar los elementos estáticos: los elementos estáticos son aquellos que no se modifican en tiempo de ejecución. Estos elementos se almacenan en el servidor y son simplemente transferidos al navegador del usuario sin que se realize ninguna modificación en tiempo real. Los elementos estáticos suelen ser los más pesados y que más tiempo de carga consumen.
¿Cómo mejorar su tiempo de carga?
- Ofrecer imágenes a escala: las imágenes a menudo son los elementos con más tamaño por lo que debemos reducirlas todo lo posible. Para ello debemos conocer las dimensiones que tendrán finalmente en la página y crear las imágenes con esas dimensiones antes de subirlas al servidor.
- Elegir el formato de imagen correcto: los formatos más utilizados son png y jpeg. Debemos seleccionar el formato más adecuado para que la imagen tenga el menor tamaño posible con buena calidad.
- Optimizar las imágenes: existen herramientas que comprimen las imágenes para reducir aún más su tamaño. El uso de estas herramientas es fundamental para cualquier programador o diseñador web.
- Especificar dimensiones de las imágenes: todas las imágenes deben definir los atributos width=» y height=». De esta manera se evitan repintados innecesarios en los navegadores.
- Reducir el tamaño de css: debemos limpiar nuestras hojas de estilo en cascada para que no contengan atributos no utilizados, no repetidos y no w3c compliant ya que serán inútiles.
- Reducir el tamaño de javascript: durante la carga del javascript se bloquea la carga del resto de elementos de la página. Debemos esforzarnos por reducir nuestros ficheros js, eliminando código duplicado, funciones no utilizadas, etc y a ser posible utilizar una herramienta que comprima estos ficheros.
2. Habilitar compresión: Todos los servidores de aplicaciones (apache, jboss, IIS, etc.) tienen mecanismos para habilitar la compresión de las páginas. Estos mecanismos ofrecen una reducción muy importante del tamaño, por lo que siempre deben estar habilitados.
3. Habilitar Cachés: Destacamos varios tipos de caché:
- Habilitar caché del navegador: Los navegadores web almacenan en cada uno de nuestros equipos los archivos de las páginas que visitamos. Con esto se consigue que si visitamos una página por segunda vez, esa página web se cree a partir de lo que ya tenemos en nuestros pcs y no se transfieran por la red, con lo que el servidor queda liberado muchas veces casi el 100% ya que sólo se cargan elementos estáticos o caducados. En la configuración del servidor de aplicaciones podemos configurar los tiempos de expiración de cada elemento estático.
- Habilitar caché en proxies: Los proxies almacenan elementos de las páginas que los usuarios visitan, por lo que si un usuario accede por segunda vez a una página le proporcionarán el elemento en caché en vez de volver a pedirlo a nuestro servidor. En las cabeceras podemos establecer que los proxies almacenen o no algunos elementos nuestras páginas.
- Cachés en el servidor: utilizadas para mejorar el rendimiento de nuestro servidor.
- Caché de base de datos: las lecturas y escrituras a disco suelen ser uno de los principales cuellos de botella. Si utilizamos una caché de base de datos estas operaciones se realizarán en memoria, por lo que nuestro servidor será más rápido.
- Caché de página: existen herramientas que cachean las páginas completas generadas. Si no es necesaria la actualización de las páginas con este mecanismo evitaremos todo el proceso de generación de las páginas.
4. Ordenar nuestras páginas: debemos mostrar algo al usuario lo antes posible aunque no sea toda la página, por lo que no debemos incluir elementos bloqueantes (como javascript) antes de los elementos que están en la parte superior.
5. Cargar elementos en paralelo: debemos pensar en cómo se cargan nuestras páginas y si es posible que los elementos se carguen en paralelo. Para ello algunas consideraciones:
- Incluir elementos estáticos en el <head></head>: los elementos que incluyamos entre esas etiquetas serán cargados en paralelo.
- Aplazar la carga de javascript: los elementos javascript deben ser cargados después de otros elementos como css y lo más tarde posible
6. Especificar el conjunto de caracteres al principio de la página: si especificamos un conjunto de caracteres correcto al principio de la página los navegadores podrán empezar antes a componer la página.
7. Minimizar redirecionamientos: esto ocurre cuando usamos redireccionamientos http 3xx (http://en.wikipedia.org/wiki/URL_redirection). Debemos evitar redireccionamientos a otras páginas o a otras partes de nuestro sitio utilizando este mecanismo ya que consumen mucho tiempo y recursos de red.
8. Evitar @import en css: con esta etiqueta se carga en tiempo de ejecución algo que se podría hacer de manera estática. Debemos evitarlo.
9. Eliminar enlaces rotos: los enlaces rotos mantienen a los navegadores a la espera de un elemento que no existe. Aunque la página se cargue, el navegador seguirá mostrando que está cargando hasta recibir el código de error http 404 not found.
Si te ha gustado este artículo ¡¡Compártelo!!