Mejorar velocidad carga web

Técnicas para aumentar la velocidad de carga de la web

Aunque ya vimos en otro artículo del Blog como aumentar la velocidad de nuestro sitio en WordPress, esta vez nos centraremos en aspectos más técnicos, que nos ayudarán a mejorar los tiempos de carga.
 

Disponer de un servidor óptimo

Según la recomendación de Google, el servidor de nuestra web tendría que tener un tiempo de respuesta inferior a los 200 ms. Hay varios puntos que tenemos que tener en cuenta, para tener una mejor respuesta.

  • Gestionar el contenido estático de nuestra web mediante NGINX en lugar de Apache.
  • Cargar paralelamente nuestras imágenes con subdominios o en su defecto utilizar HTTP/2 que ya carga paralelamente todos los elementos de la web.
  • Tener un servidor que use discos duros SSD.
  • En caso de tener una web con proyección internacional, se recomienda el uso de CDN, que distribuye en diferentes servidores en el mundo nuestra web, y así carga más rápido en cada parte, sin importar donde estemos.

CDN para aumentar la velocidad

 

Evitar redirecciones dentro de la propia web

Cuando hay una redirección en una página interna de la web, se envía una petición al servidor, que este dice que la URL a cambiado de sitio y envía la nueva ubicación al navegador. Este proceso hace que a parte de enviar una petición innecesaria, el usuario tenga que esperar un poco más de la cuenta para hacer el cambio a la URL correcta. Para evitar las redirecciones internas, una herramienta útil es el Screaming Frog, que nos permite ver todos los enlaces rotos o con redirecciones fácilmente. Una vez hayamos rastreado la web, solo nos faltará localizar las que tengan 301 o 302 y substituir el enlace por el correcto.

screaming frog errores y redirecciones

 

Reducir las peticiones de elementos

En general los CMS tipo WordPress son la forma más fácil y versátil de crear una web. El problema es que muchas de las plantillas que vienen por defecto cargan muchos elementos que luego no utilizamos. Sería muy interesante reducir al máximo todos estos elementos, ya sean imágenes (que no sean importantes), botones de redes sociales, widgets que cargan JS o CSS que no usamos, por poner un ejemplo.

minificar js y cssOtras acciones que podemos hacer es minificar y unir los Javascripts y los CSS en un archivo conjunto respectivamente. El término minificar se refiere cuando quitamos todos los espaciados y comentarios de un archivo, para que solo contega código útil (lo que hace que ocupe menos espacio). En el caso de unir los archivos, para los CSS no suele haber problema, pero en el caso de los JS puede que den alguna incompatibilidad, con lo que ya es cuestión de hacer pruebas y mirar cuales se pueden juntar y cuales no. Para hacer las dos cosas, suele haber plugins que te facilitan la tarea (normalmente son los mismos que sirven para cachear la web), y sino siempre lo podremos hacer manualmente, mediante programación.

Otra forma es juntar varias imágenes mediante el uso de Sprites CSS, y con la ayuda de los CSS mostrar solo la parte correspondiente a cada una. Se suele usar esta técnica cuando se tienen muchos logos o elementos pequeños, para así cargarlos todos de golpe de una vez.

 

Cargar los elementos visibles en primer lugar

Otra forma de mejorar la velocidad de carga y en general, la experiencia del usuario, es intentar que carguen todos los elementos en primer lugar. Esto es importante hacerlo después del apartado anterior, ya que así nos será más fácil organizarlo. En primer lugar deberíamos determinar que parte de la web queremos que  se vea en primer lugar, y priorizar eso ante todo. Con lo cual, si por ejemplo tenemos el contenido a la izquierda y una barra o sidebar a la derecha, deberíamos asegurarnos que dentro del código html, se esté cargando primero la parte del contenido. También es importante que adelantemos lo antes posible la carga de CSS dento de nuestro código y en general, que aplazamos la mayoría de Javascrips para el final (hay algunos que no se pueden aplazar). Para los JS, lo ideal es combinar en un solo archivo los que se pueden aplazar y en otro los que no, y cargar los que se puedan, antes del cierre de </body> de nuestra web, y los que no, antes del cierre del </head>.

0 Comentarios
Escribe un comentario

Uso de cookies

Utilizamos cookies propias y de terceros para mejorar nuestros servicios y mostrarle publicidad relacionada con sus preferencias mediante el análisis de sus hábitos de navegación. Si continúa navegando, consideramos que acepta su uso. Puede cambiar la configuración u obtener más información aquí

ACEPTAR
Aviso de cookies