Si os digo que el planeta se está yendo a la mierda, creo que no os estoy contando nada nuevo...

Y no vengo hoy aquí a daros la chapa sobre rollos medioambientales ni nada similar, pero si quiero invitaros a hacer una reflexión, tal y como yo hice hace unos meses.

Desde aquella creo y defiendo el desarrollo web sostenible sin que ello implique pérdida de funcionalidades y estilo.

Y ahora vamos al lío.

Desarrollo sostenible dentro del mundo web o del mundo digital

Seguro que lo primero que te planteas es el porqué es necesario hablar de desarrollo sostenible dentro del mundo digital cuando aquí no hay contaminación ni movidas similares.

Tu no ves emisiones de CO2 ni residuos tóxicos saliendo de tu portátil, ¿verdad? Y como no lo vemos, ya pensamos que este es el sector más ecológico que te puedas encontrar. 

Pero mucho me temo que esto no es así. Roberto Vázquez (Weiko), en su charla de la WordCamp de Pontevedra sobre desarrollo sostenible, me hizo abrir los ojos y ver la triste realidad.

En ella nos hace ver, con datos, como nuestro trabajo sí que genera una gran emisión de CO2.

Si viviésemos en un mundo imaginario donde toda la energía que generamos fuera renovable, no estaría yo aquí dando la chapa, pero como eso no es así, aquí me tienes.

Si no la vistes, tienes que verla y punto. Y luego entenderás mejor la necesidad de tomarse todo esto en serio.

Personalmente me quedé con un dato en mente: Mover 1MB por la red consume 5W. Extrapolando esto a una web con de 1MB con 1000 visitas estaríamos hablando de un consumo de 5KW.

Seamos realistas, esto no es nada.

El problema viene con las webs que pesan 5MB o más. Y las que tienen millones de visitas. O peor aún, las webs que pesan 5MB y tienen millones de visitas.

Todo esto nos dá para pensar un rato largo, ¿no?

Las ODS, Objetivos para un Desarrollo Web Sostenible

En el medio de toda esta reflexión profunda, pasaron por delante mía las ODS. Es un proyecto impulsado por Naciones Unidas con 17 objetivos a cumplir en el 2030 donde se involucran a toda la sociedad.

Creo que es una iniciativa muy interesante y con largo recorrido, aunque siendo realistas, difícilmente alcanzable en el 2030. Pasaros por la web que está muy interesante. 

Yo de todo ello, me quedo con una idea que intentan transmitir en todo momento.

Con pequeñas acciones que puedes hacer en tu día a día se pueden conseguir grandes objetivos. Quédate con la copla.

¿Qué puedo hacer como desarrollador web para mejorar el mundo?

Esta fue la primera pregunta que se me vino a la cabeza nada más ver el problema real.

Y es una pregunta extensible tanto para desarrolladores, como para diseñadores, implementadores o en general, todos aquellos profesionales que trabajen en el mundo digital.

La respuesta rápida es reducir el peso de las webs y el consumo de recursos. 

Dicho así parece sencillo, y si nos paramos dos segundos cuando vamos hacer determinadas cosas es tan sencillo como suena.

Hay cosillas que podemos hacer en nuestro día a día con nuestras webs que ayudarán mucho a reducir el peso y el consumo de recursos.

Aquí te voy a contar las principales, pero si te paras tú también a reflexionar sobre este problema, seguro que encuentras unas cuantas más.

Optimiza las imágenes para un desarrollo web sostenible

Yo me levanto todos los días creyendo que todo el mundo tiene presente esto de la optimización de las imágenes, pero en cuanto abro el portátil y empiezo a currar en webs que me llegan para optimizar veo que esto es una ilusión bananera en mi mente optimista. 

¿Os podéis creer que aún se suben imágenes para diseñar la portada de una web con un peso de 2 Megas y 5000 píxeles de ancho?

Vale que WordPress ahora ya hace un recorte a un máximo de 2560px de ancho o de alto, pero aún así, ¿de verdad necesitamos imágenes de 2560px de ancho?

Aunque vayas a ponerla como fondo de sección a ancho completo, con 1900px creo que es suficiente. Y ya me estoy yendo a lo alto.

Pocas páginas se ven en monitores con una resolución mayor.

Aunque sea ese el caso, la diferencia en la calidad es mínima. ¿O tú ves las webs en un monitor de 42 pulgadas?

Venga, sin liarnos mucho con esto. Las imágenes debes subirlas al tamaño máximo de visualización.

No hace falta ir al pixel, pero sí es una imágen destacada de tus post, por poner un ejemplo, y tienes puesto que el ancho máximo del contenedor de los post a 900px, esa es la resolución adecuada (100px arriba o abajo, no vamos a ponernos tiquismiquis con esto ).

Otra opción es usar las variaciones que tiene WordPress (o la plantilla que estés usando).

Las imágenes tienes que subirlas comprimidas, porque sí, se pueden comprimir sin perder calidad ni romper nada.

La herramienta que más uso para ello es TinyPNG. Es gratuita y online. Así que excusas para no usarla ninguna.

Y sino quieres hacerlo todo esto manual, o si quieres dejarle la web super guay a tu cliente, instala algún plugin como Smush o EWWW Image Optimizer, que si están bien configurados son buenas herramientas para optimizar tus imágenes .

Vídeos como fondo de sección, ¡no por favor!

Directamente te digo que no los uses.

Ponemos un vídeo que se autoreproduce sin consentimiento del usuario, cargando en el mejor de los casos 4 megas a la página, porque sí.

Porque nosotros somos así. Pues no. Creo que no es lo mejor. 

Independientemente de la carga en peso y el consumo de recursos, tendemos a poner en el centro del vídeo una llamada a la acción. No se si es cosa mía o qué, pero yo nunca consigo verla.

La vista se me va con el movimiento del vídeo.

Así que a nivel de usabilidad tampoco aporta mucho, desde mi humilde opinión.

Eso no quiere decir que no recomiende los vídeos, pero siempre que sean accionables por el usuario.

Que el usuario tenga que pulsar en él para que se empiece a reproducir. Y a ser posible, optimizado.

No me metas un vídeo de 1 Giga que nos conocemos .

Uso de plugins en un desarrollo web sostenible

Esto viene porque hay veces que lo de los plugins se nos va un poco de las manos y empezamos a instalar plugins a lo loco. 

Pero peor aún es instalar plugins por instalar, o porque me lo recomendó “fulanito de tal” para poner ese efecto que me mola y vi en “aquella web”.

Y resulta que el plugin en cuestión te está cargando 300k para poner un efecto que probablemente lo hubieses hecho con 5 líneas de CSS.

Si te paras un segundo antes de instalar el plugin de “fulanito” y haces una buena búsqueda por Google, seguro que te encuentras un plugin mucho más específico con el que ahorras al menos el 90% del peso del plugin de “fulanito”.

O mejor aún, un tutorial de alguno de los muchos cracks que hay, dónde te explican paso a paso cómo poner esas 5 líneas de CSS y sin perderte en el intento.

Muchas veces me encuentro con la pregunta típica, ¿cuántos plugins debo instalar como máximo? Y no por ser gallego, la respuesta va ser un DEPENDE...

Evita las llamadas externaspara un desarrollo web sostenible

Las llamadas externas las tenemos de todos tipos y todos los colores, pero todas tienen algo en común.

La comunicación no es con nuestro servidor y eso implica un mayor consumo de recursos. 

Ejemplos de llamadas externas típicas:

• Google Analitycs.
• Google Fonts.
• El pixel de Facebook.
• Los típicos chats online.
• Y un largo etc.

Mi primer consejo sería que no usarás ninguna, pero como no vivo en los mundos de Yupi, ya sé que al menos Analitycs vas a poner.

Pero el resto de servicios pregúntate bien si realmente los necesitas. 

Por ejemplo, ¿vas usar realmente el chat online?

Porque si solo lo tienes para consultas esporádicas, igual te llega con poner un botón que habrá WhatsApp Bussines.

Y te ahorras un lote de consumos de recursos increíble. Y seamos realistas, WhatsApp lo tenemos todo el mundo.

Otro caso típico, sino vas a crear una campaña en Facebook Ads, ¿para que pones el píxel de Facebook? Solo para que lo tengas en cuenta y recaiga en tu conciencia su uso.

El píxel de Facebook hace 4 llamadas externas, y por muy optimizadas que estén o asíncronas que sean, el consumo de recursos se hace sí o sí.

Las Google Fonts las podéis descargar y llamarlas desde vuestro servidor.

Pero lo idóneo es usar el mínimo número de fuentes (no más de 2 por dios) y de variaciones de dichas fuentes (o sea, normal y negrita debería llegar).

Pero más importante aún.

Mi consejo, las fuentes configurarlas en el tema a nivel global.

Es cierto que muchos Page Builders (o algún otro plugin) permiten poner fuentes en cada módulo, sección o lo que sea, pero no lo aconsejo.

Por cada fuente que declares se va hacer una llamada externa.

Y eso de óptimo no tiene nada ?.

Podríamos seguir y seguir dándole vueltas a esto, pero espero al menos haberte dejado claro que el uso de estas tecnologías tiene un consumo energético y que en tu conciencia recae como lo uses .

Cachear, minificar y combinarpara un desarrollo web sostenible

Sí, me refiero a los típicos plugins de caché y optimización de WPO.

Esos que instalas porque te lo dicen los SEOexpertos y usas para subir en posiciones en Google. 

Yo aquí te voy a dar más motivos aún para usarlos y configurarlos bien desde el punto de vista ecológico.

Si usas la caché de tu página web correctamente, reducirás el uso de consumos del servidor ya que toda la interpretación de los archivos PHP, las consultas a las bases de datos y todos los recursos que tienes que hacer, se harán una vez y luego se almacenan como si de una web estática se tratará.

A parte que tu hosting te estaría enormemente agradecido .

Minificar el código implica reducir el tamaño de los archivos reduciendo por tanto el peso de la web.

Esto consiste básicamente en quitar los espacios, saltos de línea y comentarios que solemos poner los desarrolladores.

Para que te hagas una idea, puedes reducir el peso de la parte de los archivos CSS y javaScript a la mitad. ¡Casi nada!

Combinar implica unificar los distintos archivos CSS o javaScript que creamos con los distintos plugins y temas (a parte de los que ya trae WordPress en el core) en uno solo (o en unos pocos) de cada clase.

Con ello reducimos el número de consultas al servidor.

Es cierto que con el protocolo HTTP2 esto se ha paliado en cierta manera, ya que las llamadas se hacen paralelas y no afecta tanto a la velocidad de carga.

Pero también es cierto que el consumo de recursos se tiene que hacer sí o sí, así que procura reducir las llamadas todo lo posible. 

En lo de combinar es dónde se suelen encontrar más problemas ya que entran en conflicto el código de muchos plugins, pero siempre hay la opción de excluir de la combinación esos archivos que generan los problemas.

Yo te animo a que combines, probando bien el correcto funcionamiento en modo incógnito (eso sí). 

Conclusión

Páginas web que consumen menos recursos, son páginas web más ecológicas. Espero al menos que eso te haya quedado claro. 

Y también espero que en tu día a día te pares unos segundillos en tener en consideración todas estas cosas de las que te he estado hablando.

No nos cuesta mucho, y con esas pequeñas acciones podemos conseguir el gran objetivo de mejorar el mundo reduciendo las emisiones de CO2.

A parte, que haciendo webs más ecológicas, reducirás el tiempo de carga de tu web y mejorarás en el WPO de tu web.

Otro motivo más ya que eso a Google le mola mucho ?.

Y si quieres ver mi charla a este respecto, ya está disponible en wordpress.tv.

¡Vamos ayudar a crear un mundo mejor!

Por David Viña

Colaborador oficial en ClubWPress.com

Desarrollador web freelance en A Coruña especializado en WordPress >>más info