Diseño de sitios web rápidos

Redes sociales

cheetah corriendoSi estas empezando en esto del diseño de páginas web, puede que la velocidad de las misma te resulte un problema menor, al menos a mi así me lo parecía.

Muchos diseñadores noveles empiezan en un lienzo de Photoshop en blanco, sin ningún tipo de planificación. Muchas veces, ni siquiera se piensa cuantas páginas va a tener el proyecto, o lo que se va a incluir en ellas. Yo era así.

Sin embargo, hay cosas que se aprenden a las malas, y una de ellas es que, para construir buenos sitios web, la planificación es esencial. Hay una serie de cosas que se deben de priorizar en primer lugar, y eso significa pensar en sitios web rápidos desde el principio.

Pero… ¿de que estoy hablando cuando digo “sitios web rápidos”? ¿Del tiempo que tarda en cargarse en el navegador? ¿Del tiempo que tarda en ejecutarse? Sí. Estoy hablando de las dos cosas, ya que hay una gran confusión y superposición entre ambos términos.

Debes de tener en cuenta dos cosas. Primero, hay mucha gente que todavía tiene conexiones a Internet bastante lentas, la cobertura 3G/4G no es muy grande; y en segundo lugar, posiblemente, hay aún millones de computadoras y dispositivos móviles con procesadores de gama baja.

Al fin, mayor velocidad, significa, más visitas, más ventas; que los usuarios podrán consultar más información en menos tiempo. Un sitio web lento da la impresión que no funciona correctamente. Ten encuentra, que hay que intentar poner a prueba la paciencia de los usuarios lo menos posible.

Al fin y al cabo, esto es Internet, el sitio más competitivo de todos.

Lo primero

Debes comenzar la optimización de tu sitio web con el contenido. Si el contenido en sí está ralentizando  la carga, ninguna acción posterior para acelerarlo lo solucionará.

Para que el contenido no lastre la velocidad de tu web, no debes descuidar dos grandes aspectos:

Las grandes imágenes

Cada vez es más evidente, que las imágenes grandes tienden a vender mejor. Y eso es genial. Pero por favor, utiliza esas imágenes con moderación, asegúrate que estén adecuadamente comprimidas, o mejor aún, si puedes utiliza el formato SVG.

Según los últimos estudios, hoy en día, en los dispositivos móviles, que son generalmente los más lentos y con planes de datos limitados, para que una página se considere rápida, debe de ocupar 1MB o menos.  Si tienes en cuenta, que las imágenes, representan de media, casi el 65% de la carga de la página, comprenderás enseguida la importancia de éstas en el problema que nos ocupa.

2015-mobile-page-growth-detail

Sin embargo puedes tener los mejor de ambos mundos, velocidad y grandes imágenes. Para ello, la respuesta está en implementar imágenes adaptables o responsivas, cuyo tamaño varía en respuesta al dispositivo en las que se las visualiza. Las personas que navegan en ordenadores de sobremesa son más propensos a tener conexiones a Internet lo suficientemente rápidas para hacer frente a las imágenes más grandes, cuyo tamaño debería reducirse al navegar con dispositivos móviles.

Anuncios y otros contenidos de terceros

Sí, los anuncios también cuentan como contenido, especialmente cuando están mezclados con el cuerpo de un artículo. Peor aún, a veces las redes de anuncios son muy, muy lentas. No puedo contar el número de veces que me he desesperado, seguro que tú también, al ver como sólo una pequeña parte de la página se carga, y a continuación, el navegador se detiene mientras se carga la red de anuncios, antes de mostrase el resto del contenido.

Si tu página va a tener anuncios, estudia concienzudamente como los vas a implementar, y asegúrate que lo explicado antes no puede suceder. Lo mismo ocurre con cualquier otro contenido que esté conectado a servidores de terceros, como son los canales RSS, las redes sociales, y contenidos similares que pueden ralentizar aún más tu sitio web, si no tienes cuidado.

Cuando el diseño es por sí lento

Hay sitios con contenido simple, formado por texto y un par de pequeñas imágenes que sin embargo se encuentran agobiados por un diseño pobremente planeado y mal codificado.

Esto es en parte, debido a que la gente siente la necesidad de crear sitios tan vistosos y elegantes como sea posible. Los días en que un sitio web, para ser importante, debería estar programado en Flash, han pasado por diversas razones (la velocidad una de ellas), pero eso no quiere decir que ahora todas las webs tengan que disponer de HTML5, CSS3 y JavaScript.

Tus usuarios, probablemente, no necesitan cosas rebotando por la pantalla. Quieren un acceso rápido y sencillo a la información que ofreces o a los productos que vendes.

Tu página web no tiene por que tener siempre efectos de paralaje, animaciones o otros efectos brillantes para ser eficaz. Ahora bien, tampoco estoy diciendo, que la página debe ser un texto negro sobre fondo blanco sin más diseño. Estoy diciendo, que todos y cada uno de los elementos de diseño deben ser sopesados y ver cómo afectan a la experiencia del usuario.

Si necesitas añadir animaciones o cualquier otro efecto llamativo a tu sitio pregúntate si necesitas algo sencillo o algo más avanzado. No es obligatorio utilizar siempre jQuery. Esto es especialmente cierto para los sitios web de tamaño pequeño o mediano.

Seguro que has visto animaciones que ralentizan la carga de una página, de forma desesperante, aún en potentes ordenadores de sobremesa con conexiones a Internet rápidas. Ahora imagina a alguien tratando de navegar por ese sitio en smartphones o tabletas de gama baja. Imagina su frustración.

Si necesitas en tu diseño un par de efectos para “dar vida” a tu web aquí encontrarás toda una biblioteca de plugins JavaScript que no requieren jQuery ni ningún otro framework.

A vueltas con el código

Voy a hablar de los frameworks HTML y CSS. Los más probable, es que no necesites complejos y pesados frameworks como Bootstrap o Fundation para crear sitios web rápidos y simples. Pueden reducir el tiempo de desarrollo, pero esto puede que no valga la pena en comparación con el tiempo de carga adicional que conlleva su uso.

Si vas a utilizar un framework, al menos personalízalo, y quita todo lo que no vayas a necesitar. La mayoría de grandes frameworks HTML/CSS ofrecen maneras fáciles de hacer esto.

Sobre las imágenes de nuevo…

No, no voy a hablar de nuevos de las grandes imágenes. ¿Utilizas todavía imágenes de mapa de bits, para el color de fondo, gradientes, sombras, iconos y ese tipo de cosas? No deberías hacerlo. Si puedes hacerlo con HTML, CSS y SVG adelante. Esto significará más código, pero ese código será generalmente más ligero que los archivos .jpeg e incluso que los .png.

Es ahora más rápido tu sitio web ¿no?

Bueno, aún hay mucho más que aprender, especialmente su utilizas CMS como WordPress, Joomla o similares, o configuraciones complejas de hosting. Estos consejos son para quien empieza a diseñar sitios web desde cero… pero bueno, aprender cosas nuevas ¡siempre es interesante!

Redes sociales

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.