Web Almanac 2024: Is the Web Sustainable?

Hola a todos. Mi nombre es Burak. Hoy hablaré sobre la cuestión de la sostenibilidad web. Antes de eso, déjenme darles una pequeña introducción sobre mí. Soy turco. Me mudé a Alemania, a Berlín, hace cuatro años. Trabajo en una empresa llamada Iberal. Estoy bastante enamorado del clima frío, así que Berlín es una gran coincidencia para mí. Pueden verme saltando estúpidamente en un lugar llamado Admirabüke. Generalmente hace mucho frío en invierno. Es un lugar encantador. Recomiendo ir allí, pero tal vez no saltar porque a veces no es seguro.

Hoy hablaré sobre Web Almanac. Web Almanac es un informe en el que he estado trabajando voluntariamente durante el último año. Hemos estado revisando y haciendo un análisis de datos en casi 17 millones de páginas web. Y estamos creando un informe sobre la sostenibilidad de la web, análisis de JavaScript, privacidad, como muchos capítulos sobre eso. Es como un Spotify Wrapped. Si necesitas un ejemplo, cuando recibes tu Spotify Wrapped, obtienes el mejor artista, el género que realmente te gusta. Es un informe así, pero en términos técnicos y principalmente para desarrolladores. Pero hoy hablaré sobre el capítulo de sostenibilidad porque todo el informe es en realidad enorme. Y estuve como voluntario para el capítulo de sostenibilidad y el capítulo de peso de página. Fui autor y analista de datos para esos capítulos.

Hoy revisaremos si la cuestión de la sostenibilidad web. Pero antes de eso, quería hacer un saludo al equipo con el que trabajé porque fue un gran trabajo en equipo y obtuvimos el premio al mejor capítulo de este año, lo cual es realmente genial. Así que vamos a profundizar. Antes de profundizar, necesito darles una introducción a mis diapositivas. Generalmente habrá dos gráficos uno al lado del otro. Uno será de los datos de 2024, la última versión. Y el otro es de los datos de 2022. No tenemos la versión de 2023.

Así que el anterior será 2022 y compararemos esos dos años entre sí. Y en cada gráfico, generalmente habrá un percentil en la parte inferior. El percentil 19 representa la mayor parte de la web, como 17 millones, casi 17 millones de páginas web que probamos. Y el 10th percentil representará las páginas web de mejor rendimiento.

Generalmente hablaré sobre el percentil 19 porque básicamente quiero hablar sobre el promedio de internet, pero a veces mencionaré también el percentil 10. Así que profundicemos. En 2024, desafortunadamente, en promedio, cada página web está cargando ocho megabytes de datos cuando el usuario accede a esa página, lo cual es bastante grande, de hecho.

En WebAlmanac, recomendamos que debería ser 500 kilobytes por página y como máximo un megabyte, y ocho megabytes son 16 veces más que nuestra recomendación, lo cual es bastante grande. Solo hay una cosa buena al respecto porque en 2022, el peso promedio de la página era de nueve megabytes. Y se redujo a ocho megabytes. Así que en dos años, se redujo en un megabyte, lo cual no es una gran disminución, pero aún así podemos decir que hay algunas mejoras. Verifiquemos el CSS no utilizado.

Así que el CSS no utilizado, puedes ver que en 2024, 225 kilobytes de CSS estaban siendo enviados, y no se estaba utilizando, lo cual no es un número enorme. Pero si multiplicas esto por miles, digamos, si tienes páginas web que reciben miles o millones, tal vez, entonces se multiplica mucho, y llega a un número muy preocupante. En 2022, teníamos 221 kilobytes. Así que incluso aumentamos en cuatro kilobytes. No es un gran aumento, pero esperaríamos que esto disminuyera en realidad.

Verifiquemos el JavaScript no utilizado. Así que el JavaScript no utilizado es un poco deprimente si me preguntas, porque estamos enviando 907 kilobytes de JavaScript no utilizado, que está realmente muy cerca del máximo que recomendamos, que es un megabyte. Y esto es demasiado preocupante si me preguntas. Así que si multiplicas esto por mil clics o millones de clics a tu página web, esto está creando un enorme desperdicio de datos. Y en 2022, era 645. Así que personalmente, pensaría que esto disminuiría, pero aumentó casi 300 kilobytes, lo cual es bastante preocupante.

Bien, tenemos algo de código no utilizado que estamos enviando. Estamos usando algunos datos para nada. Estamos desperdiciando algunos recursos, pero tal vez estamos usando hosting verde, ¿verdad? Y luego estamos equilibrando algunas cosas. Pero desafortunadamente no. En 2024, las páginas de escritorio, el 12% de ellas estaban usando hosting verde. Y en 2022, era 13%. Así que incluso bajó un 1%. Como comentario personal, esto puede estar sucediendo debido a la IA, porque después de la IA, todas esas compañías de hosting que tenían los objetivos de hosting verde se salieron del camino porque necesitaban mantener algunos recursos para la IA. Y esto tipo de creó algunos problemas en términos de sostenibilidad para nosotros en la web.

Peso de la imagen. Así que dijimos que estamos enviando ocho megabytes de datos, y más de la mitad de esto es en realidad peso de imagen. Así que en promedio, una página está cargando 4.4 megabytes de peso de imagen, lo cual es realmente enorme. Y está creando una enorme transferencia de datos que necesitamos optimizar.

Formato de imagen. Así que aquí, por primera vez, estamos viendo algunos buenos resultados. Si me preguntas, en el capítulo de la izquierda, estás viendo el cambio de 2024 a 2022. Y tenemos dos formatos realmente buenos, AWIF y WebP. AWIF aumentó un 386%, pero esto es un poco engañoso porque AWIF estaba siendo utilizado por el 0.3% en 2022, y solo aumentó al 1.4%.

Algunas personas lo están descubriendo, pero no es un gran aumento. Es un aumento muy pequeño, y con suerte aumentará más. Pero todavía es una cantidad super, super pequeña de imágenes que estamos sirviendo que están usando un formato optimizado. JPEG disminuyó un poco. WebP aumentó un 34%. Estos son prometedores, pero aún son un poco demasiado lentos para llegar a lo ideal. Verifiquemos la optimización de imágenes. Así que la carga diferida.

La carga diferida es muy fácil. Solo agregas un atributo, y luego cargas tu imagen de manera diferida. Pero solo un poco más del 30% de las imágenes están usando este atributo, lo cual es un fruto bastante fácil de alcanzar, en realidad.

Y luego tipos de imágenes responsivas. Solo el 32% de las imágenes están usando conjunto de fuentes con tamaños. Conjunto de fuentes con tamaño es básicamente si tienes una imagen, y si tienes tanto vista de escritorio como móvil, si envías una alta resolución a la vista de escritorio, no necesitas enviar esta alta resolución a móvil porque la vista móvil es pequeña. Puedes mostrar una resolución más baja, pero si no usas conjunto de fuentes con tamaños, básicamente estás enviando la misma imagen con el mismo tamaño, y estás desperdiciando una gran cantidad de transferencia de datos porque no necesitas esa alta resolución. Y solo un 32% de las imágenes están usando esta opción.

Compresión de texto. Así que la compresión de texto es la cosa más fácil de hacer, si me preguntas, después del truco de imagen de carga diferida que puedes hacer. El 53% de los archivos no están siendo comprimidos mientras los estamos transfiriendo, y es una solución muy fácil. Es básicamente, ahora mismo, por ejemplo, estamos enviando un teléfono a nuestra abuela. Compramos un teléfono para nuestra abuela. Lo enviaremos a ella. Estamos agarrando una caja enorme, poniendo un muy pequeño teléfono dentro de ella, y estamos enviando esta caja llena de aire, lo cual es en realidad un gran desperdicio. Podrías simplemente comprimirlo, y podrías enviar una caja pequeña, lo que sería mucho más fácil y consumiría menos energía.

consumiría menos energía. Caché. Así que la caché ha estado presente durante mucho tiempo. No es algo nuevo, por supuesto.

Y de acuerdo con los resultados, solo el 25% de las páginas web no están utilizando caché. Puedes decir que esto es bueno, y estoy de acuerdo. No está mal, en realidad, pero el 25% que no utiliza caché es un poco más de lo que esperaría. Porque, por supuesto, algunas páginas necesitarían no usar caché.

Pero no creo que el 25% sea ese número. Tal vez el 10%, el 15%.

Pero de acuerdo con nuestra investigación, en este momento, el 25% no está utilizando caché. Está bien, he dado mucha negatividad. Lo siento por eso. Ahora daré algunas soluciones para arreglar esas cosas y aumentar la sostenibilidad de tu página web y disminuir el peso de tu página, con suerte.

Optimizaciones de imágenes. Así que AVF y WebP son los formatos de imagen más optimizados que puedes usar. En los gráficos a continuación, puedes ver que no son compatibles con Internet Explorer. No digo que ignores a los usuarios de Internet Explorer. Simplemente úsalo y no nos importa. No, esto creará algunos problemas de accesibilidad. Esas personas también tienen derecho a usar internet. Tal vez haya algunas personas mayores que lo estén usando.

Tal vez algunas personas como Internet Explorer. No podemos juzgar. Así que esas personas también pueden usarlo. Pero básicamente, puedes usar la etiqueta picture para retroceder a JPEG o PNG cuando estés usando AVF o WebP, lo cual es una solución bastante fácil, si me preguntas. Y luego puedes usar lazy loading y puedes usar source set para optimizar tu web móvil para enviar imágenes de menor resolución para que no transfieras tantos datos.

Compresión de texto. Es muy fácil. Solo puedes usar gzip u otras opciones para comprimir tus archivos. Y cuando comprimes tus archivos, estarás transfiriendo menos datos, lo que aumentará tu sostenibilidad de la página de una buena manera.

Peso de la página. Sé que esto no es una fruta de bajo colgante. Lo siento por eso. Dije fruta de bajo colgante, pero esto tampoco es algo nuevo. Es tan común que puedes crear algunos fragmentos más pequeños y puedes cargar esos fragmentos más pequeños siempre que sean necesarios. No necesitas cargar todo al principio. No necesitas consumir tanta energía.

Esta grabación de video que ves, la obtuve de Amazon. Y aquí puedes ver que está obteniendo casi 10 megabytes de datos y 6.3 megabytes de los datos que se obtuvieron. El código no se está consumiendo en absoluto. Está sin usar. Y esto es un gran desperdicio si estás obteniendo miles de clics.

Hosting verde. Este es un tema muy complicado. Porque el hosting verde, es tan difícil definir un servicio de hosting como verde. Cambia según tu país, cambia según el lugar donde tus consumidores están usando tu sitio web.

Tiene muchos parámetros. Pero aún así, si tienes curiosidad al respecto, puedes consultar el punto tres para ver las opciones disponibles por ti mismo. Y si quieres aprender más sobre el hosting verde, cómo funciona, puedes ir al enlace en la parte inferior derecha de la diapositiva y puedes aprender más al respecto. Es una buena mejora.

Puede costar un poco más, pero entonces tu página web será más sostenible.

Caché. Así que la caché no es algo a lo que no necesito dar demasiadas soluciones. Pero hay una solución poco convencional para esto. Si tu página está utilizando estrictamente una política de no caché, lo cual puede ser comprensible, y que a veces es necesario, pero aún así, en algunos casos, puedes usar e-tech, que es una opción poco convencional para almacenar en caché algunos datos. Así que habrá un hash en el servidor. Habrá un hash en tu dispositivo. Y si esos hashes coinciden, el servidor no te va a dar el archivo de nuevo. Tú no vas a transferir datos. Pero si estos hashes no son iguales entre sí, entonces significa que el archivo en el lado del servidor ha cambiado y entonces lo obtendrás. Así que solo estarás obteniendo los datos cuando sea necesario. Así que puedes hacer tales optimizaciones para reducir tu transferencia de datos.

Últimas dos informaciones. Emisiones del sitio web. Así que al final del día, en promedio, los sitios web están produciendo 1.47 gramos de dióxido de carbono. Y de hecho, era 1.29 gramos en 2022, lo cual ha aumentado. Y esperaríamos que esto disminuya porque estamos avanzando en cada tecnología, estamos optimizando las cosas, pero aún así nuestras emisiones están aumentando y aumentando. Deberíamos empezar a enfocarnos en la sostenibilidad de nuestras páginas web también.

Últimos datos curiosos. Así que di estadísticas realmente malas todo el tiempo. Tal vez te juzgué un poco. Yo no quería. Lo siento. Pero también necesito dar algunas estadísticas sobre nosotros. Así que para hacer este web almanac, consumimos también algunas emisiones de carbono. Esto es igual a fabricar 323 smartphones. Lo cual no es enorme, si me preguntas, pero tampoco es pequeño. Tal vez podamos mejorarlo. Tal vez tú puedas unirte a nosotros. Puedes tener algunas ideas y puedes disminuirlo. Siempre estamos abiertos a personas. Y por último, este es el final de mi charla. Necesitamos muchos contribuyentes. Necesitamos muchos voluntarios. Puedes ser el líder del capítulo, editor del capítulo, autor o analista de datos. Necesitamos todo tipo de personas para ayudarnos. Si te gusta el proyecto, por favor únete a nosotros. Por favor, voluntarízate con nosotros. Y gracias por ver.