Como acelerar tus sitios web

Desde la creación de Internet, los tamaños de archivo promedio han estado creciendo constantemente. Lo que comenzó como kilobytes ha progresado hasta megabytes siguen creciendo.

Aquí algunos consejos para que acelerar tus páginas web.

Si bien este fenómeno no es desconcertante a primera vista, el impacto que tiene sobre el rendimiento y la capacidad de mantenimiento es muy grande.

A esto agrégale los dispositivos móviles, las restricciones de ancho de banda… y tenemos un problema mucho más grande.

Afortunadamente, tenemos control sobre no sólo el tamaño de los archivos, sino también sobre la forma en que nuestras páginas se presentan en el navegador.

Este tipo de control permite a los desarrolladores web como nosotros, la opción de aliviar este problema, y optimizar nuestro código para un mejor rendimiento en el proceso.

¿POR QUÉ MOLESTARSE?

Entiendo completamente la falta de interés ya que la mayoría de las conexiones a Internet son bastante rápidas en estos días. Es decir decir, si todo funciona bien, para qué molestarse?

El rendimiento y la optimización son algo más que la rapidez con la que podemos descargar contenido.

También hay un buen número de beneficios SEO y UX (experiencia del usuario) que obtendremos si nos tomamos el tiempo para mirar a nuestro código.

Además, la disminución de tamaño de los archivos mediante la optimización de nuestro código tiene la ventaja añadida de reducir nuestros costos de ancho de banda, y disminuye también el uso de ancho de banda a nivel de usuario (piensa en las conexiones 3G de los móviles).

 PENSANDO EN MODULAR ES EL PRIMER PASO

Aquí queremos pensar en modular, en función de la combinación de la mayor cantidad de piezas comunes de nuestro código como nos sea posible.

Si somos capaces de combinar dos clases CSS en una y utilizar menos código para proporcionar el mismo resultado, deberíamos hacerlo.

La modularidad no es tan importante cuando se trata de HTML básico y CSS, pero cuando te metes en el complejo mundo de JavaScript, tener demasiado código puede hacer daño, especialmente en el móvil.

REDUCE AL MÍNIMO LAS PETICIONES HTTP Y LAS DEPENDENCIA

Las solicitudes de dependencia son, por mucho, el factor más importante en el retraso de la mayoría de las velocidades de carga de la página.

Cada solicitud adicional añade  otra capa de complejidad al proceso de análisis y descarga.

A menudo es fácil olvidar que se llaman imágenes desde tu hoja de estilo CSS, así que asegúrate de limitarlas y utilizar métodos de optimización alternativos como sprites o SVG cuando sea posible.

Mientras estamos en el tema de las dependencias externas, si tu sitio web es lo suficientemente grande como para requerir docenas de solicitudes , entonces puede ser el momento de considerar el uso de un CDN.

El uso de un CDN ayuda a distribuir tu contenido no disminuirá los tamaños de los archivo, ni los tiempos de carga tanto como la eliminación de las peticiones HTTP adicionales, pero probablemente pueda eliminar las conexiones lentas a servidores.

ESCRIBE INTELIGENTEMENTE, CÓDIGO MÁS LEGIBLE

A veces el mismo código que estamos escribiendo es el enlace más lento de la cadena.

Un CSS ineficiente o demasiado JavaScript pueden aumentar los tiempos de carga más de lo que puedes pensar.

En resumen, escribir la ruta exacta por una cadena de selectores es mucho menos eficiente que el simple uso de un selector único de identificación. Ambos dirigen el estilo al mismo elemento, pero éste ultimo simplemente hace el trabajo mucho más rápido.

JavaScript puede ser incluso peor que un CSS mal escrito, y en muchos casos es fácilmente pasado por alto.

¿Cuántas veces has copiado y pegado una biblioteca externa JS en su proyecto sin realmente mirar en profundidad a la misma fuente?

Afortunadamente, este tipo de eventos ocurren raramente, pero aún así es una buena práctica llamar a JavaScript a lo último, si es posible, como es el caso de Google Analytics.

Si lo haces, permites que al navegador procesar primero los CSS y las peticiones HTTP y luego a JavaScript que seguramente ralentizará la carga, pero será el final.

MANTEN EL HTML MUY SIMPLE

En consonancia con nuestro objetivo de escribir selectores CSS limpios y tener el código al mínimo, escribir HTML eficiente también debe ser una prioridad.

Los “resets de CSS” ayudan a reestrablecer los márgenes y padding  y esto evita que tengamos que escribir mas líneas CSS para modificarlos o para reposicionar elementos.

Con la introducción de más elementos en la especificación de HTML5, también tenemos mucha más flexibilidad en esta área también.

A GOOGLE LE GUSTA CUANDO ESCRIBIMOS CÓDIGO MÁS LIMPIO

Google ha hecho una prioridad el tema del código limpio.

Para ocupar posiciones destacadas en sus resultados de búsqueda, las páginas ahora deben prestar atención a muchos atributos diferentes del código.

Llamando demasiados recursos externos, teniendo absurdamente grandes las imágenes, o incluso  escribiendo mal el código JavaScript puede tirar tu sitio abajo en las posiciones de los resultados.

Afortunadamente, sin embargo, todo esto es con buena intención ya que hace que los programadores logremos buenas y mejores prácticas de desarrollo.

CONCLUSIÓN

Al optimizar nuestro código, tenemos que pensar no sólo en el tamaño de los archivos, sino también considerar cómo va a ser leído; ya sea por los navegadores o incluso por otros seres humanos.

El uso del móvil también debe ser tomado en consideración, muchos proveedores de servicios restringen el ancho de banda en estos días.

Así que mientras que puede tomar más tiempo para llevar a cabo toda esta optimización, es sin duda un esfuerzo que vale la pena, ya que no sólo ofrece un mejor rendimiento en el navegador y en el móvil, sino que  también tiene la oportunidad de promover mejores prácticas de desarrollo e incluso hace que tus paginas aparezcan en posiciones superiores en los motores de búsqueda como Google.

¿Te gustó el artículo? Déjame tus comentarios !

¿Te gustaría aprende a crear sitios web desde cero?