Las últimas notícias sobre SEO y Marketing Digital en nuestro Blog de Marketing Digital 

8 tareas para optimizar la velocidad de carga de una web

Por Edu Garolera

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?

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!

¡Comprueba la optimización SEO de tu web!

Deja un comentario

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

¡Suscríbete al blog!

Las últimas noticias sobre SEO y Marketing Digital
map-markerphone