Blogues Blogues

Retour

Aligera las páginas de tus webs y de tus cursos

No hay nada que desespere más a un usuario que una lenta carga de una página de una web o de un curso del Aula Virtual. Optimizar la velocidad de carga de cualquier página ayudará a mejorar la experiencia de tus usuarios y aumentará su tiempo de permanencia para cualquier consulta, realización de tareas, búsqueda de información, etc.

Para ayudarte a mejorar los tiempos de carga lentos, a continuación te presentamos unos consejos para optimizar la velocidad de carga de tus páginas.

Uso de elementos multimedia

Es importante no sobrecargar las páginas con demasiados elementos multimedia ya que su carga será demasiado lenta en dispositivos antiguos o con conexiones lentas.

Pocas imágenes, que no sumen más de 300 KB en total, y no incluir más de un vídeo u otros elementos multimedia, supondrá una carga más rápida de la página a usuarios con conexiones lentas.

Imágenes

Para no ralentizar la carga de las páginas, es recomendable utilizar las imágenes ligeras y con las dimensiones con las que han de mostrarse.

¿Qué ventajas tiene hacer un buen uso de las imágenes?

  • Páginas más ligeras.
  • Correcta visualización.
  • Mayor nivel de accesibilidad: si nuestra conexión no es buena, no podremos acceder a páginas muy pesadas, por ejemplo. Puede parecer algo raro, pero todavía sigue habiendo conexiones móviles con tasas de transferencia limitadas (100 MB al día, por ejemplo).
  • Menor desgaste del servidor.

Lo más habitual es utilizar tres tipos de archivos: GIF, PNG y JPG. Todos ellos guardan las imágenes comprimidas, pero utilizan diferentes sistemas de compresión. En líneas generales, es recomendable utilizar los formatos según la finalidad:

  • Fotografías: JPG.
  • Imágenes con colores planos o con transparencia: PNG.
  • Imágenes con movimiento: GIF.

¿Qué peso debería tener una imagen?

Depende tanto de sus colores como de la calidad que necesitamos. Lo mejor es conseguir que las imágenes pesen lo menos posible y que se vean lo suficientemente bien. Como orientación: una imagen con unas dimensiones de 550 píxeles de ancho no debería pesar más de 50 KB.

Las imágenes de los contenidos creados en el Portal de EducaMadrid

Los contenidos creados con el Administrador de contenidos del Portal permiten seleccionar una imagen destacada. Al crear el contenido, la propia aplicación creará de forma automática tres copias de la imagen:

  • Una pequeña, de 200 píxeles de ancho o alto, que se mostrará en la vista resumida del contenido.
  • Una mediana, de 250 píxeles, que se mostrará en la vista detallada del contenido.
  • Una grande, de 550, que se mostrará al ampliar la imagen del contenido.

También guardará la imagen original.

Configuración del tamaño de la imagen en el Administrador de contenidos de EducaMadrid.

La imagen de 550 píxeles se mostrará al pinchar sobre la imagen mediana que vemos en la vista detallada del contenido. Como vemos, una parte importante de la labor de optimización la hace EducaMadrid por nosotros.

En cuanto al tamaño, un máximo de 550 o 600 píxeles de ancho o de alto suele ser suficiente para su correcta visualización. Las imágenes cuadradas podrían ser algo más pequeñas: 450x450 o 375x375 píxeles, por ejemplo.

Utilizar siempre los mismos tamaños puede hacer que nuestras páginas sean más agradables. Podemos definir un tamaño para las imágenes verticales, otro para las horizontales y otro para las cuadradas, y usarlos siempre. Esto, por supuesto, es a criterio de diseñador.

Además de la alternativa, es aconsejable indicar las medidas finales de la imagen para asegurarse de que se carguen correctamente en el navegador.

Otros elementos

En ocasiones, necesitamos poner a disposición de los usuarios otros elementos, como ficheros o vídeos, por ejemplo. Si el tamaño de estos elementos no es reducido, tanto su subida directa a nuestra página como la opción de incrustarlos podrían ralentizar la carga, así que lo más aceptable sería tener estos elementos subidos en nuestro canal de Mediateca y simplemente facilitar la URL para que el usuario pueda tener acceso directo desde nuestra web o desde nuestro curso del Aula Virtual.

Resumen

Para la correcta carga de nuestras páginas, es recomendable:

  • Que las imágenes tengan un peso lo más reducido posible para facilitar su carga al usuario final: la imagen deberá tener la resolución mínima que permita su correcta visualización para el objetivo utilizado (no más de 300 KB para la suma de todas las imágenes).
  • Que los tamaños de las imágenes sean suficientes para la correcta visualización: no más de 550 o 600 píxeles de ancho o de alto.
  • Que estén fijadas las dimensiones de la imagen.
  • Que los formatos de las imágenes sean de estándares abiertos de uso generalizado: .jpg, .png, .gif.
  • Que las imágenes incluidas posean un contraste suficiente entre los colores de fondo y primer plano. Es importante contar con que las imágenes deben ser visibles tanto sobre fondos claros como sobre fondos oscuros ya que cada usuario puede seleccionar el modo claro u oscuro según sus preferencias.
  • Que otros elementos (ficheros o vídeos) estén guardados en Mediateca para que los usuarios puedan acceder a ellos a través de la URL.

GIMP es un software libre multiplataforma muy potente para el tratamiento de imágenes y su optimización para la web. Si usamos MAX, lo encontraremos instalado en el menú “Gráficos”.

Uso de códigos

A la hora de utilizar código en cualquier lenguaje de programación es muy importante la buena organización del mismo. CSS, HTML y JavaScript pueden contener mucho código adicional, redundante y completamente inútil que, de manera similar a las imágenes, pueden ralentizar la página.

Para evitar esto, es recomendable minimizar el código. La minimización reduce el código al eliminar todos los datos redundantes, como notas, espacios inútiles y otros elementos innecesarios, que podrían haber surgido en el proceso de creación o actualización de la página.

Último consejo

Además de cuidar la velocidad de carga de tu web, no te olvides de que existen unos criterios de accesibilidad que debemos cumplir para garantizar el derecho de acceso a todos los usuarios. Te explicamos todos los detalles en nuestra documentación de ayuda.