Cómo comprimir tus imágenes y reducir el tiempo de carga de tu web

Cómo comprimir tus imágenes y reducir el tiempo de carga de tu web

El tiempo que una página web tarda en cargar cuenta como factor de ranking en Google. Esto lo sabemos desde hace tiempo, primero sólo aplicaba a los resultados desde ordenadores y desde 2018 pasó a aplicarse también a las búsquedas hechas desde móviles.

Google ha informado de que esta medida está surtiendo efecto y que desde 2018 se están experimentando mejoras en la velocidad de carga de las páginas a nivel global. Esto da una idea de la influencia que Google tiene sobre Internet y su ecosistema web.

Los tiempos de carga web se han reducido a nivel mundial

Algunos datos que da Google sobre las mejores en velocidad de carga en el mundo:

  • 95% de los países han reducido su tiempo de carga medio.
  • Cuando una web es lenta, los usuarios tienen más probabilidad de abandonar la visita. El porcentaje de abandono ha bajado en un 20% a nivel global.
  • El tercio de páginas más lentas de Internet ha experimentado mejores de velocidad de un 15% en 2018 mientras que en 2017 se había quedado igual.

Como vemos, el ecosistema web se está haciendo más rápido. Y esto significa que, si gestionas una página web, tienes que mejorar tu tiempo de carga.

Google Page Speed Insights, la herramienta clave para optimizar velocidad de carga

Afortunadamente, Google ofrece la herramienta más completa de diagnóstico de velocidad de carga de manera gratuita: Google Page Speed Insights.

El problema con las pautas que te da Google Speed Insights es que muchas de ellas son muy técnicas y, si no tienes una formación en tecnologías web, te van a ser difíciles de entender y mucho más de poner en práctica.

Si tienes un sitio WordPress, existen plugins gratuitos que hacen el trabajo por ti con unos pocos clics, como W3 Total Cache, Autoptimize o WP Smush It.

Pero hay una medida que podemos tomar sin tener que instalarnos ningún plugin y que nos ayudará a que nuestro sitio cargue mucho más rápido: reducir el tamaño de nuestras imágenes.

Hubo una época -no tanto tiempo atrás- en la que yo mismo descargaba alegremente imágenes de los directorios de imágenes gratuitas como Pixabay o Unsplash escogiendo el tamaño más grande ¡la imagen original! Y luego la subía mi sitio web tal cual pensando que ya se encargaría WordPress de optimizarla. Pues bien, gran error. Si publicas un artículo con una imagen que pesa 2 megas ¡sorpresa! Todos los usuarios que visiten el artículo tendrán que esperar pacientemente a que la imagen se descargue. Dependiendo de la velocidad de la conexión, estos 2 megas se pueden traducir en varios segundos de espera y, en muchos casos, pueden provocar que el visitante pierda la paciencia y abandone la visita.

Cómo comprimir fácilmente nuestras imágenes para web

Para evitar esto, tenemos que asegurarnos de que:

  1. La imagen tiene las dimensiones correctas.
    Una imagen de perfil de un autor que va a aparecer al pie de página no necesita tener 3000 píxeles de ancho, por lo tanto, debemos ajustar el tamaño de la imagen al espacio que va a ocupar dentro de la página.
  2. Y de que la imagen está comprimida para reducir su “peso”.
    Aunque el tamaño en píxeles de la imagen esté optimizado, nos queda reducir el, por llamarlo de alguna manear, “peso” de la imagen, es decir la cantidad de kylobites de memoria que ocupa el archivo. Para reducir el “peso” debemos comprimir la imagen todo lo que podamos sin que la calidad de la imagen se vea demasiado afectada.

Para terminar te aconsejo dos sitios que uso a diario para reducir el tamaño de mis imágenes tanto en píxeles como kylobites y prepararlas así para su publicación en la web. Se trata de Squoosh, quizá el que más uso porque te permite ver en tiempo real cómo quedará la imagen final y Tiny PNG, que tiene la ventaja de que puedes convertir varias imágenes a la vez.

La reducción del tamaño de las imágenes en la web no cuesta demasiado en términos prácticos y tiene un gran impacto positivo en la velocidad de carga y por lo tanto también en el SEO. Así que ya sabes ¡a comprimir imágenes!

Si te ha gustado este artículo, no te olvides de suscribirte al Newsletter de Munxe Marketing Digital. Es gratis y viene cargado de información y novedades sobre márketing digital. Sigue este enlace para suscribirte.

Echamos un vistazo a Gutenberg, el nuevo editor de texto de WordPress

Echamos un vistazo a Gutenberg, el nuevo editor de texto de WordPress

Esta semana, el interfaz de WordPress con el que administramos esta web nos avisaba de la llegada de una novedad importante en la plataforma: la llegada de un nuevo editor de texto. Su nombre es Gutenberg y, por ahora, está en beta. Como nos suena muy cool eso de ser early adopters, decidimos instalarlo ya y ver qué novedades nos trae. Por cierto, este post lo hemos editado enteramente en Gutenberg.

Gutenberg está ya disponible como plugin y será incorporado plenamente a WordPress a partir de la versión 5.0 (ahora van por la 4.9.8 así que no tardará).

¿Por qué surge Gutenberg?

El viejo editor de texto de WordPress, llamado TinyMCE, no sufrió muchos cambios a lo largo de los años y, salvo retoques, se ha mantenido casi intacto. Mientras tanto, otras plataformas de blogging como Medium se han puesto las pilas y han empezado a ofrecer experiencias de edición de texto más avanzadas. Esto ha hecho que los desarrolladores de WordPress y el ejército de voluntarios que los apoya hayan reaccionado y hayan creado el nuevo editor Gutenberg en tan solo seis meses ¿el objetivo? Conseguir que la creación de contenidos ricos sea más sencilla e intuitiva.

¿Qué ventajas tiene Gutenberg respecto al editor clásico de WordPress?

Gutenberg se basa en el concepto de bloques de contenido. Cada elemento del post es un bloque con sus propios ajustes. Por ejemplo, si añadimos un texto, podemos escoger si queremos que sea un Encabezado, un Párrafo o una Cita. También podremos escoger si queremos centrarlo o alinearlo a derecha o izquierda o si queremos crear dos columnas de texto. Aunque hacer estas cosas era posible con el viejo editor, resultaba mucho más farragoso y era menos intuitivo.

Este es un ejemplo de cita creada con el nuevo editor Gutenberg.

El editor aspira a crear una nueva experiencia de creación de páginas y posts con contenidos ricos sin esfuerzo a través de los bloques que harán muy fácil todo lo que hoy requiere de shortcodes o HTML adaptado…

Matt Mullenweg, 2017

Pero donde realmente brilla Gutenberg es en el rich media, es decir, el contenido multimedia como imágenes y vídeo. Una de las novedades que más me gusta es la de poder crear una imagen de fondo sobre la que poder escribir texto, como mostramos aquí abajo:

Este texto lo hemos añadido a la imgen desde Gutenberg

Otra, la de crear galerías de fotos dentro del propio post sin tener que recurrir a plugins o a la funcionalidad que tenga el tema que usemos.

El embebido de vídeos también tiene su propio bloque con sus propias opciones en Gutenberg.

Gutenberg aumenta la flexibilidad y las posibilidades creativas de WordPress como plataforma de publicación web. Todavía le falta un pulido, como por ejemplo las imágenes a todo ancho que no hemos sido capaces de averiguar cómo funcionan.

Gutenberg pasará a ser el editor de texto por defecto cuando se lance la versión 5­.0 de WordPress pero, si no os apetece cambiar, el viejo TinyMCE seguirá disponible en forma de plugin.

Estamos ilusionados con las posibilidades creativas que traerá Gutenberg para los que nos dedicamos a esto de publicar en medios digitales.

Por cierto ¿Qué es WordPress?

WordPress es el Content Management System (CMS) más popular de la tierra con una cuota de mercado del 30% y su éxito se apoya en la evolución constante. El software empezó siendo una sencilla herramienta de blogging y, actualización tras actualización, se ha convertido en una robusta plataforma que permite la creación de casi cualquier tipo de página.

Una web siempre es un trabajo en curso

Una web siempre es un trabajo en curso

Lanzar un nuevo sitio web es siempre un motivo de satisfacción, pero el trabajo no termina ahí. Los mejores sitios web tienen que reevaluarse continuamente, retocarse y mejorarse. Parte de nuestro trabajo como marketers es ayudar a nuestros clientes a diseñar estrategias web que alcancen sus objetivos estratégicos. Y, a medida que estos objetivos cambian, es importante que tu sitio web cambie con ellos para no quedarse atrás.

Esto puede sonar como un trabajo agotador, pero ¡no te preocupes! Aquí compartimos unos cuantos consejos que puedes usar para mantener un sitio web permanentemente actualizado y que alcance tus objetivos de marketing.

¿Tu sitio web refleja tu marca?

Un sitio web debe reflejar a la compañía a la que representa, tanto en los contenidos como en el diseño. Una página web que lleva más de un año sin ser revisada y actualizada difícilmente va a reflejar la imagen de una organización dinámica y en constante evolución.

Una manera de alcanzar la autenticidad es el uso de imágenes propias. Las imágenes de stock, omnipresentes en Internet, no van a tener ese toque genuino que da la fotografía que tú has creado específicamente para tu sitio web. Es más, las imágenes de stock de mala calidad pueden incluso ser una señal para potenciales clientes de que tu sitio no es de fiar ¿por qué confiar mi dinero a una compañía que no cuida su imagen?

Un diseño y una imagen de profesional y consistente te dará autoridad y autenticidad. Unas imágenes irrelevantes o un diseño pobre dañarán tu reputación y pueden ahuyentar potenciales clientes. Si tu sitio web no expresa atención al detalle, tu imagen sufrirá.

¿Tu sitio web refuerza tus objetivos de negocio?

Tu sitio web debe ser claro, fácil de navegar y tiene que presentar tus productos y servicios de manera que se entiendan fácilmente. Como cualquier otra herramienta de marketing, tu sitio web debe tener un objetivo claro. Ese objetivo puede ser crear reconocimiento de marca o generar más ventas y leads. Todos estos objetivos son medibles y te servirán para evaluar tus resultados.

A medida que tus objetivos de marketing cambien, tu sitio web deberá también cambiar. Es fundamental reevaluar periódicamente el sitio web para realinearlo con la estrategia y asegurarnos de que refuerza nuestros objetivos de negocio.

Fundamenta tu web sobre datos

Herramientas como Google Analytics te pueden dar datos muy valiosos para evaluar el éxito de tu sitio web y para que identifiques áreas de mejora. El porcentaje de rebote, el tiempo de visita, las páginas visitadas por sesión o el flujo del visitante son datos que te permitirán tomar las decisiones de optimización adecuadas.

La experimentación con Tests A/B nos dará claves sobre la interacción de nuestros usuarios con nuestro sitio web y nos permitirá saber, con datos, qué es lo que funciona y lo que no. Por ejemplo, podremos saber qué llamadas a la acción son las que mejor respuesta obtienen o los mejores lugares para colocar nuestros botones de contacto.

¿Cómo puedo reforzar mi estrategia web?

  1. Haz que tu sitio sea más fácil de encontrar
    Añade nuevos contenidos al menos una vez al mes. Esto le dará un gran empujón a tu SEO y hará que los visitantes tengan motivos para volver con frecuencia.No uses sólo tu blog para publicar nuevos contenidos en tu sitio web. Existen muchos otros contenidos que puedes publicar periódicamente además de posts. Casos de éxito de clientes, nuevas incorporaciones, secciones de preguntas frecuentes, podcasts y vídeos o testimonios de clientes son algunas de las maneras de añadir contenidos frescos a tu sitio regularmente.

    Los casos de éxito son una manera excelente de establecer tu credibilidad y mostrar tus productos en acción. Ofrecen una mirada transparente a tus procesos y resultados y son un recurso muy valioso para los clientes potenciales que estén investigando tus productos.

  2. Haz que tu sitio sea más relevante
    Tus contenidos deben:
    – Estar actualizados.
    – Deben ser relevantes para tu público.
    – Deben reforzar tus objetivos de negocio
    Si tu sitio web no cumple con estas reglas, es hora de reevaluar. Actualiza tus contenidos y deshazte de todo aquello que ya no sea relevante.
  3. Haz que tu sitio web convierta
    Google recompensa a aquellos sitios que obtienen más conversiones como, por ejemplo, suscripciones a boletines o compras. Contenidos relevantes y actualizados, una buena navegación y llamadas a la acción efectivas te ayudarán a obtener más conversiones.
  4. Actualiza tu sitio web para que sea más rápido
    Si tu sitio web es lento, estarás perdiendo visitantes (y oportunidades de negocio). El rendimiento de tu sitio web debe ser evaluado y optimizado con regularidad. Un ejemplo de mejora sencilla que puede traer grandes beneficios es el de optimizar el tamaño de las imágenes.

Esperamos que estos consejos te ayuden a fortalecer tu estrategia web y a darle el amor y atención que necesita. No hay atajos, hay que dedicarle tiempo y esfuerzo. Pero valdrá la pena porque los resultados no tardarán en llegar.

Happy marketing!

Pin It on Pinterest