En este post vamos a ver una serie de soluciones con el fin de obtener un blog más eficiente energéticamente.
Ya sabemos cómo construir una Web Premium segura, rápida y optimizada para móviles, preparada para el SEO y legal. Ahora es el momento de fijarnos en la huella de carbono de los sitios web. El impacto de carbono (CO2) de la web es causado en gran medida por el uso de electricidad. La pregunta es: ¿cómo podemos nosotros los profesionales de Internet, y que desarrollamos webs (de WordPress), ayudar a que la web sea más eficiente energéticamente?
En este artículo vamos a proporcionarte una lista de las principales cosas que puedes hacer con el fin de reducir al máximo el desperdicio de energía y ayudar a que tu blog (o sitio web) sea lo más eficiente energéticamente posible.
En realidad, una Web Premium, desarrollada con el Método Blogpocket, optimizada en rendimiento y experiencia de usuario, ya es de por sí eficiente energéticamente. Así que lo que leerás en este post son los puntos más importantes que se deben tener en cuenta, dentro del diseño y desarrollo de un blog o un website, a la hora de reducir la huella de carbono debido al gran consumo de energía que se produce.
En Wholegrain Digital se exponen 17 maneras de de hacer que tu sitio web sea más eficiente energéticamente, artículo en el que nos hemos inspirado, aportando nuestra propia visión de las soluciones técnicas. Wholegrain Digital realiza un estupendo trabajo para que tomemos conciencia de que nuestros blogs y sitios web están afectando al cambio climático del planeta. Por ejemplo, son los autores de la calculadora de carbono de sitios web para que midamos la huella de carbono. Por favor, calcula el consumo de CO2 de tu blog o sitio web y si necesitas ayuda para reducirlo contacta con nosotros.
El consumo de energía de un blog o sitio web
Lee la introducción a este problema en Un sitio web sin emisiones de CO2, una pequeña gran contribución ecológica.
Internet, incluidos los centros de datos, las redes de telecomunicaciones y los dispositivos de usuario final, como teléfonos y ordenadores de escritorio y portátiles, utilizan mucha electricidad. De hecho, Internet usa aproximadamente la misma cantidad de electricidad que un país como Reino Unido.
A medida que continuamos consumiendo más y más datos de Internet en nuestra vida diaria, la cantidad de electricidad consumida por Internet está creciendo rápidamente. Puede estar fuera de la vista y fuera de la mente, pero este gran consumo de energía de Internet tiene una enorme huella de carbono, y eso es algo que debemos abordar.
https://www.wholegraindigital.com/bloemeg/website-energy-efficiency/
Jack Lenox y cómo un mejor rendimiento de los sitios web puede ayudar a salvar el planeta
Jack Lenox es el autor del theme de WordPress Susty, en el que nos hemos basado para implementar la plantilla Blogpocket Sustie.
Blogpocket Sustie es un theme de WordPress orientado plenamente a Gutenberg, que hicimos en Blogpocket, especialmente pensado para proporcionar al usuario un folio en blanco con el que diseñar a su gusto la página home del sitio web.
Otro tema de WordPress, esta vez perteneciente al sistema Genesis Framework, made in Blogpocket y también enfocado a Gutenberg, para tener un folio en blanco y poder diseñar la home a tu gusto fue Blogpocket Nineteen. Puedes ver una introducción a Genesis Framework en este vídeo: Introducción a Genesis Framework (Configuración básica en WordPress). Una introducción a Blogpocket Child Theme: Instalación de una plantilla orientada a Gutenberg.
Por favor, mira el siguiente vídeo en el que Jack Lenox explica cómo un mejor rendimiento de los sitios web puede ayudar a salvar el planeta.
En este post de Blogpocket, encontrarás un pequeño conjunto de las mejores herramientas para optimizar WordPress en rendimiento y seguridad: Cómo optimizar WordPress paso a paso – Guía completa.
Las maneras de conseguir un blog más eficiente energéticamente
A continuación, algunas claves importantes -dentro del diseño, contenido y web hosting- para reflexionar y aplicar a tu blog.
1. SEO y Copy Writing
Un beneficio inmediato de la aplicación de las técnicas de SEO a un blog (o sitio web) es que las personas encuentran antes y fácilmente la información, haciendo que pasen menos tiempo navegando por Internet buscando información y ahorrando energía.
Igualmente, el copy writing1 tiene un impacto en la eficiencia energética del sitio web porque afecta a la cantidad de tiempo que las personas pasan navegando por sitios web.
1 El copy writing es la técnica de elaborar textos para webs de una forma persuasiva con el fin de captar la atención del usuario y guiarlo a realizar una acción concreta: suscribirse a una newsletter, agendar una cita, descargar un documento, solicitar un presupuesto, etc. A este efecto se le conoce como conversión, y el objetivo principal de dichas acciones es conseguir ventas (Wikipedia).
Cuanto mejor sea el SEO y el copy writing, menos permanecerá el usuario en Internet y, por lo tanto, existirá menos huella de carbono. Se puede desperciar mucha energía si las personas pasan mucho tiempo en nuestro blog perdiendo el tiempo sin consumir ningún contenido útil y valioso.
Aportación nº 1 de Blogpocket para hacer un blog más eficiente energéticamente
Uno de los pilares de la construcción de una Web Premium, siguiendo el Método Blogpocket, es la preparación on-page para el SEO. La herramienta recomendada, usada en Blogpocket.com, es el plugin de WordPress Yoast SEO y hemos confeccionado un par de guías definitivas para que aprendas tanto a configurarla como a redactar bien contenido para el SEO.
– Cómo configurar Yoast SEO con un clic (para principiantes e impacientes)
– Cómo redactar contenido para SEO con el plugin de Yoast
Si necesitas un curso exprés de SEO: curso de SEO. Y más información: SEO para WordPress: descarga ahora libremente mi ebook.
2. Experiencia del usuario (UX)
Las personas deben poder encontrar encontrar la información y realizar las acciones que necesitan tomar de la mejor manera posible (rápida y fácilmente). Eso, más o menos, es la experiencia de usuario (UX)1.
1 La experiencia de usuario es el conjunto de factores y elementos relativos a la interacción del usuario con un entorno o dispositivo concretos, dando como resultado una percepción positiva o negativa de dicho servicio, producto o dispositivo. Esta depende no solo de los factores relativos al diseño (hardware, software, usabilidad, diseño de interacción, accesibilidad, diseño gráfico y visual, calidad de los contenidos, buscabilidad o encontrabilidad, utilidad, etc) sino de aspectos relativos a las emociones, sentimientos, construcción y transmisión de la marca, confiabilidad del producto, etc.
La experiencia de usuario como disciplina se aplicó tradicionalmente a los sistemas informáticos y en particular al diseño de páginas web pero hoy se ve ampliada a otros campos. La razón es que, una vez tomados como una «experiencia» casi cualquier producto o servicio, éstos comienzan a «diseñarse» buscando la máxima satisfacción del consumidor. Este es ahora visto como un «usuario» que transita dichas experiencias. (Wikipedia)
Si una buena experiencia del usuario significa un uso de Internet más fácil y ágil, entonces eso redundará también en reducir la cantidad de energía desperdiciada al navegar por páginas que no están bien hechas.
Aportación nº 2 de Blogpocket para hacer un blog más eficiente energéticamente
La filosofía de Blogpocket se basa en dos principios: métodos sencillos y herramientas plug&play.
En el diseño, recomendamos una serie de buenas prácticas para evitar el uso de elementos innecesarios y superfluos, del estilo de sliders y código incrustado (vídeos, wigdets, etc.)
En el contenido, la era post-Gutenberg nos ofrece la posibilidad de generar contenidos optimizados en experiencia de usuario.
3. Imágenes
Dentro de los elementos que más impactan negativamente en el rendimiento de una página web se encuentran las imágenes.
Cuantas más imágenes tengas en tu blog (o website) y más KBs posean esos archivos de imagen, más datos deben transferirse y más energía se usa. Es muy importante, que los diseñadores y creadores de contenido se planteen si verdaderamente es necesario el uso de imágenes. Como veremos, más adelante, los archivos de imágenes se pueden se deben optimizar1. Pero, primero, considera atentamente si son necesarios o no.
1 Algunas recomendaciones para reducir el peso de las imágenes.
– Carga imágenes en la escala correcta, en lugar de dejar en manos del CSS el cambio de su tamaño, y evita imágenes que sean más grandes que la escala en la que se mostrarán. Este «error» lo avisa GTMetrix y solo debes crear un nuevo archivo de imagen con las dimensiones correctas. Ayúdate de Canva.com si lo necesitas.
– Usa la herramienta Squoosh.app para redimensionar, optimizar y convertir a otro formatos.
– Hay plugins de WordPress (EWWW Image Optimizer) para optimizar a la vez que se suben las imágenes. Considera solo su uso si no estás en SiteGround.
– Utiliza el formato de archivo más eficiente en cada caso (png, svg, WepP, etc.).
– Usa la carga retardada de imágenes (lacy load). Si no estás en SiteGround, puedes usar un plugin de WordPress.
Ten en cuenta que WordPress ya optimiza el peso de las imágenes por sí mismo, por lo que probablemente no necesites ningún plugin ni aplicación para reducir el número de KBs del archivo previamente. Si estás en un hosting verde como SiteGround, tendrás un sistema de almacenamiento en caché propio y herramientas de optimización automática de las imágenes. En caso de que tu hosting no proporcione recursos de optimización automática de imágenes, y el resultado de la reducción de peso de WordPress no sea suficiente, prueba el plugin GreenerWP o recurre a una optimización previa con Squoosh.app por ejemplo. Lee nuestra Súper Guía de optimización de imágenes para más información.
Hay que encontrar el equilibrio entre reducir el peso de las imágenes lo máximo posible y no empeorar demasiado la experiencia del usuario. Eso ayudará a reducir el consumo de CO2.
Aportación nº 3 de Blogpocket para blog más eficiente energéticamente
WordPress automatiza la optimización de imágenes.
En el servicio de hosting que recomendamos, SiteGround; se instala automáticamente -para cualquier instalación de WordPress- el plugin SG Optimizer que permite optimizar los archivos de imágenes sin ninguna acción por parte del diseñador ni del creador del contenido. Atento al formato WebP.
Lee nuestra guía definitiva sobre la optimización de imágenes: Cómo optimizar imágenes para WordPress– La Súper Guía
4. Vídeos
Junto con las imágenes, estamos ante un elemento que deja mucha huella de carbono. En el caso de los vídeos, tenemos además un problema añadido: las cookies.
Hay algunas maneras de evitar el uso del vídeo1, sobre todo incrustando el código correspondiente. Piénsalo muy bien antes de añadir un vídeo a tu blog o sitio web.
Aportación nº 4 de Blogpocket para hacer un blog más eficiente energéticamente
1 En Blogpocket hemos evitado el uso directo del vídeo, como manera de reducir el consumo de energía y optimizar el rendimiento. Y lo hemos hecho con los siguientes hacks:
– Uso de vídeo-popups. Este mecanismo solo muestra el vídeo si se hace clic en el banner correspondiente. Cuando se hace clic en el banner, se abre el vídeo en una ventana pop-up. Si pretendes bloquear las cookies antes de que el usuario dé su permiso para usarlas, probablemente no lo consigas si estableces un vídeo-popup.
– Uso de un banner enlazado al vídeo. Es la manera más fácil y que menos impacta en la huella de carbono y el rendimiento. Inserta una pequeña imagen optimizada enlazada a la página externa con el vídeo (YouTube, Vimeo, etc.)
5. Elige las fuentes con cuidado
A nivel de diseño, el uso de fuentes externas es un problema, tanto para el rendimiento como para el ahorro de energía. Hay algunas cosas que puedes hacer1 para reducir la huella de carbono usando fuentes tipográficas.
1 Esto es lo que puedes hacer:
Utiliza las fuentes del sistema cuando sea posible. Seguramente no son tan bonitas, pero Arial y Times New Roman se pueden usar sin cargar ningún archivo de fuentes externo.
Usa menos variaciones de fuente. Puede sentir la necesidad de usar fuentes web personalizadas, pero trata de economizar la cantidad de tipos de letra y en la cantidad de diferentes pesos para cada tipo de letra.
No se trata de diseñar una web espartana sino de equilibrar lo bonito con la experiencia de usuario, el rendimiento y la velocidad de carga; y, por supuesto, con la energía necesaria.
Aportación nº 5 de Blogpocket para hacer un blog más eficiente energéticamente
Si optas por no usar fuentes del sistema, como es el caso de Blogpocket.com, debes cargar las fuentes de Google de manera manual. Al no usar, así, una URL externa para cargar la tipografía, se reduce drásticamente la velocidad de carga y se optimiza el rendimiento. Lo verás reflejado inmediatamente en GTMetrix. Hemos elaborado la siguiente guía definitiva para que aprendas a hacerlo.
6. Escribir código limpio y usar menos javascript
A nivel de desarrollo, evita themes, plugins, widgets y aplicaciones externas que embarullen y compliquen la ejecución normal de WordPress.
Aquí también, como en el caso del diseño, la perfección no se logra cuando no hay nada más que añadir, sino cuando no hay nada mas que eliminar.
Aportación nº 6 de Blogpocket para hacer un blog más eficiente energéticamente
Queremos unos pocos plugins que hagan las cosas bien, que requieran poca configuración y que no interfieran unos contra otros. Mira mi lista de plugins imprescindibles.
Necesitamos temas que estén bien codificados, seguros y preparados para el SEO. Nuestra recomendación es usar un tema de bloques o, en caso de que tu opción sea un tema clásico, el tema Blocksy o Genesis Framework (ve una introducción en el apartado de Jack Lenox).
Apostamos por estructuras de blogs y webs minimalistas, sin distracciones para el usuario; eliminando todo tipo de elementos inútiles: sidebar, sliders, pop-ups, banners, etc. etc.: 7 Errores de tu blog frecuentes… ¡y cómo corregirlos!
Wholegrain Digital nos recuerda que el nuevo inspector web en Safari tiene una herramienta útil para ayudar a evaluar el impacto energético de una página web en el dispositivo del usuario final, y este artículo de los desarrolladores de WebKit de Apple proporciona algunos consejos detallados.
7. Crea páginas web estáticas
WordPress genera páginas dinámicas, muy lejos de una optimización de base que permita ahorrar energía de pronto. El contenido se crea en el servidor utilizando bases de datos y programación PHP embebido dentro del HTML de las páginas que se interpretan en el navegador del usuario.
Todo eso te puede sonar muy técnico pero lo bueno es que puedes optimizarlo, casi plug&play, con diversas técnicas que empiezan en tu servicio de hosting (como veremos un poco después) y terminan en tu instalación de WordPress ajustando diversos parámetros en la configuración WPO (ver apartados anteriores).
Si eres desarrollador, sabrás tirar líneas de código limpias y optimizadas, preparando themes, plugins y scripts que ahorren energía. Pero si eres administrador o propietario, freelance o emprendedor, de un blog (o sitio web), quizá sea suficiente con aplicar el Método Blogpocket en un Top Hosting, del estilo de SiteGround.
Aportación nº 8 de Blogpocket para hacer un blog más eficiente energéticamente
En el laboratorio de Blogpocket hemos realizado un número elevado de pruebas, testeando diversas plataformas de publicación de blogs con páginas estáticas.
Hemos determinado, así, una solución muy interesante para obtener blogs con páginas estáticas:
– Cómo tener un blog con GitHub y Jekyll, fácilmente y en dos minutos
Otro caso de publicación de blogs sin WordPress recomendable es Postach.io:
– Crea un blog con Postach.io y Evernote
8P. Usa el almacenamiento en caché del servidor
Esto no es negociable a la hora de elegir un servicio de alojamiento web: el hosting en el que se vaya a alojar tu blog (o sitio web) debe poseer un sistema de almacenamiento en caché propio. Debes saber que, en WordPress, las páginas se generan dinámicamente cada vez que alguien visita una página web. Esto es muy ineficiente, ya que requiere procesar en el servidor cada vista de la página, lo que aumenta el consumo de energía del servidor web.
Aportación nº 9 de Blogpocket para hacer un blog más eficiente energéticamente
SiteGround posee una infraestructura hardware y software que optimiza de por sí el funcionamiento de la plataforma WordPress. Especialmente, SuperCacher, su sistema de almacenamiento en caché propio logra optimizar el rendimiento al máximo y no es necesario ningún plugin de caché adicional.
Otro hosting verde recomendable es GreenGeeks, también con sistema de almacenamiento en caché propio (LiteSpeed).
Blogpocket.com está alojado en GreeGeeks y tiene la configuración WPO óptima realizada dentro del plugin LiteSpeed.
¿Cómo actuar si estás en otro hosting? Primero, averigua si posee un sistema de almacenamiento en caché propio. Si no lo tiene, prueba el nivel de optimización del rendimiento del WPO Pack, ideado en Blogpocket: plugins Autoptimize y Cache Enabler. Si no es suficiente, instala el plugin A2 Optimized que incluye un asistente de optimización del rendimiento basado en W3 Total Cache. Revisa el asistente del plugin GreenerWP para ver si tienes implementadas todas las medidas de optimización del rendimiento y consecución de una web sostenible.
9. Use un centro de datos cerca de sus usuarios y un CDN (opcional)
Imagina que tus usuarios residen mayoritariamente en España y tu web la alojas en un datacenter ubicado en EE.UU. Lógicamente, los deberán cruzar el Atlántico y transmitirlos por las redes de telecomunicaciones gasta energía. Cuanto más cerca estén tus usuarios de tu servidor, mejor.
Pero ¿qué sucede si tienes usuarios distribuidos por todo el mundo? Usar un CDN (Content Delivery Network)1 ayuda a optimizar tanto el rendmiento como la seguridad, porque se sirven los datos desde los nodos más cercanos al equipo local que solicita la información.
1 Una red de distribución de contenidos (CDN, content delivery network en inglés) es una red superpuesta de computadoras que contienen copias de datos, colocados en varios puntos de una red con el fin de maximizar el ancho de banda para el acceso a los datos de clientes por la red. Un cliente accede a una copia de la información cerca del cliente,? en contraposición a todos los clientes que acceden al mismo servidor central, a fin de evitar embudos cerca de ese servidor. (Wikipedia).
Como siempre, en Blogpocket aportamos la solución para que tu blog sea más eficiente energéticamente.
Aportación nº 10 de Blogpocket para hacer un blog más eficiente energéticamente
Blogpocket.com no está actualmente conectado a ningún CDN y aún así responde a una optimización del rendimiento, estructura y core vitals del 100%.
Si fuese necesario, conecta tu sitio web a un CDN como CLoudflare:
– Velocidad y seguridad de tu blog: cómo mejorar con CloudFlare.
Ahora ya sabes, optimizar la huella de carbono de tu blog o sitio web. Al menos, aquellos factores fundamentales.
Bonus
Aún hay algunas cosas más que puedes considerar.
- Utiliza la tecnología Progressive Web App (PWA). Sin duda, sería maravilloso poder convertir Blogpocket.com a PWA. Aquí está la información al respecto: Cómo la creación de una aplicación web progresiva ha mejorado nuestro sitio web para las personas y el planeta.
- Elige anfitriones con una alta calificación PUE. Los centros de datos generalmente se clasifican para la eficiencia energética utilizando una métrica llamada Eficiencia de uso de energía, o PUE. ¿Cuál es el PUE de los datacenter de tu hosting?
- Bloquear bots. Akshat Choudhary de BlogVault sugirió que bloquear los bots podría reducir el consumo de energía. Dijo que “los bots a menudo usan hasta el 50% de los recursos, como el procesamiento y el ancho de banda. » (fuente: https://www.wholegraindigital.com/blog/website-energy-efficiency/).
- Modo oscuro. Con la llegada de las pantallas OLED que iluminan cada píxel individualmente, usar colores más oscuros es un modo eficiente de reducir la energía.
- Usa la última versión de PHP. Las versiones más nuevas de PHP no solo son más rápidas sino que también usan menos recursos del servidor y, por lo tanto, menos energía. En SiteGround puedes actualizar a la última versión de PHP con un clic.
Conclusiones para hacer tu blog más eficiente energéticamente.
Ahora posees toda la información para conseguir un blog más eficiente energéticamente. Ahorrar huella de CO2 y ahorrar energía en tu web es posible y muy sencillo aplicando todo lo visto en este artículo.
Dime, por favor, cuál es la huella de carbono de tu blog o website y si aplicas algunas de las técnicas que hemos revisado aquí.
Si necesitas ayuda o tienes alguna inquietud, duda o pregunta sobre el tema, háznoslo saber.
Deja una respuesta