Cargar imágenes en paralelo para mejorar la web a ojos de los buscadores y de los usuarios

Una buena forma de mejorar la velocidad de carga de un sitio web con más de 6 imágenes es cargarlas en paralelo desde diferentes subdominios; lo llaman paralización de carga pero esa palabra a mi me suena a que se paralizan y aunque es cierto (de algún modo) lo que hacemos para evitarlo es cargarlas en paralelo y este término me gusta más por ser más optimista.

El problema de tener muchas imágenes

El problema es que los navegadores con los que se visualizan las páginas web tienen un número limitado de archivos que pueden abrir de forma simultanea de un mismo dominio o subdominnio. Cuando hay que cargar más de 6 imágenes para una página web el navegador carga de 4 en 4 o de 6 en 6 con lo cual, si tenemos 12 imágenes tendrá que esperar a cargar primero unas pocas y una vez cargadas esas continuar con otras pocas, hasta tenerlas todas cargadas.

La solución es diversificar

Una palabra que me gusta y no solo los bancos tienen permiso para usarla es “diversificar”. Si diversificamos las peticiones y cargamos las imágenes desde 2 o 3 subdominios… Éstas pueden ser cargadas 2 o 3 veces más rápido mejorando la velocidad de carga que ayuda al posicionamiento en los buscadores y la experiencia del usuario.

¿Cómo diversificar o cargar imágenes en paralelo?

Si nuestro dominio es “tudominio.com” crearemos 3 subdominios para imágenes desde el panel de administración de nuestro hosting con los nombre que queramos. Yo para el ejemplo utilizaré “imagenes”, “logos-fondos” y “resto”.

Entonces quedará algo así: 

  • Dominio principal: tudominio.com
  1. Subdominio para imágenes: imagenes.tudominio.com
  2. Subdominio para logos, fondos, botones…: logos-fondos.tudominio.com
  3. Subdominio para el resto de imágenes estáticas: resto.tudominio.com

Entonces lo que haremos es subir las imágenes que utilizaremos para el fondo, logo y botones de redes sociales al subdominio “logos-fondos” y cuando las queramos cargar en nuestra web utilizaremos las nuevas rutas donde hemos copiado los archivos y de donde los queremos cargar a partir de ahora

  • http://logos-fondos.tudominio.com/logo.jpg
  • http://logos-fondos.tudominio.com/fondo.jpg
  • http://logos-fondos.tudominio.com/facebook.png
  • http://logos-fondos.tudominio.com/twitter.png
  • http://logos-fondos.tudominio.com/googleplus.png
  • http://logos-fondos.tudominio.com/rss.png

Con esto ya tendríamos un subdominio con 6 imágenes que se cargarían de forma simultanea en paralelo cuando un usuario visita la página.

Después subiremos las imágenes estáticas al subdominio resto. Las imágenes estáticas son aquellas que siempre están en la web, comunes en todas las páginas, las del footer (pié de página), las que aparecen en el formulario de suscripción que aparece con un popup, etc…

Por último subiremos las imágenes del contenido o cuerpo al subdominio imagenes y luego volveremos a cambiaremos las rutas en la web con la nueva ubicación de los archivos (pueden estar repetidos). Si por ejemplo nuestra web tiene 6 páginas… (inicio, contacto, servicios, blog, formulario de inscripción y tienda) Copiaríamos las imágenes del cuerpo de las páginas “inicio” “contacto” “servicios” y “formulario de inscripción” a este subdominio y cambiaríamos nuevamente las rutas en la web para que apunten a la nueva ubicación de esas imágenes.

Con esto conseguiriamos que esas páginas cargaran 3 veces más rápido. Para poner un ejemplo y en conclusión… Si tenemos un autobús que puede transportar 32 personas necesita hacer 3 viajes para poder transportar a 90, pero si tenemos 3 autobuses que pueden llevar a 32 personas podemos transportarlas en un solo viaje y llevarlas a su destino al mismo tiempo. Está claro que si tenemos que levar 200 personas no podremos hacerlo en un viaje ni con 3 autobuses pero seguro que será mucho más rápido que con uno solo.

¿Y que pasa con el dominio principal? ¿Desde allí no cargamos fotos?

El dominio principal tiene otras cosas que cargar que ya ocupan su tiempo como para tener que encargarse también de las imágenes, el dominio principal es el encargado de alojar los javascript, los css y hacer las peticiones a la base de datos en caso de ser dinámica creada con un CMS. Así que solo le dejaremos estos menesteres y la carga de las imágenes de las publicaciones del blog o las de los productos de la tienda.

Carga de imágenes en paralelo (ilustrativo)

Ejemplo de tiempo de carga de imágenes desde un dominio

Ejemplo de tiempo de carga por bloques de las imágenes de un dominio

Ejemplo de tiempo de carga de imágenes desde 3 subdominios

Ejemplo de tiempo de carga de imágenes desde 3 subdominios

 

 

 

 

 

 

 

 

 

 

A %d blogueros les gusta esto: