6 técnicas para mejorar la velocidad de carga de tu web

Google page speed analiza la velocidad de nuestra web – Imagen blog.fastpositer.es

Sin embargo, al mismo tempo que ha mejorado sustancialmente la velocidad de las conexiones a internet los sitios web han ganado en peso, lo que hace que los diseñadores y programadores web no podamos descuidarnos del todo y procurar que nuestro sitio web no se convierta en un ladrillo que tarde una eternidad en cargarse en los navegadores de nuestros clientes y seguidores. Es importante aligerar la web para mejorar la velocidad de carga.

Una web que se carga lentamente es algo más que una molestia para el usuario

Obviamente y ya sólo desde el punto de vista de la usabilidad, tener una web pesada y que tarde minutos en cargar supone una molestia y una barrera de entrada para cualquier usuario. Pero más grave aún pueden ser, por un lado, la pérdida de visitas de usuarios que no van a volver a nuestra web tras comprobar que el acceso es desesperante, y por otro el perjuicio que puede suponer para el SEO el tener un sitio web demasiado lento.

¿Qué debemos tener en cuenta? pues vamos al grano porque hay faena y por ello hemos recopilado las 6 técnicas que debes tener en cuenta a la hora de mejorar la velocidad de carga de tu web:

1.- Contratar un buen servicio de hosting

Contar con servicios gratuitos de alojamiento web puede ser buena idea si tenemos un proyecto personal o empezamos a trastear con el diseño web o estamos aprendiendo WordPress. Bastante que tenemos la posibilidad de tener un espacio gratuito para publicar nuestros contenidos y experimentos, incluso con bases de datos y otras características interesantes, pero obviamente no podemos pedir peras al olmo. Estos servicios no son adecuados si tenemos un proyecto en el que nos estamos jugando el dinero, la visibilidad y el éxito de nuestro negocio. Los servicios de alojamiento compartido nos permitirán ganar algo de velocidad por poco dinero, pero si nos decantamos por un VPS (Virtual Private Server) o incluso mejor por un servido dedicado tendremos resueltos al menos problemas de velocidad que no dependan de nosotros.

2.- Optimización de imágenes

Por mucha ADSL de 20 Mb que tengas no es buena idea incluir en tu web una (o varias) imágenes jpg sacadas tal cual de tu cámara digital. Con unos cuantos conceptos básicos y una herramienta adecuada, como Adobe Photoshop, Gimp, o cualquier otro editor de imágenes, podremos conseguir un balance adecuado entre tamaño de imagen y calidad. Si controlamos algo más podremos decidir qué formato es mejor para nuestra imagen, os damos algunas pistas:

• Formato JPG: Imágenes fotográficas con paletas de 24 bit y compresión con pérdida de calidad. Cuanto más enfocada y contrastada esté la imagen obtendremos peores ratios de compresión.
• Formato GIF: Imágenes con paletas de 8 bit o menos, con pocos colores, de tipo vectorial, iconos, textos, logotipos. Usa compresión sin pérdida de calidad.
• Formato PNG: Desde hace algún tiempo está ganando popularidad por la posibilidad de usar transparencias de 8 bit (GIF admite transparencia pero de un solo color, provocando bordes pixelados). También usa compresión sin pérdida de calidad y por ello hay que usarlo con cuidado, en imágenes de muchos colores puede generar archivos pesados.

3.- Usar nuevas características CSS3 en lugar de imágenes

Las nuevas propiedades y características de CSS3, el lenguaje de creación de estilos de nuestros documentos HTML, nos permitirán crear cosas que antes solo podían hacerse usando imágenes ahorrando unos cuantos Kb. Por ejemplo:

• Degradados: Con la propiedad background: linear-gradient (…); podemos crear degradados lineales (también radiales) que crea directamente el navegador. Antes debíamos usar imágenes bitmap para ello.
• Textos: Gracias a la propiedad @font-face podemos incluir por fin cualquier tipo de letra en nuestra web como texto. En un pasado no muy lejano, si queríamos incluir algún titular en un tipo de letra «extraño» (que no fuera times, helvetica, arial, comic-sans…) debíamos crearlo en Photoshop e incluirlo como imagen. Incluso es posible crear fuentes tipográficas con iconos como caracteres para no usar imágenes.
• Bordes redondeados y sombras de caja y texto: Igualmente con border-radius, box-shadow y text-shadow, no hace falta crear los efectos de sombra y bordes redondeados previamente en un programa de edición de imágenes para incluirlos en nuestros diseños ahorrando algunos Kb.

Esto son solo algunos ejemplos, CSS3 incluye más propiedades relacionadas con el color, transparencia, bordes y fondos para no tener que usar imágenes bitmap.

4.- Reducir el número de peticiones HTTP es vital para mejorar la velocidad de carga

Las nuevas tendencias de diseño web y la popularación de plugins, servicios de terceros e integración de contenido social hacen que sea muy frecuente que nos encontremos con que un documento HTML se nutre de varios archivos de hojas de estilo distintas, archivos de javascript, iconos… Cada vez que se hace una llamada a estos archivos se produce una petición HTTP al servidor y esto provoca que tu web se cargue más lentamente. Siempre que sea posible, agrupa hojas de estilo en  un solo documento CSS. Y lo mismo para los archivos de Javascript. Es más, la máxima expresión del ahorro es «minimizar» estos archivos eliminando los espacios, comentarios y cualquier carácter innecesario.

5.- ¿Responsive design o versión móvil?

Si quieres que tu sitio web se vea decentemente en cualquier dispositivo, y más hoy en día que cada vez se accede más desde dispositivos móviles, seguramente te habrás planteado el crear un diseño adaptable (responsive design) usando media queries con CSS3. Pero cuidado, usar técnicas de diseño adaptable solo harán que tu sitio se vea correctamente en cualquier tamaño de pantalla, es decir, afecta únicamente al diseño. ¿Qué pasa con el contenido?

Aunque con la llegada del 4G y el acceso a través de Wifi las velocidades de navegación en cualquier dispositivo se van equiparando, no todos los terminales ni todos los usuarios pueden navegar a la misma velocidad que un ordenador. Por ello, si tu sitio web es pesado en contenidos deberías pensar en, además de adaptar el diseño también en adaptar los contenidos. Esto implica crear dos sitios web (uno para móviles y otro para navegadores de escritorio) con distinto contenidos, obviamente en este caso más ligero para la versión móvil mostrando sólo la información más relevante y usando menos imágenes y de menor tamaño.

Aunque es una tarea mas laboriosa tiene varias ventajas: te permite segmentar mejor el origen de tus visitas y aprovecharlo, por ejemplo, para mostrar publicidad específica en función del tipo de dispositivo desde el que te visitan. Puedes usar scripts en JS o en lenguajes del lado del servidor (PHP, ASP, Ruby…) para detectar el navegador con el que el usuario accede a tu web y conocer así si se trata de un dispositivo móvil o no.

6.- Precargas, cargas selectivas, AJAX..

¿Por qué hacemos esperar al usuario a que se cargue contenido que no se va a utilizar de momento? Usando distintos métodos de programación podemos hacer que se cargue primero el contenido importante, el que va a estar disponible desde un primer momento, y dejar para cuando sea necesario el resto del contenido. Incluso con AJAX podemos cargar en segundo plano contenido bajo demanda a petición del usuario, haciendo nuestra página más usable y ligera.

Hay más factores y técnicas que afectan a la velocidad de carga de una web y por tanto a su posicionamiento, usabilidad e incluso en webs que se financian con publicidad puede afectar a sus ingresos. Siendo cuidadoso y conociendo técnicas de diseño, manipulación de imágenes (y edición de audio y video en caso de que tu web tenga este tipo de contenido) y programación podemos lograr una web rápida y optimizada. En nuestros cursos de diseño web y desarrollo de aplicaciones web con certificado de profesionalidad te enseñamos cómo conseguir todo estoy y muchas cosas más de la mano de nuestros formadores expertos.

Nos vemos en Nowe!