- La velocidad importa para el usuario
- ¿Qué le importa al usuario?
- La velocidad importa: Empiece por las imágenes
- La velocidad importa parte dos: Otras cosas a tener en cuenta
- Disminuya las redirecciones lo más posible
- Habilitar la compresión, Brotli o, en su defecto, Gzip
- Mejorar el tiempo de respuesta del servidor
- Especificar caché de navegador
- Minificar recursos
- Reducir el tamaño del contenido de la mitad superior de la página
- Quitar el JavaScript que bloquea a la visualización del contenido
- Si la velocidad importa, tenemos que medirla
- En Resumen
La velocidad importa para el usuario
La velocidad importa, ya que la competencia está a un clic de distancia, incluso puede estar ya abierta en la pestaña de al lado. Cada día la velocidad de la conexión aumenta, y también la de las computadoras y de los teléfonos, Y cada día la paciencia del usuario disminuye.
Según pingdom.com, empresa referente en el monitoreo de sitios web, el tiempo de carga de un segundo hace sentir a los usuarios tranquilos y en control del sitio. Pero si tarda diez segundos es casi imposible que vuelvan.
Los porcentajes de abandono (bounce) serían los siguientes: entre diez y once segundos, un 62 %, pero lo que debe llamar la atención es que de un 7 % de un sitio que carga en un segundo salta a 24 % si tarda entre tres y cuatro segundos. Para sitios que cargan en entre cuatro y cinco segundos, el porcentaje es un escalofriante 38 %. Entre cinco y seis un 46 %, a partir de ahí ya perdimos más de la mitad de los visitantes, más de la mitad de los clientes potenciales.
Aunque estos datos puedan parecer exagerados, y es posible que en nuestro país los números no sean tan exigentes, todas las investigaciones coinciden en dos conclusiones. En primer lugar, el número de abandonos del sitio aumenta en gran medida si la página tarda en cargar. En segundo lugar, pero no por ello menos importante, la percepción de calidad del sitio disminuye drásticamente.
Además, un sitio rápido ayuda a que el sitio se posicione mejor en Google. La velocidad importa también para la SEO.
Es necesario, entonces, dejar de ver su sitio con ojos de propietario y pensar en el visitante. ¿Qué es lo que él busca? ¿Qué le interesa realmente?
¿Qué le importa al usuario?
En general, salvo en casos específicos, al usuario no le interesa realmente su sitio web en sí mismo. Está buscando algo, una solución a un problema, darse un gusto determinado… o ni siquiera eso, posiblemente solo este «de paseo».
Pero imaginemos que la situación es la ideal: el usuario está buscando una solución a un problema y su sitio ofrece una solución a ese problema. Podríamos decir que es la situación de mayor interés.
Aun así, puede perderlo fácilmente, si se pierde, si se vuelve complicado leer extensos textos y otras razones, entre ellas que su página sea lenta. ¿Por qué decimos esto?
Porque el usuario no está tratando de ser eficiente en su sitio web, está tratando de ser eficiente en su experiencia de navegación, por eso decíamos: la velocidad importa porque la competencia está a un clic de distancia.
La velocidad importa: Empiece por las imágenes
La velocidad importa y la forma más fácil y probablemente con mayor impacto para mejorar la velocidad de su sitio web sea optimizar sus imágenes, lo ideal es hacerlo desde el principio, antes que obsesionarse luego con las métricas de las distintas herramientas para medir la velocidad de su sitio que más adelante listaremos.
En el tema de imágenes hay tres grandes subtemas: tamaño, formato y compresión. Nosotros tenemos una entrada sobre como optimizar las imágenes para la web sin necesidad de instalar ningún programa, donde sugerimos, incluso, la utilización del formato WebP.
Actualización: tenemos un nuevo artículo que brinda una solución que posiblemente le resulte más cómoda. Ahí le explicamos cómo usar GIMP (y opcionalmente TiniPNG) para realizar exactamente la misma tarea: Como Optimizar Las Imágenes Para La Web En 3 Pasos Con La Ayuda De Un Panda.
Los formatos clásicos de imagen para la web
Justamente por el consenso que existe respecto a que la velocidad importa, se desarrollaron distintos formatos de compresión de imágenes. El más utilizado en la actualidad es el conocido JPG o JPEG, que es un formato de compresión con pérdida de calidad y está pensado básicamente para fotografías. El otro es PNG, este es un formato sin pérdida de calidad y es recomendado para gráficos e ilustraciones. Además, PNG soporta transparencias.
Ambos son formatos ampliamente soportados por los navegadores y hay infinidad de software para manipularlos, pero ya hay alternativas que los superan.
WebP, el formato actual

No sin dificultades WebP se está imponiendo como la alternativa actual tanto a JPG como a PNG, ventajas no le faltan.
Es un formato que está bajo licencia BSD (digámoslo así, una licencia muy permisiva de código abierto) desarrollado por Google, presentado en 2011 (funcional por completo en 2018) y tiene claras ventajas sobre ambos formatos clásicos. Para empezar soporta transparencia como PNG, tiene un modo sin pérdida de calidad y otro modo con pérdida de calidad, podemos ver algunos ejemplos en su sitio oficial. ¡Además, soporta animaciones como GIF, solo esperamos que no vuelva a abusarse de ellas como en los noventa!
El resultado es un menor tamaño de archivo respecto a JPG, y por supuesto que PNG, en general, podemos hablar de alrededor de un 30 % menor con una mejora en calidad respecto a JPG.
Si decimos que es el formato actual es porque la gran mayoría de los navegadores lo soportan. A principios de noviembre de 2022, el 97.23 % de los usuarios acceden a internet con un navegador compatible con WebP. Aquí puede ver el dato actualizado en cualquier momento, solo asegúrese de hacer clic en «usage relative». ¿Qué pasa con el 2,77 % restante? Si usted tiene una CDN, puede hacer como nosotros, a los que acceden con un navegador sin soporte para WebP le brindamos nuestra vieja amiga: JPG. Otra posibilidad es instalar una extensión, como veremos más adelante.
Pero hay algunas dificultades no menores con WebP, es probable que le haya pasado de descargar una imagen y esta está en formato WebP, es probable que no se muestre en la miniatura y que solo la pueda abrir en el navegador. Ello es debido a que tanto sistemas operativos como programas de edición de imágenes se han quedado atrás en el soporte de WebP.
Pero a no desesperar, aquí les dejamos dos programas totalmente gratuitos que soportan tanto WebP como AVIF (formato que veremos a continuación).
El primero es el recomendado, gratuito (software libre), potente, multiplataforma y algo caprichoso: GIMP. El segundo es mucho más simple, más fácil de usar y más limitado (solo para Windows) Paint.Net.
Con cualquiera de los dos usted podrá tanto abrir como guardar (exportar en el caso de GIMP) imágenes tanto WebP como AVIF.
Puede hacer conversiones en línea con squoosh. No podemos dejar de mencionar que PhotoShop también soporta WebP y (mediante un plug-in) AVIF.
AVIF, el formato del futuro cercano
Así como WebP supera a JPG, pero es menos soportado, AVIF supera a WebP y es aún menos soportado. Ese sería el resumen.
Pero es necesario profundizar un poco más. Si WebP está impulsado por Google, AVIF está impulsado por la industria web en general, en concreto por la Alliance for Open Media
Alliance for Open Media (AOMedia) es un consorcio industrial sin fines de lucro con sede en Wakefield, Massachusetts, que desarrolla tecnología abierta y libre de regalías para la entrega de multimedia. Utiliza las ideas y los principios del desarrollo de estándares web abiertos para crear estándares de video que pueden servir como alternativas libres de regalías a los estándares hasta ahora dominantes del Moving Picture Experts Group (MPEG) y su modelo comercial relacionado con el usufructo de la propiedad intelectual a través de regalías de patentes, asociadas con dificultades y tarifas de patentes y licencias
Wikipedia
Por si quedan dudas aquí les dejamos la lista de miembros gobernantes:
Si hay dudas de si Photoshop soporta AVIF, digamos simplemente que Adobe también forma parte del consorcio.
Como consecuencia de este gran impulso, este formato desconocido por la mayoría ya cuanta con una base de usuarios de navegadores de un 73,4 %, también cifras de caniuse. Cifras todavía insuficientes, pero que vienen avanzando muy rápido, quizás el reinado de WebP termine antes de que nos demos cuenta de que empezó.
También soporta una profundidad de color mayor que WebP que lo hace apto para imágenes HDR (alto rango dinámico) entre otras ventajas, pero donde brilla especialmente, y donde supera claramente a WebP es en imágenes altamente comprimidas, donde una gran calidad no es necesaria, como muestra este estudio de ctrl.blog, lo cual es especialmente relevante para la web.
Si quiere profundizar tanto sobre WebP como sobre AVIF, SmashingMagazine tiene un artículo excelente sobre estos dos formatos, escrito por Addy Osmani.
¿Se pueden usar las imágenes AVIF en WordPress? Sí, por supuesto. ¿Qué pasa si el navegador no soporta AVIF? Se le envía una imagen WebP y si tampoco soporta WebP se le manda un JPG. Nosotros pronto lo implementaremos (de otra manera) pero aquí hay un video, breve y claro, de cómo hacerlo hoy mismo en WordPress (en inglés, pero se entiende: es simplemente instalar un complemento).
La velocidad importa y seguirá importando: ¿El retorno de JPG?
Este es un formato que está en gestación, por eso si vamos, de nuevo, a caniuse, veremos que tiene un 0 % de soporte de navegadores.
La historia de JPG XL empezó en agosto de 2017, cuando se publicó una convocatoria de propuestas para JPEG XL.
Las propuestas se enviaron en septiembre de 2018, lo que llevó a un borrador del comité en julio de 2019.4 Se basó principalmente en una combinación de una propuesta llamada PIK,5 presentada por Google, y una propuesta llamada FUIF6, basado en FLIF, presentado por Cloudinary.
Wikipedia
De nuevo Google, y recordemos esta otra empresa Cloudinary, que pronto veremos una herramienta de ellos
Entre las innumerables ventajas que promete JPG XL (no todas pensadas para la web), se encuentra una muy interesante que perdimos con WebP y no recuperamos con AVIF: la decodificación progresiva.
Esta ahora será «avanzada», la decodificación progresiva las vemos en esas imágenes que en vez de cargar «de arriba hacia abajo» se muestran enseguida enteras y a medida que van descargando van mejorando su calidad, esto crea una percepción de velocidad mucho más alta, le dijimos que la velocidad importa, la percepción de velocidad importa tanto o más.
En este video se simula una conexión muy lenta para mostrar la ventaja que supone la decodificación progresiva.
Por cierto, GIMP ya soporta JPG XL mediante un plug-in. O sea en estado de desarrollo actual, no está completo.
En caso de que quiera conocer del tema en profundidad, este video del canal de Cloudinary explica las limitaciones de los formatos actuales y lo que se pretende con JPG XL, a partir del minuto 17 explica algunas de las características más interesantes, por ejemplo que se pretende que sea un formato «responsivo».
La velocidad importa parte dos: Otras cosas a tener en cuenta
Nos hemos centrado en las imágenes por dos razones principales, mal optimizadas pueden ser el factor que más ralentiza la carga del sitio web y porque no se requieren conocimientos técnicos para optimizarlas, pero claramente no son el único factor a tener en cuenta.
Disminuya las redirecciones lo más posible
¿Cuánto tarda usted en ir a comprar un chocolate? Ahora bien, si en el quiosco le dicen que no le quedan y tiene que ir a buscarlo a otro. Pero en ese otro quiosco tampoco y tiene que ir a buscarlo a otro todavía más lejos va a tardar mucho más, esto es lo que sucede con las redirecciones.
Este error no es demasiado común, pero cuando Page Speed Insights (veremos bien que es esta herramienta más adelante) lo muestra, nos señala que debemos hacer «una reforma de importancia».
El ejemplo más común es que tengamos un sitio anticuado, ya que no es responsivo (pero al menos tiene una versión para teléfonos) y continúa usando la triple w.
Supongamos www.sitioanticuado.com. El usuario ingresa desde el móvil escribiendo «sitioanticuado.com», ahí tenemos la primera redirección, vamos a www.sitioanticuado.com. Ahí llegamos a nuestro servidor, que se da cuenta de que se accedió desde un celular y vuelve a hacer una redirección a m.sitioanticuado.com. De esta forma ya tenemos dos redirecciones, que si el servidor no es muy rápido serán por sí mismas un factor importantísimo.
Lamentablemente, no es un tema sobre el cual podamos ofrecer soluciones desde aquí.
Habilitar la compresión, Brotli o, en su defecto, Gzip
La velocidad importa y esta es otra solución que puede ser muy fácil. Lo primero que habría que hacer es averiguar si su empresa de alojamiento soporta el formato de compresión Brotli. Preguntarles a ellos como habilitarlo, en caso de que no sea posible seguramente tengan disponible el formato Gzip, que le expliquen cómo activarlo. Si no tienen Gzip, lo que tiene que hacer es buscarse otro proveedor de hospedaje. Perdón por la crudeza, pero es la realidad.
En los viejos servidores Apache basta con modificar el .htaccess para activar GZIP, mientras que en servidores Nginx, tendremos que modificar los archivos de configuración.
Mejorar el tiempo de respuesta del servidor
Esto es simplemente como suena, es cuanto tiempo tarda el servidor en responder, por supuesto si está usando un alojamiento compartido (shared hosting) estás cifras no serán estelares.
Tenga en cuenta, además, que en un momento puede estar más ocupado y demorar más, al momento siguiente puede estar más desocupado y tardar menos, por eso el diagnóstico de su sitio web debe repetirse varias veces y debe hacerse periódicamente.
Google Page Speed Insights espera un tiempo de respuesta menor a los 200 ms y le tengo malas noticias: la velocidad importa, pero el presupuesto suele ser limitado. Si se me permite, demasiado limitado a veces. ¿Qué servicio espera recibir por 2 dólares mensuales?
Esto es prácticamente imposible si usamos un CMS, como por ejemplo WordPress, y no usamos cache. Implementar un buen caché lleva tiempo, pero no es nada difícil. Si la velocidad importa más que ahorrarse un buen rato haciendo pruebas hay muchos plug-in para hacerlo. Uno simple y efectivo es WPRocket, pero es de pago.
Aquí les dejamos un tutorial sobre este complemento.
Puede lograr los mismos resultados, o incluso quizás, mejores con un complemento gratuito. Eso sí, haciendo una copia de seguridad del sitio, habilitando cada opción de a una y probando todo el sitio tanto en móviles como en el escritorio. Tenga especial cuidado con las relativas a CSS y sobre todo las relativas a JavaScript (JS). Estamos hablando de LiteSpeed Cache.
Aquí un tutorial de LiteSpeed Cache. Este plug-in no solo se encarga de implementar diversos tipos de cachés y minificaciones, también puede, por ejemplo, convertir tus imágenes WebP.
En caso de querer simplificar al máximo la configuración del caché, la recomendación sería para el plug-in Autoptimize. Aquí un tutorial para este plug-in.
Especificar caché de navegador
Todos los complementos antes mencionados permiten habilitar la caché del navegador. La idea es que, simplemente, si no ha pasado demasiado tiempo desde la última visita, el navegador, en vez de volver a cargar la página, la recupera de su propio caché, es decir, la tiene almacenada en su ordenador y no hace falta descargarla de nuevo.
No es algo que pueda «romper» la página, pero hay que tener cuidado, ya que si le ponemos un tiempo de vida demasiado largo las páginas no se van a actualizar. No es lo mismo un carrito de compras, que no puede tenerlo, a un sitio de noticias, que una página donde rara vez se cambia el contenido, pero en general no hay que exagerar con los tiempos de vida.
Minificar recursos
El código HTML, CSS y JavaScript suele, para ser legible y bien documentado, incluir información innecesaria, como saltos de línea y comentario. Estos sirven para modificarlo, corregir errores, pero si son enviados al navegador es tiempo desperdiciado. Por esto a esta técnica se la conoce como «afear» el código. El código original es conservado, pero se envía el código «afeado».
Como ya dijimos, hay que tener especial cuidado con la minificación de CSS y JavaScript, ya que, aunque en teoría no debería pasar nada, en la práctica es común que esto rompa nuestro sitio. La velocidad importa, pero no tanto… siempre haga un backup antes, de todas maneras este cambio es reversible, simplemente desactive la minificación que está dando problemas y listo.
La misma configuración no siempre es acertada para todos los sitios webs, depende del tema usado y los elementos que tengan.
Reducir el tamaño del contenido de la mitad superior de la página
Hay una tendencia a poner como parte superior de la página de inicio una gran imagen de fondo a pantalla completa. ¿La velocidad importa o importa que los visitantes que esperaron a que cargue, con parte de la paciencia consumida, digan: linda foto?
Ni hablar que no mencionamos el tema de los videos de fondo, lo diremos ahora: casi nunca son una buena idea.
Si en el complemento de caché habilita la opción de «lazy loading» primero se cargará lo que pertenezca al área visible. Usted puede poner esa hermosa imagen más abajo que seguramente el servidor tuvo unos segundos extra para descargarla. Recuerde: la velocidad importa, pero la percepción de velocidad importa más.
Quitar el JavaScript que bloquea a la visualización del contenido
Este consejo puede aparecer por distintas razones, algunas implican tomar una simple decisión de diseño, otras veces sería realmente complicado solucionarlo y otras veces no querremos solucionarlo.
Lo que provoca esta advertencia puede ser simplemente un slider, tan bonitos que son y en general tan poco efectivos. Nosotros abrimos con slider tanto el sitio principal como este blog, al menos por ahora… en cualquier momento los sacamos, nosotros también debemos repetirnos como un mantra: la velocidad importa.
Algunos slider como Revolution Slider cargan de manera asíncrona con lo cual se minimiza el costo en tiempo de carga. Hay muchísimos plug-ins gratuitos de slider, le aconsejamos que, si realmente cree que necesita un slider, pruebe hasta que encuentre uno que vaya bien con su diseño y no lo penalice demasiado en la velocidad de carga. Cuando esté cansado de buscar y probar, dígase a usted mismo: «la velocidad importa», tómese un descanso y siga buscando.
En general la solución del segundo caso es hacer que el JavaScript cargue de forma asíncrona o moverlo al footer, pero esto no suele ser sencillo y no siempre es recomendable.
El error aparece cuando el HTML carga código JavaScript desde orígenes externos y el navegador debe esperar para descargar el JavaScript y, por lo tanto, se ralentiza la velocidad de carga del sitio web.
El tercer caso es que de ese JavaScript dependa una funcionalidad a la que no podemos renunciar, por ejemplo el pequeño script de Google Analitics (que nos permite conocer a nuestra audiencia) puede ponerse en el pie, pero lo recomendado (por el mismo Google) es ponerlo en la cabecera.
Si la velocidad importa, tenemos que medirla
Una simple búsqueda en Google puede arrojarle muchas listas con opciones de herramientas para medir la velocidad de su página, pero la verdad es que esas listas están bastante desactualizadas, y tampoco es cuestión de andar midiendo en cuanta herramienta caiga en nuestras manos. Nosotros recomendamos las siguientes, y le diremos para qué sirve cada una y en que fijarse.
Google Page Speed


Como vemos no solo evalúa el rendimiento, sino la accesibilidad, la seguridad y la estructura para la SEO. Tanto para escritorio como para móviles.
Si usted está usando WordPress, lo detecta y refina los consejos que da. Son en general bastante comprensibles (no necesariamente fáciles de implementar).
Las sugerencias que puede dar son las de la sección anterior, de hecho de ahí sacamos los ítems que enumeramos.
Esta herramienta es especialmente importante porque uno de los motivos por los que la velocidad importa es porque para Google es un factor de posicionamiento, y esta es, justamente, la opinión de Google sobre nuestro sitio.
GT Metrix

Quizás la herramienta más amigable, la única posible desventaja es que está en inglés. Divide la calificación en dos grupos Grade y Web Vitals. Al lado de cada calificación hay un pequeño signo de pregunta, basta posar el puntero del mouse ahí para que nos indique de que se trata.
Un poco más abajo hay unas solapas con más información, otras formas de mostrar la información. Muchos datos que pueden ser útiles. Sin embargo, no mide la velocidad en móviles.
GiftOfSpeed

Esta es una página a la que acudir habitualmente, tiene numerosas pruebas, por favor véalo por usted mismo. Desde el ya mencionado en otro artículo respecto a Brotli, hasta herramientas y pruebas de JavaScript, CSS. Además, ofrecen un compresor de JPG y PNG que aún no hemos probado. Cosa que seguramente haremos para comparar con TinyPNG y similares.
Yellow Labs




Esta herramienta, además de ser muy clara, nos da la posibilidad de probar la velocidad en los dispositivos habituales y agrega la prueba para escritorios con monitores extra grandes.
Es, sin dudas, una de las más útiles para encontrar fácilmente que está ralentizando la carga de nuestro sitio web.
Pingdom Tool

Esta herramienta es más sencilla aún y da menos datos, pero, aun así, da datos que no algunas otras herramientas, por ejemplo, al día de hoy en la página principal de nuestro blog un 37 % del peso corresponde a imágenes, es de lo que mejor optimizado está.
WebPageTest

Quizás nuestra tercera favorita, para empezar cada vez que analizamos realiza 3 test para darnos una mejor evaluación y realiza pruebas para móviles. Permite comprobar simultáneamente desde tres locaciones. Y también nos brinda la opción de probar la experiencia de un visitante recurrente, lo normal es que en este caso el tiempo sea menos, como puede verse en la captura de pantalla.
Pero lo más interesante son lo que llaman «experimentos», son sugerencias bien concretas de qué y como modificar, al punto que muchas veces no se requieren conocimientos técnicos… por supuesto antes de realizar cualquiera de estos «experimentos» haga una copia de seguridad.




Acá podemos realizar cuatro test. El primero es uno de velocidad, luego uno de velocidad en distintos lugares (en general no resulta útil).
Luego tenemos un test para ver si nuestra página es servida mediante HTTP/2 (lo cual es de esperar) y, para finalizar, un test para ver si se está usando el algoritmo de compresión Brotli.
Uptrends


No solo nos da opciones de locación, nos permite elegir tanto escritorio como móvil. Dentro de las opciones de escritorio podemos elegir Crome o Edge, el tipo de conexión y distintas resoluciones.
Respecto al móvil nos permite elegir de una bastante extensa lista de dispositivos, velocidad nativa, 2G, 3G y 4G. Muy útil.
Cloudinary (esta es realmente distinta)
Dijimos que hay que prestar especial atención a las imágenes, es la función de esta herramienta.

Esta página merece dos aclaraciones, pero es una herramienta que definitivamente hay que usar: a diferencia de las anteriores no se centra en la velocidad de carga, JavaScript, etc. Analiza nuestras imágenes, que no solo suelen ser el principal problema, sino que como hemos dicho es el problema que más fácil es de solucionar.
Con lo útil que es, hay que tomarse los resultados con una pizca de escepticismo, por ejemplo nos va a sugerir en muchas imágenes que usemos AVIF, cuando en la práctica no se puede todavía, habla de supuestas reducciones que degradarían demasiado las imágenes, están tratando de vendernos un servicio y, lamentablemente exageran un poco.
No tiene nada de malo, al fin y al cabo son una empresa, nosotros también estamos tratando de venderle un servicio, pero en este sentido los números que da son un tanto exagerados.
De todas formas es una herramienta sumamente útil.
En Resumen
La velocidad importa, no es un tema para obsesionarse, ni para renunciar a funcionalidades, pero sí es un asunto a trabajar. Todos queremos que nuestra página impresione, pero en general el usuario está más preocupado por conseguir algo en concreto. Esos segundos de espera se hacen eternos. Siempre recuerde lo que siente usted cuando es usuario de otros sitios web.
Olvídese, en lo posible, de grandes imágenes de fondo en altísima resolución y del deseo de que su sitio tenga cosas moviéndose, apareciendo y desapareciendo. Concéntrese en decir lo que tiene que decir, en decirlo en forma directa en un sitio web limpio y que cargue pronto.
Si está trabajando con un diseñador… desconfíe de quien le diga que sí a todo, parte de nuestro trabajo es decir que no. Asegúrese siempre de dejar la puerta abierta a un «no conviene».
Si usted está desarrollando su propio sitio, contrate un hospedaje de calidad, elija un tema rápido y sencillo y concéntrese en los factores que puede controlar, por eso centramos el artículo tanto en las imágenes.
Nuestro hosting utiliza lo último en hardware y en tecnologías para mejorar su velocidad, y diseñamos sitios rápidos. Pero ya sea que nos contrate o no, hay muchas cosas que puede hacer, y otras tantas que no hacer, para mejorar la velocidad de carga de su sitio, y nosotros seguiremos ampliando en este blog.