Qué es el Diseño Web Sostenible y Cómo Lograrlo
Publicado: 2022-12-01
“Realmente quiero un auto eléctrico, pero simplemente no puedo pagarlo”, dijo un amigo mío con remordimiento hace unos meses. Él y yo estábamos discutiendo el cambio climático y los cambios que ambos hicimos en nuestros hábitos.
Me reí.
“Sabes que también consumen energía, y si no cargas tu coche eléctrico en un enchufe que utilice energías renovables, sigues contaminando bastante, ¿no?”.
Dijo que lo sabía, pero que aún sentía que él y su VW de 20 años eran una bofetada frente a todos sus esfuerzos por llevar una vida más sostenible y ecológica.
"¿Qué tal esto? Puedo decirle cómo reducir sus emisiones de carbono a través de su mundo digital", sugerí. Me dio una mirada desconcertada. Luego le dije que, según algunas estadísticas, el usuario promedio de Internet genera aproximadamente la misma cantidad de CO2 que si viajara 1000 km con un automóvil normal y que hay varias actividades que contribuyen.
Luchó contra esta idea durante casi diez minutos hasta que saqué los datos de mi teléfono. Honestamente, no lo culpé, ya que recuerdo que tuve la misma reacción el día que me di cuenta de que cada página web que visito tiene un costo oculto: la energía utilizada para mantenerla.
El sucio secreto de Internet, por así decirlo.
Según Website Carbon Calculator, el sitio web promedio produce aproximadamente 0,5 gramos de CO2 por página vista, por lo que para un sitio web con 100 000 visitas mensuales, eso es 500 kg por año. Tenga en cuenta que es por sitio web!
Como referencia, un automóvil promedio emite 1200 kg de CO2 cada 1000 km, por lo que puede ver cómo Internet tiene un efecto muy palpable sobre el cambio climático y el calentamiento global debido a su inmensa huella de carbono.
Entonces, la pregunta es: ¿Qué puede hacer usted como propietario de un sitio web para disminuir el impacto de su sitio en nuestro medio ambiente?
Diseño web sostenible, por supuesto.
En Kualo, estamos tan intrínsecamente entrelazados con el concepto de sustentabilidad que sentimos que sería natural explorar este tema. En este artículo, aprenderemos:
Queremos brindarle los planos exactos que lo ayudarán a minimizar la huella de carbono de su sitio web, así que sin más preámbulos, ¡vamos a sumergirnos!
Esto es lo que podemos leer en el Manifiesto de Diseño Web Sostenible, con el sitio web explicando brevemente lo que abarcaría este credo. Repasemos rápidamente los 6 puntos:
Si considera todos los puntos mencionados anteriormente, puede ver que lo que pide este manifiesto no es solo un diseño web sostenible, sino que es la base para prácticas comerciales sostenibles y una economía sostenible. Para tener un futuro mejor, necesitamos negocios que brinden servicios y productos significativos y útiles que tengan un impacto negativo mínimo en el medio ambiente y las personas.
En otras palabras, si busca un diseño web sostenible, debe:
Ahora, volviendo a lo que dije al comienzo de este artículo (y nuestra infografía sobre el impacto ambiental de Internet), sabemos que esto es básicamente un agujero negro de energía en constante aumento. Por otro lado, también sabemos que Internet es fundamental para muchas personas, y no es como si pudieran cambiarlo por su versión de mayor eficiencia energética, como lo haría con un automóvil o una computadora portátil.
¿Pero sabes qué podemos intercambiar?
El diseño de nuestro sitio web, por supuesto.
Si el punto principal es que el tamaño de su sitio web y cómo está construido afecta directamente la cantidad de CO2 que generará, entonces esto es lo que debemos abordar como propietarios de sitios web.
Pero, ¿hay algún beneficio adicional en cambiar nuestras formas cuando se trata de diseño web?
Absolutamente diría que sí.
Como especialista en marketing, estoy acostumbrado a considerar todos los ángulos de mis esfuerzos digitales y la forma en que impactan en mis proyectos. Puedo decirles de inmediato que, incluso a nivel personal, es mucho mejor implementar un sitio web que siga un enfoque ecológico. diseño web y estas son algunas de las razones por las que:
Por razones obvias, los usuarios prefieren viajes de usuario más cortos, ya que no pierden el tiempo. Sin embargo, además de la experiencia del cliente, también visitarán menos páginas para encontrar lo que necesitan y, por lo tanto, reducirán las emisiones de carbono de su visita.
(crédito de la imagen: https://www.appcues.com/blog/user-journey-map)
Es una buena idea familiarizarse mejor con el concepto de viajes de usuario y luego, una vez que pueda diseñar libremente sus mapas de viaje de usuario, adaptar su diseño web a ellos.
Una buena experiencia de usuario (UX) que evite los puntos de fricción inevitablemente dará como resultado un menor consumo de energía y clientes más felices.
Elegir un proveedor que ofrezca alojamiento sostenible alimentado por energía renovable es imprescindible. También es una buena idea mirar su política ambiental general y verificar si su proveedor de alojamiento ha tomado medidas adicionales para compensar sus emisiones de CO2 y/o si está involucrado en otras prácticas de sostenibilidad.
Si un sitio no tiene almacenamiento en caché, entonces está haciendo que el servidor trabaje más. Cada vez que alguien accede a una página de su sitio web, el contenido de la página debe construirse sobre la marcha procesando el código PHP, realizando consultas a la base de datos y convirtiéndolo en el contenido HTML que muestra su sitio web.
Esto utiliza más CPU, memoria y disco del servidor, consumiendo energía en el proceso. El servidor tendría que hacer esto para cada visitante y cada página, por lo que cuantos más visitantes y páginas tenga, más energía consumirá.
Con el almacenamiento en caché en su lugar, la mayor parte de esta carga de trabajo intensiva solo se realiza la primera vez que un visitante solicita una página. El HTML resultante luego se almacena en un caché para que cada carga de página subsiguiente no tenga que hacer todo ese trabajo pesado.
Además, sus páginas se cargan más rápido. Esto no solo es una victoria para usted y sus visitantes, sino que también significa que sus visitantes pasan menos tiempo inactivos esperando que se cargue la página, consumiendo menos energía en el proceso.
Hay una gran cantidad de formas de almacenar en caché los sitios web. En Kualo, preferimos LiteSpeed Cache para el almacenamiento en caché de páginas, y también tenemos Redis y Memcached para almacenar en caché las consultas de la base de datos. Sitios web súper rápidos y mejor sostenibilidad: ¿qué es lo que no se puede amar?
Ese suele ser el caso de los complementos orientados al marketing o los duplicados que nos hemos olvidado. Valora lo que tienes y luego lo que necesitas y dale caña a cualquier otra cosa.
(la fuente personalizada creada para Duolingo por la agencia Johnson Banks)
Su archivo de fuente personalizado típico puede superar fácilmente los 200 kb e incluir un solo peso. Si usa varios pesos y tipos de letra, esto inevitablemente se acumulará, lo que afectará tanto la velocidad como el consumo de energía.
Por lo tanto, se recomienda que utilice fuentes personalizadas solo si cree que son realmente importantes para su marca y para fines prácticos.
https://youtu.be/eY-VyLd2t-Q
LiteSpeed Cache para WordPress incluye optimización automática de imágenes, por lo que no debe preocuparse por hacerlo usted mismo. Además, puede convertir imágenes para usar formatos de archivo modernos como WebP, que son alrededor de un 25 % más pequeños en comparación con las imágenes PNG o JPG.
Más allá de la optimización, lo que también debemos considerar es si su uso es justificable y útil.
Por ejemplo, algunas fotos de productos podrían ser inútiles (por ejemplo, ángulos muy similares). En otros casos, las imágenes utilizadas en la página, como las imágenes de archivo aleatorias, se pueden reemplazar fácilmente con alternativas como gráficos SVG o se puede lograr el mismo efecto a través de estilos CSS.
Si esto incluye muchas imágenes o videos en particular, que pueden ser de gran tamaño, todos esos datos deben viajar a través de Internet, aunque es posible que nunca se vean.
Lazy loading significa que solicita este contenido solo cuando el usuario se desplaza hacia abajo en su página. Esas secciones aparecerán justo antes de que el contenido se vea, por lo que, desde la perspectiva de los visitantes, es como si siempre hubiera estado allí: no hay diferencia perceptible.
No solo está evitando la transmisión de datos innecesarios, sino que también mejorará su puntaje de PageSpeed al hacer que su sitio web sea menos pesado.
Algunas aplicaciones vienen con carga diferida incorporada, o se pueden conectar con un complemento. Para WordPress, LiteSpeed Cache incluye una función de carga lenta que es capaz de cargar cualquier cosa, desde imágenes, videos, contenido incrustado o incluso bloques HTML completos si su página es muy larga.
Las animaciones normalmente no tienen un propósito táctico, así que utilícelas lo menos posible. Con los videos, depende mucho del propósito que sirvan, por lo que si cree que son útiles para sus usuarios, utilícelos de hecho, solo asegúrese de que también estén lo más optimizados posible.
A menudo, su código HTML, CSS y Javascript contendrá datos adicionales, como espacios, saltos de línea o comentarios. Estos espacios o comentarios son útiles solo para que un desarrollador pueda leer y comprender fácilmente el código, pero no hacen ninguna diferencia en la forma en que el navegador interpreta su código.
Minimizar su código elimina todo este peso innecesario, reduciendo el tamaño de los archivos que deben transferirse a través de Internet y haciendo que su sitio se cargue más rápido.
Para WordPress, LiteSpeed Cache maneja este aspecto por usted, pero la mayoría de las otras aplicaciones también tendrán una función similar disponible a través de un complemento.
Es posible que haya utilizado un tema o un generador de páginas que incluye una tonelada de diseños, estilos o funcionalidades diferentes que nunca usa en ninguna parte de su sitio.
Todo el código permanecerá en sus archivos CSS y JS, lo que aumentará la cantidad de datos que deben transferirse a través de Internet y hará que su sitio se cargue más lentamente sin una buena razón.
Puede ser difícil determinar exactamente qué código eliminar manualmente, pero para WordPress, LiteSpeed Cache le permite eliminar automáticamente el CSS no utilizado. Esto elimina el CSS no utilizado y genera un archivo CSS único para cada página. Esto puede valer la pena si solo tiene unas pocas páginas, pero si su sitio tiene muchas páginas, puede seguir siendo más eficiente usar un solo archivo CSS.
Javascript puede ser más complejo de eliminar, aunque LiteSpeed puede al menos retrasar su carga hasta que se detecte la actividad del usuario. Esto puede ser apropiado, siempre que no sea necesario para el contenido de la mitad superior de la página.
En última instancia, el mejor consejo es evitar el uso de creadores de páginas o complementos inflados siempre que sea posible y usar un código limpio que sepa que realmente se requiere.
Pasarán mucho más tiempo tratando de encontrar lo que buscan, lo que resultará en un mayor consumo de energía.
Para evitar esto, asegúrese de que su diseño se adapte bien a la mayor cantidad posible de estas variables para brindar una experiencia óptima a los usuarios.
Sin embargo, lo que es más importante, desde el punto de vista de la sostenibilidad, esto ayuda a reducir el CO2, ya que la transferencia de datos a diferentes partes del mundo requiere mucha energía. Y cuanto más lejos tienen que viajar los datos, más energía requiere.
También es bueno mencionar que las imágenes enviadas a través de CDN generalmente se reducen en tamaño si de alguna manera se salta este paso. Muchos CDN le proporcionarán herramientas para la optimización de imágenes, incluida la reducción del tamaño de la imagen, la densidad de píxeles, el formato y la compresión.
Es importante elegir una CDN que use energía renovable, por supuesto, como Cloudflare.
Puede explorarlos manualmente o usar Google Analytics para evaluar qué páginas pueden estar desactualizadas o tener un bajo rendimiento. Luego, puede decidir si puede adaptarlos para que tengan contenido útil y actualizado o determinar si simplemente están destinados a la papelera.
Participar en proyectos que plantan árboles y compensan el carbono es una forma increíble no solo de mejorar la sostenibilidad de su diseño web sino también de su negocio en general. Los árboles son los ganadores absolutos cuando se trata de reducir las emisiones de CO2, ya que las absorben y las transforman en oxígeno.
¡Lo invitamos a visitar a nuestros socios en Ecologi (o realmente a cualquier otra organización similar) y comenzar a plantar esos árboles!
Me reí.
“Sabes que también consumen energía, y si no cargas tu coche eléctrico en un enchufe que utilice energías renovables, sigues contaminando bastante, ¿no?”.
Dijo que lo sabía, pero que aún sentía que él y su VW de 20 años eran una bofetada frente a todos sus esfuerzos por llevar una vida más sostenible y ecológica.
"¿Qué tal esto? Puedo decirle cómo reducir sus emisiones de carbono a través de su mundo digital", sugerí. Me dio una mirada desconcertada. Luego le dije que, según algunas estadísticas, el usuario promedio de Internet genera aproximadamente la misma cantidad de CO2 que si viajara 1000 km con un automóvil normal y que hay varias actividades que contribuyen.
Luchó contra esta idea durante casi diez minutos hasta que saqué los datos de mi teléfono. Honestamente, no lo culpé, ya que recuerdo que tuve la misma reacción el día que me di cuenta de que cada página web que visito tiene un costo oculto: la energía utilizada para mantenerla.
El sucio secreto de Internet, por así decirlo.
Según Website Carbon Calculator, el sitio web promedio produce aproximadamente 0,5 gramos de CO2 por página vista, por lo que para un sitio web con 100 000 visitas mensuales, eso es 500 kg por año. Tenga en cuenta que es por sitio web!
Como referencia, un automóvil promedio emite 1200 kg de CO2 cada 1000 km, por lo que puede ver cómo Internet tiene un efecto muy palpable sobre el cambio climático y el calentamiento global debido a su inmensa huella de carbono.
Entonces, la pregunta es: ¿Qué puede hacer usted como propietario de un sitio web para disminuir el impacto de su sitio en nuestro medio ambiente?
Diseño web sostenible, por supuesto.
En Kualo, estamos tan intrínsecamente entrelazados con el concepto de sustentabilidad que sentimos que sería natural explorar este tema. En este artículo, aprenderemos:
- ¿Qué es el diseño web sostenible?
- ¿Por qué necesitamos un diseño web sostenible?
- ¿Cuáles son los beneficios del diseño web sostenible?
- Mejores prácticas de diseño web sostenible
Queremos brindarle los planos exactos que lo ayudarán a minimizar la huella de carbono de su sitio web, así que sin más preámbulos, ¡vamos a sumergirnos!
¿Qué es el diseño web sostenible?
“El diseño web sostenible es un enfoque para diseñar servicios web que priorizan a las personas y al planeta. Ofrece productos y servicios digitales que respetan los principios del Manifiesto de la Web Sostenible: limpios, eficientes, abiertos, honestos, regenerativos y resilientes”.Esto es lo que podemos leer en el Manifiesto de Diseño Web Sostenible, con el sitio web explicando brevemente lo que abarcaría este credo. Repasemos rápidamente los 6 puntos:
- Limpio: los servicios utilizados por su sitio web deben funcionar con fuentes de energía renovables, lo que significa que su alojamiento web debe ser de energía ecológica.
- Eficiente: los servicios que brinda deben estar completamente optimizados para usar la menor cantidad posible de energía (y materiales)
- Abierto: los servicios que proporciona deben ser accesibles para todos y deben permitir a los usuarios tener un control total de sus datos.
- Honesto: su sitio web no proporcionará contenido engañoso y/o tratará de engañar a los usuarios a través del diseño web
- Regenerativo: sus servicios participarán en una economía que está orientada a apoyar a las comunidades y al medio ambiente.
- Resiliente: sus servicios se prestarán cuando y donde más se necesiten
Si considera todos los puntos mencionados anteriormente, puede ver que lo que pide este manifiesto no es solo un diseño web sostenible, sino que es la base para prácticas comerciales sostenibles y una economía sostenible. Para tener un futuro mejor, necesitamos negocios que brinden servicios y productos significativos y útiles que tengan un impacto negativo mínimo en el medio ambiente y las personas.
En otras palabras, si busca un diseño web sostenible, debe:
- Utilizar la menor cantidad posible de recursos
- Desarrolle y siga un plan de contenido bien pensado que asegure que cada página que diseñe tenga un propósito
- Utilizar una construcción de sitio web optimizada
- Evite engañar a sus usuarios de cualquier manera para que realicen acciones que tal vez no quieran
¿Por qué es importante el diseño web sostenible?
Por lo tanto, Internet tiene numerosos beneficios para la sociedad, pero tiene un costo ambiental enorme. El usuario web promedio consume contenido en línea durante 5 a 6 horas por día en su computadora o dispositivo móvil. A medida que continuamos usando la tecnología con más frecuencia que nunca, esto solo aumentará en los próximos años hasta que miles de millones de personas naveguen por sitios web de todo el mundo con 8 tipos diferentes de dispositivos.Ahora, volviendo a lo que dije al comienzo de este artículo (y nuestra infografía sobre el impacto ambiental de Internet), sabemos que esto es básicamente un agujero negro de energía en constante aumento. Por otro lado, también sabemos que Internet es fundamental para muchas personas, y no es como si pudieran cambiarlo por su versión de mayor eficiencia energética, como lo haría con un automóvil o una computadora portátil.
¿Pero sabes qué podemos intercambiar?
El diseño de nuestro sitio web, por supuesto.
Si el punto principal es que el tamaño de su sitio web y cómo está construido afecta directamente la cantidad de CO2 que generará, entonces esto es lo que debemos abordar como propietarios de sitios web.
Beneficios del Diseño Web Sostenible
Ahora, en términos generales, si está leyendo esto, ya tiene una buena razón para querer un sitio web sostenible, y esa razón está relacionada con la protección del medio ambiente. Básicamente, quieres ser un héroe para el planeta y te admiro por eso.Pero, ¿hay algún beneficio adicional en cambiar nuestras formas cuando se trata de diseño web?
Absolutamente diría que sí.
Como especialista en marketing, estoy acostumbrado a considerar todos los ángulos de mis esfuerzos digitales y la forma en que impactan en mis proyectos. Puedo decirles de inmediato que, incluso a nivel personal, es mucho mejor implementar un sitio web que siga un enfoque ecológico. diseño web y estas son algunas de las razones por las que:
- Gastarás menos : desde tus gastos de diseñador hasta la producción de tu contenido, cada cosa adicional te costará dinero. Los diseños más complejos le costarán dinero, más redacción y contenido le costarán dinero y así sucesivamente. Ser minimalista y tener solo lo que realmente necesitas es una excelente manera de reducir gastos
- Tus clientes estarán más satisfechos: mientras que antes, cuando los sitios web eran una novedad, la gente disfrutaba de las campanas y los silbatos, ahora todos están abrumados con ellos, ya que pasan todo el día navegando. Esto significa que para el usuario promedio, cuanto más claro sea su sitio web, más probable es que encuentren lo que buscan en lugar de presionar el botón X e ir a alguien que no está perdiendo el tiempo.
- Tus esfuerzos de SEO serán más efectivos : la velocidad ha sido una cosa durante algunos años cuando se trata de la clasificación de Google, sin embargo, con cada año que pasa, vemos que esto se vuelve cada vez más crítico cuando se trata de SEO. Google ODIA los sitios web lentos, y priorizará absolutamente los sitios más ligeros y rápidos. Por cierto, esto también es cierto para la experiencia del cliente, como todos sabemos.
Cómo hacer que su sitio web sea sostenible
1. Comience por planificar su viaje de usuario
Si no está familiarizado con el concepto, el viaje del usuario simplemente se refiere a la secuencia de acciones que un usuario realizará cuando visite su sitio para lograr un objetivo particular: un registro, una compra, etc.Por razones obvias, los usuarios prefieren viajes de usuario más cortos, ya que no pierden el tiempo. Sin embargo, además de la experiencia del cliente, también visitarán menos páginas para encontrar lo que necesitan y, por lo tanto, reducirán las emisiones de carbono de su visita.
(crédito de la imagen: https://www.appcues.com/blog/user-journey-map)
Es una buena idea familiarizarse mejor con el concepto de viajes de usuario y luego, una vez que pueda diseñar libremente sus mapas de viaje de usuario, adaptar su diseño web a ellos.
Una buena experiencia de usuario (UX) que evite los puntos de fricción inevitablemente dará como resultado un menor consumo de energía y clientes más felices.
2. Elija un proveedor de alojamiento ecológico
Sé que esto suena un poco egoísta ya que, al final, somos una empresa de alojamiento, pero la realidad es que quién impulsa su sitio web todos los días importará absolutamente si desea reducir su huella de carbono. Desafortunadamente, los centros de datos consumen una gran parte de la energía que se utiliza para alimentar Internet. Es esencial que hagamos una transición rápida a fuentes 100% renovables.Elegir un proveedor que ofrezca alojamiento sostenible alimentado por energía renovable es imprescindible. También es una buena idea mirar su política ambiental general y verificar si su proveedor de alojamiento ha tomado medidas adicionales para compensar sus emisiones de CO2 y/o si está involucrado en otras prácticas de sostenibilidad.
3. ¡Guarda todo en caché!
Si está utilizando una aplicación impulsada por PHP como lo hacen muchos sitios web (WordPress, Magento, Drupal, etc.), entonces el almacenamiento en caché es imprescindible para la sostenibilidad.Si un sitio no tiene almacenamiento en caché, entonces está haciendo que el servidor trabaje más. Cada vez que alguien accede a una página de su sitio web, el contenido de la página debe construirse sobre la marcha procesando el código PHP, realizando consultas a la base de datos y convirtiéndolo en el contenido HTML que muestra su sitio web.
Esto utiliza más CPU, memoria y disco del servidor, consumiendo energía en el proceso. El servidor tendría que hacer esto para cada visitante y cada página, por lo que cuantos más visitantes y páginas tenga, más energía consumirá.
Con el almacenamiento en caché en su lugar, la mayor parte de esta carga de trabajo intensiva solo se realiza la primera vez que un visitante solicita una página. El HTML resultante luego se almacena en un caché para que cada carga de página subsiguiente no tenga que hacer todo ese trabajo pesado.
Además, sus páginas se cargan más rápido. Esto no solo es una victoria para usted y sus visitantes, sino que también significa que sus visitantes pasan menos tiempo inactivos esperando que se cargue la página, consumiendo menos energía en el proceso.
Hay una gran cantidad de formas de almacenar en caché los sitios web. En Kualo, preferimos LiteSpeed Cache para el almacenamiento en caché de páginas, y también tenemos Redis y Memcached para almacenar en caché las consultas de la base de datos. Sitios web súper rápidos y mejor sostenibilidad: ¿qué es lo que no se puede amar?
4. Si está escribiendo código, asegúrese de que sea código limpio
La mayoría de los usuarios usarán algún tipo de CMS, sin embargo, si escribe algún código, asegúrese de que sea fácil de entender, fácil de cambiar y que evite duplicaciones y operaciones innecesarias.5. Evite complementos y complementos inútiles
Esto es relevante para la regla anterior, pero para las personas que realmente usan un CMS como WordPress, Magento, Craft, Laravel, etc. A veces podemos emocionarnos demasiado con todas las posibilidades que nos ofrece el mercado de complementos y ahogar nuestro sitio web en complementos innecesarios.Ese suele ser el caso de los complementos orientados al marketing o los duplicados que nos hemos olvidado. Valora lo que tienes y luego lo que necesitas y dale caña a cualquier otra cosa.
6. Evite o use fuentes mínimamente personalizadas
Esto puede ser una sorpresa, pero las fuentes personalizadas pueden aumentar absolutamente el tamaño del archivo de su sitio web].(la fuente personalizada creada para Duolingo por la agencia Johnson Banks)
Su archivo de fuente personalizado típico puede superar fácilmente los 200 kb e incluir un solo peso. Si usa varios pesos y tipos de letra, esto inevitablemente se acumulará, lo que afectará tanto la velocidad como el consumo de energía.
Por lo tanto, se recomienda que utilice fuentes personalizadas solo si cree que son realmente importantes para su marca y para fines prácticos.
7. Usa los archivos de medios sabiamente (y optimízalos)
No hace falta decir que todas las imágenes en su sitio web deben optimizarse en tamaño. Lo sabemos por las mejores prácticas relacionadas con la velocidad del sitio web (y, posteriormente, el SEO). A veces vemos a los clientes preguntando por qué su sitio es lento, ¡solo para descubrir que la página de inicio incluye 4 MB de imágenes porque cargaron originales súper grandes! Esas mismas imágenes podrían servirse sin ninguna reducción en la calidad optimizándolas.https://youtu.be/eY-VyLd2t-Q
LiteSpeed Cache para WordPress incluye optimización automática de imágenes, por lo que no debe preocuparse por hacerlo usted mismo. Además, puede convertir imágenes para usar formatos de archivo modernos como WebP, que son alrededor de un 25 % más pequeños en comparación con las imágenes PNG o JPG.
Más allá de la optimización, lo que también debemos considerar es si su uso es justificable y útil.
Por ejemplo, algunas fotos de productos podrían ser inútiles (por ejemplo, ángulos muy similares). En otros casos, las imágenes utilizadas en la página, como las imágenes de archivo aleatorias, se pueden reemplazar fácilmente con alternativas como gráficos SVG o se puede lograr el mismo efecto a través de estilos CSS.
8. Carga diferida debajo del contenido del pliegue
Cada una de sus páginas web puede contener una gran cantidad de contenido "debajo de la página", es decir, contenido que no es visible a menos que el visitante se desplace hacia abajo en su página.Si esto incluye muchas imágenes o videos en particular, que pueden ser de gran tamaño, todos esos datos deben viajar a través de Internet, aunque es posible que nunca se vean.
Lazy loading significa que solicita este contenido solo cuando el usuario se desplaza hacia abajo en su página. Esas secciones aparecerán justo antes de que el contenido se vea, por lo que, desde la perspectiva de los visitantes, es como si siempre hubiera estado allí: no hay diferencia perceptible.
No solo está evitando la transmisión de datos innecesarios, sino que también mejorará su puntaje de PageSpeed al hacer que su sitio web sea menos pesado.
Algunas aplicaciones vienen con carga diferida incorporada, o se pueden conectar con un complemento. Para WordPress, LiteSpeed Cache incluye una función de carga lenta que es capaz de cargar cualquier cosa, desde imágenes, videos, contenido incrustado o incluso bloques HTML completos si su página es muy larga.
9. Limita el uso de videos y animaciones
No necesita hacer que su sitio web se vea como una página de Word y evitar videos y animaciones como la peste, pero al igual que con las imágenes, utilícelas con moderación.Las animaciones normalmente no tienen un propósito táctico, así que utilícelas lo menos posible. Con los videos, depende mucho del propósito que sirvan, por lo que si cree que son útiles para sus usuarios, utilícelos de hecho, solo asegúrese de que también estén lo más optimizados posible.
10. Minimice HTML, CSS y Javascript en su sitio
Nuevamente, es posible que ya esté haciendo esto por razones de velocidad, pero si no lo está, repasemos rápidamente la razón detrás de esto.A menudo, su código HTML, CSS y Javascript contendrá datos adicionales, como espacios, saltos de línea o comentarios. Estos espacios o comentarios son útiles solo para que un desarrollador pueda leer y comprender fácilmente el código, pero no hacen ninguna diferencia en la forma en que el navegador interpreta su código.
Minimizar su código elimina todo este peso innecesario, reduciendo el tamaño de los archivos que deben transferirse a través de Internet y haciendo que su sitio se cargue más rápido.
Para WordPress, LiteSpeed Cache maneja este aspecto por usted, pero la mayoría de las otras aplicaciones también tendrán una función similar disponible a través de un complemento.
11. Elimina CSS y Javascript innecesarios
Mientras que la minificación elimina los datos innecesarios, no analiza si su sitio realmente usa alguno de esos códigos.Es posible que haya utilizado un tema o un generador de páginas que incluye una tonelada de diseños, estilos o funcionalidades diferentes que nunca usa en ninguna parte de su sitio.
Todo el código permanecerá en sus archivos CSS y JS, lo que aumentará la cantidad de datos que deben transferirse a través de Internet y hará que su sitio se cargue más lentamente sin una buena razón.
Puede ser difícil determinar exactamente qué código eliminar manualmente, pero para WordPress, LiteSpeed Cache le permite eliminar automáticamente el CSS no utilizado. Esto elimina el CSS no utilizado y genera un archivo CSS único para cada página. Esto puede valer la pena si solo tiene unas pocas páginas, pero si su sitio tiene muchas páginas, puede seguir siendo más eficiente usar un solo archivo CSS.
Javascript puede ser más complejo de eliminar, aunque LiteSpeed puede al menos retrasar su carga hasta que se detecte la actividad del usuario. Esto puede ser apropiado, siempre que no sea necesario para el contenido de la mitad superior de la página.
En última instancia, el mejor consejo es evitar el uso de creadores de páginas o complementos inflados siempre que sea posible y usar un código limpio que sepa que realmente se requiere.
12. Asegúrese de que su sitio web funcione correctamente en diferentes dispositivos
Probar su sitio en numerosos tamaños de pantalla, navegadores, dispositivos y velocidades de ancho de banda puede llevar bastante tiempo, pero está estrechamente relacionado con el diseño web sostenible. Tiene que ver con el punto n.1, lo que significa que la visualización incorrecta del contenido y el diseño generará una experiencia de usuario deficiente y mucha confusión entre los usuarios.Pasarán mucho más tiempo tratando de encontrar lo que buscan, lo que resultará en un mayor consumo de energía.
Para evitar esto, asegúrese de que su diseño se adapte bien a la mayor cantidad posible de estas variables para brindar una experiencia óptima a los usuarios.
13. Use un CDN para servir su contenido
Entonces, ¿qué es un CDN? Una red de entrega de contenido (CDN) es una red de servidores en diferentes ubicaciones geográficas. La forma en que ayudarán a que su contenido se cargue más rápido es sirviéndolo desde una ubicación cercana a sus usuarios. En otras palabras, esto está relacionado tanto con la velocidad como con la experiencia del usuario.Sin embargo, lo que es más importante, desde el punto de vista de la sostenibilidad, esto ayuda a reducir el CO2, ya que la transferencia de datos a diferentes partes del mundo requiere mucha energía. Y cuanto más lejos tienen que viajar los datos, más energía requiere.
También es bueno mencionar que las imágenes enviadas a través de CDN generalmente se reducen en tamaño si de alguna manera se salta este paso. Muchos CDN le proporcionarán herramientas para la optimización de imágenes, incluida la reducción del tamaño de la imagen, la densidad de píxeles, el formato y la compresión.
Es importante elegir una CDN que use energía renovable, por supuesto, como Cloudflare.
14. Audite su contenido para asegurarse de que cumpla con la estrategia
Si tiene un sitio web grande, es fundamental auditar periódicamente su contenido. Algunas páginas inevitablemente quedarán obsoletas o ya no cumplirán su propósito. Esto es especialmente cierto para las bases de conocimientos, pero también lo es para las páginas de productos, publicaciones de blogs, etc.Puede explorarlos manualmente o usar Google Analytics para evaluar qué páginas pueden estar desactualizadas o tener un bajo rendimiento. Luego, puede decidir si puede adaptarlos para que tengan contenido útil y actualizado o determinar si simplemente están destinados a la papelera.
15. Reduce tus emisiones de CO2 compensando tu huella de carbono
Convertirse en un negocio positivo para el clima fue probablemente una de las mejores decisiones que tomamos en términos de nivelar nuestra sostenibilidad. Hasta este momento, hemos plantado más de 50 000 árboles y compensado más de 2000 t de CO2, con la intención de continuar este camino en los próximos años.Participar en proyectos que plantan árboles y compensan el carbono es una forma increíble no solo de mejorar la sostenibilidad de su diseño web sino también de su negocio en general. Los árboles son los ganadores absolutos cuando se trata de reducir las emisiones de CO2, ya que las absorben y las transforman en oxígeno.
¡Lo invitamos a visitar a nuestros socios en Ecologi (o realmente a cualquier otra organización similar) y comenzar a plantar esos árboles!