Las últimas noticias sobre SEO y Marketing Digital en nuestro Blog de Marketing Digital

Las últimas noticias sobre SEO y Marketing Digital en nuestro Blog de Marketing Digital

8 tareas para optimizar la velocidad de carga de una web

Índice
Picture of Eduardo Garolera

Eduardo Garolera

8 TAREAS PARA OPTIMIZAR LA VELOCIDAD DE CARGA DE UNA WEB

La importancia de la velocidad de carga de una web debería ser algo básico en las estrategias SEO de cualquier empresa, aunque como pasa muchas veces en SEO hay tanto que hacer que la gente no sabe por donde empezar.

En SEO necesitamos siempre un backlog en el que vayamos añadiendo las tareas a realizar, y es por ello que hoy os ayudamos a rellenarlo con estas 8 tareas para optimizar la velocidad de carga:

1.- Eliminación de descargas innecesarias

Los recursos más rápidos y más optimizados son aquellos que no se envían. ¿Podemos calcular el valor de cada script o petición? ¿Podemos identificar aquellos que no se usan de forma continuada y valorar cuando tenerlos en el código y cuando no? Hay que hacer un inventario de los recursos propios (peticiones) y los scripts de terceros para saber quién es el owner de cada uno. Haciendo este ejercicio podremos identificar scripts que nadie sabe para que se usan y otros que se pueden eliminar ya que no se usan. ¿Siguen los recursos las prácticas recomendadas de rendimiento (compresión, almacenamiento en caché, etc…)? Debemos centrarnos en el análisis individual de cada recurso si queremos tener controlados los factores que afectan la velocidad de carga. Al final es cierto el dicho del principio, si no se envía siempre será más rápida la carga!

2.- Optimizar el encoding y el tamaño de la transferencia de activos

De las recomendaciones más conocidas de PageSpeed: Comprimir, minificar y gzipear! Y recordad hacerlo por orden 🙂

Aplicar optimizaciones específicas por contenido: minificadores CSS, JS y HTML.
Aplicar GZIP para comprimir el resultado minificado.

optimizar encoding y tamaño transferencia activos
Optimización del encoding

3.- Optimización de imágenes

Según HTTP Archive, el 60% de los datos transferidos para obtener una página web son imágenes compuestas de archivos JPEG, PNG y GIF. 

optimización de imágenes
Optimización de imágenes

Las imágenes siguen siendo la causa número uno de los archivos de tamaño excesivo en la Web.

Quick Wins

Eliminar recursos de imagen innecesarios (EXIF)

Aprovechar los efectos CSS3 cuando sea posible, por ejemplo gradientes

Usar fuentes web en lugar de codificar texto en las imágenes

4.- Automatizar la optimización de imágenes

Las best practices a nivel de optimización de imágenes van cambiando constantemente, por ello, siempre que podamos debemos automatizar la optimización de las mismas.

Existen herramientas para automatizar la optimización durante el proceso de compilación como Imagemin, libvips o multitud de alternativas.

Los servicios de CDN ofrecen en su mayoría una optimización de imágenes automatizada.

A fin de cuentas en muchos casos es más barato pagar por esos servicios que rehacer constantemente la optimización cada vez que cambian las best practices.

¿Debes optimizar tus imágenes? Utiliza un servicio como Lighthouse o Webpagetest para saber si tienes margen de mejora en su optimización.

Webpagetest

5.- Define presupuestos de rendimiento web para imágenes

Un presupuesto de rendimiento es un «tope» para el rendimiento de páginas web que una web no debe superar. Audita tu web, habla con tus desarrolladores y define un máximo que sea realizable y aporte una clara mejora nivel de optimización y velocidad.
Un ejemplo sería «las imágenes no superarán los 200 KB en ninguna página“.

Puedes utilizar herramientas como Speedcurve o Calibreapp para que monitorizen si se cumple este presupuesto en cada una de tus páginas. Y es posible que tus desarrolladores conozcan alguna alternativa a estas herramientas, así que ya sabes, a implementar!

6.- Optimización del Javascript de arranque

De la indexación de Javascript y la optimización de webs con Javascript ya hemos ido hablando y haciendo presentaciones, pero debido al uso intensivo que cada vez más se hace de esta tecnología y la complejidad que añade a los procesos de carga, seguimos encontrando oportunidades de optimización.

El tiempo medio para que una página sea interactiva en móvil según Httparchive es de 9,3 segundos, es decir que hay margen de mejora no crees?

tiempo medio interactiva en móvil
Time to interactive en mobile según HTTPArchive

Si eliminas el código JavaScript que no es esencial de tus páginas, puedes reducir los tiempos de transmisión de datos, las operaciones de análisis y compilación que hacen uso intensivo de la CPU, y una potencial sobrecarga de la memoria. Esto también ayuda a que tus páginas sean interactivas más rápido. En la velocidad de carga pesan mucho dos elementos que se ven influenciados por la cantidad de Javascript que utilicemos: la CPU y la Red mediante la cual nos conectamos.

Para sacar nota puedes animar a los desarrolladores a utilizar patrones PRPL de programación, unos patrones experimentales desarrollados por Google con énfasis en el rendimiento del lanzamiento y la entrega de las webs.

7.- Carga de JS de terceros

Sin darnos cuenta hemos llenado nuestras webs de Javascripts de terceros del estilo de:

Botones de compartir
Videos embebidos
Iframes de publicidad
Scripts de analítica
Scripts de A/B

botones compartir
Botones para compartir, imprimir, hacer likes…en fin!

Muchos de ellos no podremos eliminarlos así que hay que ver como tener una convivencia optimizada 🙂 Pero como ya comentábamos en el primer punto hay que hacer un análisis individual de cada uno de los scripts o peticiones que se hacen al cargar nuestra web. Son varias las veces en las que hemos encontrado que por ejemplo sólo se hacían test A/B en un sprint al mes pero el código para hacerlos siempre estaba en la web. Son este tipo de prácticas las que debemos evitar!

Igualmente estos scripts de terceros generan grandes cargas de Red, por lo que perjudican la experiencia cuando estamos en mobile e incrementan el tiempo del Javascript de arranque.

¿Cómo podemos optimizar la carga de scripts de terceros?

  • ¿Es posible eliminar el script? Básico pro seguro que lo podemos aplicar en más de un caso.
  • ¿Podemos hostear el script para mejorar su performance? No es sencillo pero puede funcionar.
  • Usar atributos async o defer para evitar que el script bloquee la carga de la página.
  • Utilizar <link rel=preconnect> o <link rel=dns-prefetch> cuando sea posible para disminuir la latencia.

8.- Client Hints: Conocer que contenido podemos servir

Como última tarea proponemos esta que creemos puede resultar de mucha utilidad.

Cuantas veces hemos oído eso de que hay que cambiar las imágenes por formatos más modernos para que pesen menos y luego resulta que ningún navegador los soporta? Os suena verdad 🙂

Para eso tenemos los client hints, encabezados que nos dan datos sobre el dispositivo y la red que utilizan nuestros usuarios. Son un método de negociación del contenido, lo que provoca que adaptemos el mismo en función de la respuesta del navegador.

Accept-header nos permite saber que tipos de contenido entiende y acepta el navegador, para que sólo le ofrezcamos esos. Y por ejemplo poder utilizar el famoso formato WebP de imágenes en este caso 🙂

Save-Data header permite aplicar optimizaciones para reducir los datos necesarios para el renderizado.

Y esto no es todo amigos, si quieres, puedes saber más sobre somo WPO y como optimizar la velocidad de carga de tu web o bien puedes suscribirte a nuestro blog.

¿Crees que se nos escapa algún tip imprescindible? ¿Quieres que lo comentemos?

Comparte este artículo

Descarga la guía básica de SEO gratis!

Comprueba la optimización SEO de tu página!

En sólo 10 minutos conocerás el estado de tu página!

Desarrollo Web

Nuestro enfoque multidisciplinar integra los servicios de SEO, CRO, configuración de CRM y analítica en cada proyecto de desarrollo web que emprendemos.

Contacta con nosotros

Con más de 15 años de experiencia en los negocios digitales más importantes de España. Conocemos el camino hacia el éxito en la captación digital.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Descarga la guía básica de SEO gratis!

Comprueba la optimización SEO de tu página!

En sólo 10 minutos conocerás el estado de tu página!

Preguntas Frecuentes sobre una Agencia de Marketing Digital

Una agencia de marketing digital es una empresa especializada en proporcionar servicios de marketing en línea para ayudar a las empresas a promocionar sus productos o servicios en el entorno digital. Puede ayudar a tu negocio de diversas maneras, como mejorando la visibilidad en línea, aumentando el tráfico a tu sitio web, generando leads de calidad, mejorando la conversión y fortaleciendo la presencia en las redes sociales. Las agencias de marketing digital utilizan estrategias como el SEO, el marketing de contenidos, las redes sociales, el PPC y el análisis de datos para lograr estos objetivos.

Una agencia de marketing digital ofrece una amplia gama de servicios que incluyen SEO (Optimización de Motores de Búsqueda), PPC (Publicidad por Pago por Clic), marketing de contenidos, gestión de redes sociales, email marketing, analítica web, diseño web, desarrollo web, optimización de la tasa de conversión (CRO), publicidad en redes sociales y más. Estos servicios se adaptan a las necesidades específicas de tu negocio para lograr resultados en línea efectivos.

Contratar una agencia de marketing digital ofrece varias ventajas. Primero, las agencias cuentan con experiencia y conocimientos especializados en diversas áreas del marketing digital. Además, a menudo es más rentable que mantener un equipo interno a tiempo completo. Las agencias también pueden mantenerse actualizadas con las últimas tendencias y tecnologías, lo que es esencial en un campo en constante cambio como el marketing digital.

Una agencia de marketing digital puede aumentar la visibilidad de tu sitio web en los motores de búsqueda mediante la optimización de motores de búsqueda (SEO). Esto implica la optimización técnica, la creación de contenido de alta calidad y la construcción de enlaces de retroceso. Al mejorar la estructura y el contenido de tu sitio web, aumentarás tus posibilidades de aparecer en las primeras páginas de resultados de búsqueda para palabras clave relevantes.

El SEO es fundamental en una estrategia de marketing digital porque ayuda a tu sitio web a posicionarse mejor en los motores de búsqueda como Google. Esto significa que más personas pueden encontrar tu sitio web cuando buscan productos o servicios relacionados con tu negocio. El SEO también aumenta la credibilidad y la confianza de los usuarios, lo que puede llevar a una mayor tasa de conversión y un mayor tráfico orgánico.

¡Suscríbete al blog!

Las últimas noticias sobre SEO y Marketing Digital