¿Quieres que tu web cargue como un rayo? Te decimos cómo

¿Cuántas veces hemos estado delante de nuestro dispositivo esperando a que acabe de cargar la página? ¿A que esa foto acabe de cargar? Demasiado. Hoy te traemos una serie de buenas prácticas para que tu web vaya como un rayo. ¿Nos ponemos al lío?

Lo primero, medir.

Existen varias herramientas para verificar la velocidad de carga de nuestra web aunque nosotros utilizamos principalmente las siguientes.

• Google Pagespeed
• Pingdom
• Gtmetrix

Estas tres web nos dan una serie de resultados y puntos de mejoras en la velocidad de carga de nuestra web. Estos resultados se pueden agrupar en cuatro grandes bloques.

• Servidor
• Imágenes
• Carga de elementos que hacen de cuello de botella
• Otras características

Vamos a ir bloque por bloque analizando cuales son los principales problemas y las soluciones que proponemos.

Servidor

Problema: Tiempo de respuesta del servidor

Es el tiempo que tarde en cargar el código HTML desde que se hace la llamada al servidor hasta que se muestra la página.

Solución:

El tiempo de respuesta de nuestro servidor no debe ser superior a 200ms. Hay varios puntos que pueden aumentar el tiempo de respuesta del servidor: una programación de la aplicación no optimizada que ralentiza su funcionamiento, consultas no optimizadas y consultas pesadas a la base de datos que devuelven más campos de los necesarios, un enrutamiento demasiado complejo y no optimizado que ralentiza el sistema, los entornos las bibliotecas que se usan pueden no estas optimizadas, el procesador del servidos puede que no sea capaz de procesar todas nuestras solicitudes rápidamente, la memoria del servidor puede que no sea la suficiente para procesar todas nuestras solicitudes rápidamente. Todos esto puntos son los que hay que tener en cuenta para mejorar el tiempo de respuesta del servidor. Este punto es un tema peliagudo ya que se necesita un conocimiento de cómo está organizado tu web y tu servidor. Dificultad Alta

Problema: Habilitar compresión

Actualmente la mayoría de los servidores web son capaces de comprimir archivos en formato gzip antes de enviarlos al cliente para su descarga, los servidores pueden utilizar un módulo de terceros o sus propias rutinas.

La minificación de recursos se refiere a la eliminación de bytes innecesarios, como los espacios adicionales, saltos de línea y sangrías.

Solución:

Hay que activar la comprensión en tu servidor web, actualmente hay mucha información al respecto de cómo activarlo para cada servidor (Apache, Nginx, IIS…) Dificultad Media

Problema: Minificar recursos (JavaScript, CSS y HTML) 

La minificación de recursos se refiere a la eliminación de bytes innecesarios, como los espacios adicionales, saltos de línea y sangrías.

Solución:

Existen varias paginas para la optimización de JavaScript y para la optimización de CSS, para la optimización de HTML hay que tener buenas practicas de programación y evitar dejar espacios adicionales, saltos de lineas y sangrías. Dificultad baja

Problema: Especificar caché del navegador

Los recursos estáticos se almacenan en nuestro navegador para ahorrarle al usuario el tiempo de cargas si se visita un sitio varias veces.

Solución:

Hay que activar el almacenamiento en caché del navegador en tu servidor. Todos los recursos estáticos tienen que tener asignados un ciclo de vida para que una vez trascurrido ese tiempo vuelvan a ser pedidos al servidos, estos recursos al menos deben de tener una semana de tiempo de vida.  Dificultad baja

Imágenes

Problema: Optimizar imágenes

Puedes optimizar todas las imágenes para ajustar el tamaño, reducir profundidad de color, eliminar metadatos, guardarlos en formatos más ligeros y poder utilizar herramientas externas para la comprensión sin pérdida de calidad.

Solución:

Este tema es muy peliagudo y tiene bastante influencia respecto a la velocidad de carga, así que es muy importante optimizar las imágenes mediante herramientas como en el tamaño. No podemos subir  una foto de 800X600 para un lugar de 400X300, en este caso tendríamos que subir otra imagen igual pero de 400X300. No podemos usar la misma foto para sitios diferentes con tamaños de visualización diferente  Dificultad baja

Carga de elementos que hacen de cuello de botella

Problema: Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página.

El navegador antes de cargar la página al usuario revisa su contenido. Si encuentra una referencia a un scrip o un css externo que es bloqueante, el navegador descarga este contenido y hasta que no se descarga este archivo no prosigue con la carga, este tipo de referencia bloquea la carga. Al suceder esto se crea un nuevo flujo de datos que retrasa la carga.

Solución:

Si usamos scripts externos sencillo y de poco tamaño se pueden insertar directamente en la cabecera de la web, en caso de que sea pesado se puede realizar una carga asíncrona del archivo mediante el atributo HTML. No todos Java Script se cargan de forma asíncrona debido a que puede ser necesario en la carga inicial. Dificultad Alta

Problema: Prioriza el contenido visible

Para que la carga del contenido sea más rápido hay que intentar que los datos cargados en la mitad superior de la página sea cuanto más ligero mejor.

Solución:

La composición del código HTML debe priorizar la carga de los elementos más importante en la parte superior de la página. Dependiendo de qué contenido tenga la página esto no es posible. Dificultad baja

Otras características

Problema: Evita los redireccionamientos a páginas de destino

El redireccionamiento a otras páginas provoca un ciclo de solicitudes y respuestas que aumenta la latencia, la disminución de estas llamadas es importante

Solución:

Si tu sitio web debe usar redirecciones se pueden usar dos reglas para evitar los redireccionamientos en la medida de lo posible:

• Para que los usuarios móviles entren a la URL equivalente sin tener un redireccionamiento es recomendable usar un redireccionamiento HTTP.
• Para que el ordenador pueda detectar URL equivalente para dispositivos móviles y que Googlebot las detecte se pueden usar en el código &ltlink rel=»alternate»&gt. Dificultad baja

En resumen para mejorar la velocidad de carga con tener en cuenta las recomendaciones de dificultad baja y la optimización de imágenes veremos un aumento espectacular de velocidad de carga.