Cuando crees que ya lo has visto todo en el ámbito tecnológico, surge algo nuevo que revoluciona la red. Este concepto que ha dado mucho que hablar en los últimos años es el Web Performance Optimization.
Probablemente estés pensando, y no te faltará razón, que el performance web lleva mucho tiempo entre nosotros, pero desde que Google presentó, en el año 2010, su herramienta PageSpeed Insights, se hizo todavía más popular en el desarrollo de todas las grandes webs modernas.
El término Web Performance Optimization (WPO) consiste en la optimización de los tiempos de carga de una página web, es decir, trata de reducir el periodo que transcurre desde que un usuario accede a la página hasta que se le muestra totalmente el contenido y puede interactuar con ella.
Hoy en día, tener una página web que cargue rápido es una de las técnicas SEO (Search Engine Optimization) más importantes. Google considera que la velocidad de carga es un elemento esencial en la mejora de la experiencia de usuario, premiando todos aquellos sitios web con código de calidad y buen rendimiento. Según varios estudios, un tiempo de carga no superior a 3 segundos es óptimo.
Por tanto, mejorando la velocidad de carga de un sitio web, se consigue una gran experiencia de navegación de usuario, que repercute directamente en un incremento del tráfico y en el posicionamiento en los buscadores.
Una página que tarda en cargar 3 segundos o más no resulta de interés para la mayoría de los usuarios y terminará abandonándola. El impacto que provoca la velocidad de la carga desembocará en que no habrá usuarios activos y no llegarán al punto de conversión.
Hay experimentos que demuestran que casi un 50% de los usuarios de una web esperan que se cargue en menos de dos segundos. Basándonos en este estudio, podemos decir que un sitio web que tarda en cargar tres segundos o más, perderá aproximadamente el 40% de los consumidores.
Este choque de realidad al que se enfrentan la mayoría de los sitios web puede suponer pérdidas millonarias para una empresa.
En otro estudio, podemos ver cómo para aquellos usuarios que han permanecido en un sitio web, cuyos tiempos de carga y navegabilidad son lentos, existe hasta un 80% de probabilidades de que no regresen de nuevo a este sitio web.
Como hemos visto, si los usuarios no llegan al punto de conversión, Google determinará que el sitio web no ofrece contenido relevante y repercutirá negativamente en el SEO, sin aparecer entre las primeras búsquedas. Por el contrario, tener una página web optimizada, implica que todas las métricas que Google emplea para indexar un sitio web las obtenga en un menor tiempo facilitando la indexación en un navegador.
Debemos tener en cuenta que la mayoría de los usuarios que consumen el contenido de los sitios web lo hacen a través de dispositivos móviles. En diciembre del año 2017, el motor de búsqueda de Google comenzó a clasificar todos los resultados según las versiones móviles de las páginas, premiando aquellos resultados de búsqueda de sitios web que mejor funcionan en estos dispositivos móviles.
En los últimos años, debido al alto impacto que provocaba la velocidad de carga de un sitio web, muchas empresas y en general desarrolladores, han invertido tiempo y dinero en generar estudios, herramientas y metodologías para analizar el rendimiento de un sitio web. Gracias a estos podemos sacar una conclusión, el porqué de que una web es lenta, puede ser debido a cualquier cosa, desde el tiempo de carga del servidor, imágenes con un tamaño elevado o hasta la cantidad de redireccionamientos que tiene.
Antes de realizar un estudio que pueda mejorar el WPO es importante establecer previamente unos objetivos que marquen el alcance. Estableciendo qué es una velocidad de carga aceptable, y aún más importante si cabe, cuál es en función de nuestro sector.
Google considera que un tiempo de carga superior a tres segundos puede resultar fatal. Dicha empresa ha publicado un estudio generalizado por sector, donde podemos observar que desafortunadamente la realidad actual es muy distinta. Aunque en los últimos años la media se ha reducido unos 7 segundos, seguimos estando muy lejos de la barrera de los 3 segundos. Esto significa que las empresas están perdiendo grandes cantidades de usuarios y por consiguiente, dinero.
Es importante conocer que a medida que el tiempo de carga aumenta, la probabilidad de que un usuario rebote es alta.
Como se ha mencionado anteriormente, existen una infinidad de factores que influyen para que una web sea lenta. A continuación, vamos a ver algunas herramientas de gran utilidad que nos permitirán analizar el rendimiento de nuestra web y posteriormente, una serie de posibles soluciones a los distintos problemas que pueden causar como contrapartida un bajo rendimiento.
Antes de comenzar, se debe conocer el estado en el que se encuentra actualmente el performance web. Para ello, se pueden emplear una serie tanto de herramientas gratuitas como de pago, que generan un informe muy completo sobre cuál es su estado reciente, e incluso algunas de ellas reportan sugerencias sobre cómo mitigar los problemas detectados.
Algunas de las herramientas que prueban la velocidad de carga son:
Con el objetivo de ver dónde se encuentra el cuello de botella, se pueden complementar las pruebas de velocidad que se hacen a un sitio web con las pruebas de carga. Veámoslo más claro con algunas de las herramientas más avanzadas:
¿Sabías que el principal problema de carga de una web es el tamaño de las imágenes? Utilizar herramientas de compresión sin que pierdan calidad de imagen, como puede ser TinyPng, es una excelente idea para escoger el tamaño adecuado de las mismas.
Aunque las imágenes toman un papel muy importante para la carga de una web, no significa que debamos emplear pocas o directamente eliminarlas. Precisamente esto puede ser contraproducente ya que, según algunos estudios, en las páginas web de comercios electrónicos, los usuarios esperan, como mínimo, ver tres imágenes antes de comprar un producto.
Cargar una imagen en alta resolución y seguidamente limitar su tamaño a través de CSS, es una mala práctica que se realiza a menudo. Cuando este hábito trasciende a una página web, sucede que primero se carga la imagen completa y después se ajusta al tamaño apropiado, ralentizando la página.
Una de las formas más sencillas de reducir el tamaño de las imágenes es ajustarla a la medida correcta, de forma que, si se desea que una imagen aparezca con 360 px de ancho, cambie el tamaño de la imagen a ese ancho. Aunque este uso es difícil de realizar cuando el sitio web es totalmente responsive, habría que cargar en este caso una imagen específica para cada punto de corte.
Incluso es aconsejable usar formatos de imagen como WebP que, a partir de octubre del año 2020, son compatibles con todos los navegadores a excepción de Internet Explorer. Cuando se emplea este formato, se logra comprimir una media del 25% el tamaño de las imágenes sin perder calidad.
Normalmente cuando su navegador obtiene datos de un servidor, emplea el protocolo HTTP. Por lo tanto cabe apuntar que, cuántas más veces solicite información al servidor, más solicitudes HTTP existirán, provocando que la carga sea más lenta.
Es importante analizar todas las solicitudes que se estén realizando, pues complementos como plugins o librerías que estén siendo usados mandan un número elevado de las mismas, e igual no todas son estrictamente necesarias, siendo interesante en este caso buscar una alternativa que resuelva el problema.
Minificar Javascript, usar CSS Sprint, evitar complementos, tener un código limpio y refactorizado, son algunas de las formas de reducir el peso de esta cantidad de solicitudes.
En las herramientas de desarrollo del navegador podemos hacernos una idea de las peticiones que nuestro sitio web está consumiendo.
Ahora que sabemos cómo detectar las peticiones de solicitud que realiza el sitio web, puede comenzar a aminorar las que están relacionadas con el CSS y Javascript.
comentarios, los delimitadores de bloque y unificar el código en un solo fichero menos pesado. Esta práctica tiene dos ventajas principales, que son reducir el número de solicitudes y disminuir el tamaño total de la descarga. Hay diferentes métodos para minificar el código y dependerá usar uno u otro en función de cada proyecto individualmente.
La calidad de nuestro código HTML, CSS y JS es uno de los temas que no pueden pasar desapercibidos. Hacer un código de calidad, accesible, reutilizable y escalable evitará, entre otras cosas, llamadas externas innecesarias, complejidades temporales y computacionales elevadas que provocan saturación en el servidor o en el navegador del usuario.
Una medida esencial a tener en cuenta es el tiempo hasta el primer byte o TTFB. Es la cantidad de tiempo que un navegador tiene que esperar antes de obtener el primer byte de datos del servidor donde esté alojado el sitio web. Para Google, es muy importante como medida crítica de rendimiento recomendando que el TTFB sea de menos de 200ms.
En el momento en el que un usuario solicita la información de un sitio web en su navegador envía una solicitud HTTP al servidor donde esté alojado. Por normal general, son tres los pasos que ocurren entre la solicitud inicial y el primer byte de datos:
Para acceder a esta información podemos hacerlo a través de las herramientas de desarrollador de Google en su navegador u otras como la mencionada anteriormente WebPageTest.
Un TTFB elevado suele deberse a problemas de red, una mala configuración del contenido dinámico/asíncrono, la configuración o rendimiento del servidor web. También en muchos casos, usar un CDN o un DNS más eficaz puede disminuir el TTFB.
En el desarrollo de una web los redireccionamientos suelen ser habituales, pero tener demasiados puede crear solicitudes HTTP adicionales, afectando negativamente a la velocidad de carga, particularmente en dispositivos móviles. Esto significa que es mejor mantenerlos al mínimo. De hecho, Google afirma que, tarde o temprano, se eliminarán para siempre.
Este protocolo llegó al mercado para dar paso a su anterior versión HTTP/1.1, aportando numerosas mejoras como el uso de una única conexión, la compresión de cabeceras o el servicio “server push”.
En muchos análisis recomiendan como una de las primeras opciones para mejorar el performance web la adopción de este protocolo ya que provee mejoras de hasta un 60%.
performance web la adopción de este protocolo ya que provee mejoras de hasta un 60%. Usando el lenguaje de programación Go realizaron una prueba para ver las diferencias entre la versión 1 y 2 de este protocolo. Aquí se puede ver mejor.
Para habilitar este protocolo, se necesita un certificado SSL y un servidor que admita HTTP/2. Para comprobar si tu sitio web admite este protocolo utiliza esta herramienta.
En el año 2019, se presentó el sucesor, con el nombre HTTP/3, prometiendo importantes mejoras. ¡Estoy seguro de que traerá bondades para mejorar el WPO!
Gzip es una forma de compresión para páginas web, CSS y JavaScript a nivel de servidor antes de enviarlas al navegador. Esta optimización del rendimiento del sitio web es fácil de implementar, y puede marcar una gran diferencia reduciendo considerablemente el tamaño final de los ficheros. Es muy aconsejable emplear esta práctica siempre que sea posible.
Una CDN (Content Delivery Network) es un conjunto de servidores ubicados en diferentes puntos de una red, que contienen copias locales del sitio web y permiten dividir el tráfico global entre todos esos servidores reduciendo la latencia (menos distancia), evitando de esta forma la saturación del servidor principal.
Una casuística muy común es experimentar altos niveles de tráfico en momentos muy concretos de tiempo. Esto repercutirá en la saturación del servidor, dando como resultado un rendimiento no óptimo a los usuarios finales. ¡Recordad que altos tiempos de carga significan grandes pérdidas monetarias!
Además, para los usuarios que se encuentran geográficamente lejos del servidor, los tiempos de carga son mayores pues la información tiene que viajar una mayor distancia.
En varios casos de estudios, se estima que la ganancia en tiempo de carga ronda entre el 20% y el 50% y además empleando esta técnica se consigue no saturar el servidor principal.
El uso de una CDN requiere de un estudio propio para el tipo de web, número de usuarios que consumen su contenido y desde dónde geográficamente hablando.
Mejorar el rendimiento de nuestra página web puede reportarnos numerosos beneficios. Utilizando las distintas herramientas de análisis podemos obtener una serie de recomendaciones que, en muchos casos, serán suficientes para obtener los resultados esperados. Si queremos ahondar aún más en la cuestión y conseguir objetivos muy ambiciosos se han mostrado diversas técnicas que podemos emplear para lograrlos.
Es aconsejable dedicar en una primera instancia a identificar aquellos puntos críticos que reportan un mayor beneficio en los tiempos de carga. A partir de ahí se pueden buscar puntos fáciles que, aunque parezcan menores, pueden ocasionar ganancias fáciles.
No hay que olvidar que un segundo de carga puede marcar la diferencia.
ifgeekthen.nttdata.com es un blog del grupo NTT DATA. Un proyecto que busca compartir con profesionales del mundo digital temas relacionados con la tecnología y el universo geek.
