CERRAR

También, te podemos ayudar en hola@humanoidedigital.com
o llámanos a (57) 312 324 62 23 - 301 264 93 48

Humanoide Digital > Blog > ¡Corre web, corre!

¡Corre web, corre!

Una página web rápida es, hoy por hoy, un MUST tanto para entregar a nuestros usuarios una experiencia óptima y rápida como para el posicionamiento en los motores de búsqueda.

Sin embargo, muchos de nosotros los desarrolladores y diseñadores web, a veces obviamos este aspecto y nos damos cuenta que nuestro sitio o app web es tremendamente lento y a veces corregir los problemas para hacer nuestra web rápida, resultan ser tediosos y difíciles de identificar.

Voy a nombrar algunos tips que te ayudarán a diseñar una web rápida y a minimizar los grandes problemas de lentitud para que no los tengas en cuenta solo al final del desarrollo:

Usar o no un Framework o CMS

Los frameworks y los CMS son excelentes herramientas para acelerar los procesos de desarrollo, realizar mantenimiento más rápido y acertado y/o escalar la versión de un producto de software con buenas prácticas. Aquí lo primero que debes preguntarte es si el producto que vas a crear realmente merece el uso de un framework para su desarrollo. En la mayoría de los casos la respuesta es sí. Sí es recomendable usar un framework, pero créeme que te sorprenderás que a veces es mejor aplicar la antigua usanza o ‘la vieja confiable’. Las tecnologías clásicas de HTML y CSS son suficientes para, por ejemplo, crear una landing page.

Uglificar, minificar y comprimir

Comprimir tus archivos CSS y JS es un mandamiento de todo buen front-end. Si eres de los que sube los archivos CSS y JS al servidor de producción sin comprimir para que luego te pidan un cambio y edites el archivo directamente sin tener un entorno de desarrollo y de pruebas (stage), das pena y dejas mucho qué desear. Por el contrario, vas por buen camino en el proceso de hacer una web rápida.

Fuentes tipográficas locales

Estamos acostumbrados a llamar fuentes desde Google Fonts u otro servicio pero la mejor forma es descargar nuestras fuentes y añadirlas a nuestro CSS para así evitar llamadas a otros servidores externos los cuales no nos van a garantizar si van a responder rápido.

Imágenes comprimidas y con carga lenta

Comprime las imágenes para que el peso sea menor y así la carga sea más rápida. Servicios como TinyPNG te ayudan con esto. Si tu web contiene demasiadas imágenes, usa un plugin como Lazy load que te ayuda a cargar las imágenes a medida que el usuario hace scroll. De esta forma, el primer pantallazo de tu web será inmediatamente visible y con una velocidad récord.

SVG ‘as much as possible’

La mayoría de los navegadores son capaces de renderizar imágenes en formato SVG. Todo lo que sean iconos, logos, imágenes planas y dibujos deben estar en formato SVG para que el motor gráfico del browser sea quien ‘dibuje’ las imágenes y de esta forma un archivo SVG pesará muchísimo menos y el renderizado podrá ser más rápido. Adicionalmente, estas imágenes pueden ser re dimensionadas y no van a perder la calidad. Por su puesto que cosas como fotografías no podrán ir en este formato, ya que no se verían iguales y ya existen formatos adecuados.

Adaptar no es ocultar

Algunos ‘magos del front-end’ se pasan de listos cuando necesitan realizar un desarrollo adaptativo. Por ejemplo, necesitan mostrar un menú diferente para dispositivos móviles y otro para pantallas más grandes. Es ahí en donde se van por la fácil y se dedican a ocultar HTML con los ya conocidos media queries de CSS3. Piensa en esto un momento, ¿No es mejor valerse de un programador Back-end para que te ayude a mostrar el markup adecuado dependiendo del dispositivo?

Así mismo, asegúrate de mostrar las imágenes de tu sitio web en un tamaño y peso adecuados dependiendo del dispositivo y evita el re escalamiento.

¿Qué otras buenas prácticas recomendarías para acelerar nuestros sitios web?

Publicado por

Brian Wormboy

Desarrollador full-stack, especialista en front-end. Amante de los idiomas, las artes, la fotografía, la pintura y la música. Odio a veces el mundo por esconder las cosas maravillosas y mostrar las malas.