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.
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.
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.
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?
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
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?
