6 Consejos para mejorar la velocidad de carga de tu web

860

Los propietarios de sitios webs pasan mucho tiempo optimizando la web para mejorar las conversiones y las ventas.

Esto provoca que se centren demasiado en algunos aspectos y descuiden otros que son igual o más importantes, como puede ser la velocidad de carga de la página web.

Según un estudio realizado por la consultora Nielsen Norman Group, un usuario medio pasa en una página unos 10-20 segundos, por lo que no tenemos tiempo ilimitado para retener al usuario y convencerlo de que permanezca en nuestro sitio durante más tiempo.

Si gastamos la mitad de esos 10 segundos en la carga de la página, la impresión del usuario será mala desde el comienzo.

Existen muchas técnicas para tratar de mejorar la velocidad de carga de una web, pero en esta entrada te mostraremos los métodos más sencillos de implementar para reducir el número de segundos que tarda en cargar tu web.

Usar fuentes de iconos

Utilizar fuentes de iconos, en lugar de imágenes, en una web es una nueva tendencia en el diseño que implica el uso de una fuente compuesta por iconos. La razón de emplearlos es que las fuentes son vectores y por lo tanto son escalables a cualquier tamaño sin perder calidad.

De este modo podemos tener iconos que se ven bien desde cualquier dispositivo, como pueden ser los móviles, los ordenadores, etc.

Utilizar sprites

Un problema importante que limita el tiempo de carga de nuestra web reside en la carga de demasiadas imágenes. Si una web utiliza 30 imágenes, estará realizando 30 llamadas al servidor para poder mostrarlas correctamente en la pantalla del usuario. Debido a esto, la velocidad de carga se reducirá.

Si tu sitio web utiliza una gran cantidad de imágenes, lo recomendable sería utilizar sprites. Los sprites te permiten combinar varias imágenes individuales en una imagen más grande, y podrás utilizar la imagen que quieras con seleccionándola a través de CSS.

Así que si eres capaz de combinar esas 30 imágenes en una más grande, cada usuario que visite el sitio realizaría 29 peticiones menos al servidor.

Usar CSS3 en lugar de imágenes

La razón por la que los sprites ya no se utilizan tanto es porque los diseñadores tratan de implementar los últimos avances en CSS.

Con las nuevas propiedades de CSS3 los diseñadores pueden reproducir la mayoría de efectos que se hacían hace años con imágenes, pero esta vez solo utilizando CSS.

Como ejemplo, en esta web podéis encontrar diseños creados con Html5 y CSS3 y que podrían sustituir a una imagen tradicional.

Cargar tus archivos CSS en la parte superior y los JS en la inferior

A veces, cuando una web se está cargando, se cuelga debido a que está esperando a que javascript (JS) se cargue. La mayoría de scripts no están codificados para cargar de forma asíncrona, por lo que retrasarán la carga del resto de la página.

Una estrategia inteligente y efectiva es mover todos los archivos de JS a la parte inferior de la página, justo antes del cierre de la etiqueta </body>. Esto permite que toda la web se cargue e incluso si un script no se puede cargar, no interferirá en la experiencia de usuario.

Cuando se trata de CSS, la mejor táctica es la de minimizar el número de archivos CSS y evitar el estilo inline. Asegúrate de que todos los archivos CSS se cargan en la parte superior de la página para que se carguen antes que tu contenido.

Si utilizas Wordpress

Si tu web está creada sobre WordPress y no tienes demasiado tiempo para optimizar cada aspecto que afecte a la velocidad de carga de tu sitio, la mejor opción pasa por utilizar plugins.

Los plugins de caché te ayudarán a servir la información al usuario de una manera más rápida y lo único que tenemos que hacer es instalarlos. Existen numerosos plugins de este tipo, entre los más conocidos están: W3 total Caché, Quick Caché, WP Super Caché.

Existe multitud de información en la red sobre cómo configurarlos correctamente. Tendrás que hacer algunas pruebas para ver que todo funcione correctamente.

Si utilizas Joomla

Del mismo modo, para los sitios basados en Joomla, existen muchas extensiones para acelerar un sitio web. Una de las más interesantes es la extensión RockBooster. Ésta combina automáticamente tus JS y CSS y además codifica tus imágenes. Prácticamente al instante verás cómo tu web mejora su rendimiento.