Según HTTPArchive, el peso medio de las páginas web se ha casi doblado en 5 años, pasando de 1MB en 2014 a 2MB en 2019. Si bien es cierto que las velocidades de conexión van aumentando (especialmente en el mundo móvil), no deja de ser una barbaridad la cantidad de recursos que desperdiciamos generando webs tan pesadas.
Como puedes imaginar, la culpa de este aumento en el peso medio de la web es, principalmente, de los recursos audiovisuales que usamos. Ya hace muchísimo tiempo que no nos vale con simples páginas llenas de texto: queremos imágenes, vídeos, GIFs… y, encima, cada vez las queremos a mayor resolución y de mayor calidad, porque las pantallas desde las que se visualiza nuestra web también tienen una mayor resolución y mejor calidad.
Si tu página web carga muy lenta y nunca te has preocupado por optimizar las imágenes que acompañan a tus entradas, estás de suerte: hoy aprenderás qué hacer para acelerar tu WordPress. Veamos qué herramientas tienes a tu disposición para mejorar el rendimiento de tu web y evitar que las imágenes entorpezcan la experiencia de tus usuarios.
Por qué es importante optimizar las imágenes de tu web
Antes de explicarte los diferentes métodos disponibles para optimizar las imágenes y acelerar su carga, me gustaría dedicar un par de minutos a convencerte de la importancia de hacerlo. Y es que hay motivos de sobra para hacerlo y quiero que sepas y entiendas que lo que te estoy contando no me lo saco yo de la manga…
El peso de las imágenes en una web
Como te comentaba al principio, el peso de las imágenes en una web supone un porcentaje importante del total. Por ejemplo, considera esta entrada de nuestro blog: TruquiTrucos Dev – Cómo evitar que WordPress intente adivinar qué URL quieres visitar. Se trata de una entrada bastante breve, con menos de 400 palabras, que te ofrece directamente la solución a un problema.
Según GTMetrix, esta entrada supone transferir 850KB de datos. ¿Pero quién es el principal culpable de este peso? Pues, sin duda, las imágenes: la imagen destacada sola pesa más de 200KB, lo cual supone un 25% del total.
Nelio Forms
Un plugin de contacto fantástico que usa el editor de bloques. En su simplicidad está la potencia del plugin. Me encanta, es muy versátil y funciona de maravilla para mí.
Wajari Velasquez
Navegación con el móvil
Según los datos que encontramos en statcounter, el 52% del tráfico web llega a través del móvil y un 45% a través del ordenador de sobremesa. Es por ello que hoy en día se hace tanto hincapié en utilizar diseños responsive que funcionen bien en pantallas pequeñas.
Como seguro que tú mismo habrás experimentado, la velocidad de acceso a Internet del móvil poco tiene que ver con la que tenemos en casa. Según Statistia, en 2019 la velocidad media se sitúa en unos 14 Mbps. Es por ello que, si queremos reducir el tiempo de carga en mobile, tenemos que ofrecer imágenes lo más pequeñas posibles.
Coste de almacenamiento y transferencia de datos
Otro de los motivos por los cuales deberías preocuparte de usar las imágenes del tamaño adecuado (ni más, ni menos) es por tu bolsillo. Los criterios por los que los proveedores de hosting ofrecen sus planes incluyen el tamaño de almacenamiento de contenidos en sus servidores y tasas de transferencia. Esto es, cuantos más datos guardas (vídeos, imágenes, etc) y cuantos más datos se envían de sus servidores a un visitante (lo cual sucede para cada visita), más vas a pagar.
Si controlas el tamaño de tus imágenes, conseguirás reducir estos dos factores y podrás ahorrarte unos eurillos para ir a por el vermouth a mi salud 😉
Acciones de optimización de imágenes
Ahora que ya sabes por qué debes preocuparte de optimizar tus imágenes, veamos qué puedes hacer para aumentar la velocidad de carga de tu página.
#1 Sube las imágenes con un tamaño máximo adecuado
Te sorprendería saber la de gente que sube directamente las fotos que saca de su flamante cámara DSLR. Piensa que las fotos que sacas con una buena cámara, o incluso las fotos que sacas con tu móvil, pueden tener unas dimensiones y un peso muchísimo más grandes de lo que necesitas. Estamos hablando de que una cámara DSLR te puede estar sacando fotos de más de 4MB, ¿eh?
Lo primero que debes hacer, pues, es reducir las imágenes a un tamaño razonable antes de subirlas a tu web. Por ejemplo, en nuestra web, las imágenes más grandes que solemos subir son las imágenes destacadas de nuestras entradas, y las tenemos limitadas a 1200px de ancho por 800px de alto. En esta otra entrada te explicaba un método para escalar y comprimir las imágenes rápidamente antes de subirlas.
#2 Configura tu tema para que genere miniaturas adecuadas
Cuando subes una imagen a WordPress, WordPress genera varias miniaturas de la misma. Estas miniaturas están definidas por tu tema, ya que tu tema sabe que, según dónde vaya a usar una imagen, se las puede apañar con una versión más pequeña.
Por ejemplo, como te decía en el punto anterior, las imágenes que usamos en nuestras entradas son de 1200x800px, ya que ocupan una parte destacada de la página y queremos que se vean perfectamente bien:
Pero está claro que cuando listamos las entradas de nuestro blog, usar una imagen de 1200x800px quizás sea excesivo:
Es por ello que en estos casos creamos un tema que usa miniaturas de 480x320px en ese contexto.
Si crees que tu tema no está generando las miniaturas adecuadas, te recomiendo que leas la documentación de WordPress para saber cómo definir el tamaño de una miniatura con set_post_thumbnail_size o incluso como definir miniaturas adicionales con add_image_size. O, si no sabes por dónde empezar, dímelo en los comentarios y preparamos una entrada explicándolo 😉
#3 Sé consciente del tamaño de imagen que usas en cada momento
Ahora ya sabes que WordPress genera múltiples miniaturas de las imágenes que tienes en tu biblioteca de medios y que dichas miniaturas las escoge tu tema según sus necesidades específicas. Pero ojo, porque las miniaturas de imagen que genera WordPress también las tienes tú disponibles.
Cuando insertes una imagen en cualquiera de tus entradas, echa un vistazo a la barra lateral y escoge el tamaño que mejor se adapte a tus necesidades:
Por ejemplo, si vas a poner una imagen estrechita y pequeña como esta, pues lo mismo te basta un tamaño de 300x200px:
Pero si la vas a poner más grande, usar un tamaño más pequeño puede resultar en una imagen pixelada y borrosa:
Mejor usar una versión con más resolución:
Fíjate que no hemos necesitado usar la imagen completa de 1200x800px. Ha bastado con usar una versión de 1024x683px para conseguir un buen resultado.
#4 Usa el formato de imagen adecuado para cada imagen
Existen diferentes formatos de imagen, cada uno con sus fortalezas y debilidades para comprimir imágenes y que el resultado final sea el adecuado. Los formatos más utilizados son:
- PNG. Es un formato ideal para compartir imágenes que usen pocos colores, como por ejemplo una captura de pantalla del editor de WordPress.
- JPG. Es uno de los formatos más extendidos para compartir fotografías. Funciona muy bien con prácticamente cualquier tipo de fotografía, permitiendo ratios de compresión muy altos. Ahora bien, como la foto tenga aristas muy marcadas (por ejemplo, si hay texto o dibujos), pueden aparecer imperfecciones en la imagen que te obliguen a usar una compresión menor.
- GIF. ¿De veras necesites que lo presente? ¡Es el rey de Internet con la animaciones! Aunque la verdad es que el formato en sí ya no se usa, ya que los GIFs que metemos en nuestras webs y redes sociales son pequeños clips de vídeo…
#5 Borra las imágenes que no uses
No está de más hacer limpieza de vez en cuando de tu web. En esta entrada Toni te explica cómo.
#6 Activa el Lazy Loading
Si el problema de las imágenes es que ralentizan la carga de la web, ¿no hay ningún método para que la web cargue rápido y ya, si eso, luego carguen las imágenes? Pues, sí, lo hay, y se llama Lazy Loading, o carga perezosa.
La idea del Lazy Loading es que las imágenes de nuestra web no se pidan al servidor y se bajen al dispositivo del visitante hasta que no sea estrictamente necesario hacerlo. Es decir, si tenemos una imagen en el pie de página de la web, ¿para qué voy a descargarla antes de que el visitante llegue al mismo? Mejor esperamos a que haga scroll hasta el final y, entonces sí, cargamos la imagen, ¿no?
Existen multitud de plugins de Lazy Loading para WordPress. De hecho, algunos proveedores como SiteGround lo incluyen como una optimización sin que tengas que instalar plugins adicionales.
Espero que la entrada de hoy te ayude a mejorar un poco la velocidad de carga de tu web y, sobretodo, que con ello consigas más visitantes y reduzcas la posibilidad de que se vayan frustrados. Hay pocas cosas que sean así de fáciles de arreglar y que reporten resultados tan buenos. ¡Ánimos y suerte!
Imagen destacada de Icons8 team en Unsplash.
Deja una respuesta