全栈开发人员减少碳足迹的 12 种方法
尽量减少二氧化碳排放
诺亚·布舍尔(Noah Buscher)在Unsplash上拍摄的照片
最近,我们在Dynamo做了一个关于数字可持续性的有趣演讲,这让我思考作为一名全栈开发人员,如何在日常工作中减少我的生态足迹。这启发了我写下这篇文章。
定义生态足迹最简单的方法是将其称为人类活动的影响,以生产消费品和吸收产生的废物所需的生物生产性土地和水域面积来衡量。更简单地说,它是生产维持特定生活方式所需的商品和服务所需的环境量。——
世界自然基金会
你知道吗?预计到2040年,IT行业的温室气体排放量将占全球排放量的14%。如果把互联网比作一个国家,它将成为全球第七大污染源。这真是令人印象深刻,不是吗?
回顾我职业生涯中用于优化 Web 应用、电商和门户项目的所有方法,我得出的结论是:应用程序加载速度越轻、越快,其能耗效率就越高。以下是一些您可以在下一个项目中借鉴的建议。
措施
您可以使用WebsiteCarbon.com等工具来衡量您的网站的环保程度。此外,您还可以使用DevTools 上 Safari 的 Lighthouse来衡量其能源影响。然后,请参考以下建议制定应对计划,以解决可能出现的问题。
选择可再生能源主机提供商
主机提供商和数据中心可能看起来耗电不多,但它们拥有数千台计算机来处理数据,房间内温度很高。它们需要保持空气凉爽,因此空调系统对这个行业来说必不可少,而这些系统会消耗大量能源。
绿色网络基金会 (Green Web Foundation)做了出色的工作,列出了全球最环保的主机提供商。不妨考虑选择其中一家,用于你的下一个项目。
不使用守护进程和服务器时停止它们
开发人员编写应用程序时,通常需要在本地机器上运行多个进程,以便测试并避免应用程序的上线版本崩溃。然而,他们最终会切换项目,忘记停止一些后台进程。结果,这些进程一直运行,或者直到有人注意到内存或处理能力的消耗过高。
通过停止未使用的服务器和后台进程,您可以大幅(取决于进程类型)减少内存、处理和电力消耗。
使用黑暗模式
如果您使用的操作系统支持深色模式,或者您的应用允许您切换主题颜色,请考虑使用深色模式。深色更护眼,还能节省智能手机和笔记本电脑的电量。
关闭相机
在这段艰难时期,每个人都在使用 Google Meets、MS Teams 和 Zoom 等工具进行在线会议。这种行为已经成为我们日常生活的一部分。
研究表明,一小时的视频通话或Netflix流媒体播放会排放150至1000克二氧化碳。在视频通话期间关闭摄像头,可以减少96%的碳足迹。
优化字体
通过优化字体文件,您可以将文件大小减少多达 97%。
-
使用现代网络字体格式,例如 WOFF 和 WOFF2。与 TTF、OFT 和 SVG 文件格式相比,这些格式采用更高的压缩方法。
-
通过预加载所需字体,让浏览器有最大的机会获得正确的字体。
-
对字体进行子集设置,使其仅包含所需的字符。
使用靠近用户的 CDN 和服务器
使用更靠近用户的 CDN 和服务器将减少电信网络上的流量,从而大大降低其基础设施的能耗。
使用 AMP(加速移动页面)
AMP通过删除不必要的代码和文件重量,使内容在移动设备上加载速度更快,从而呈现原始网页的简约版本。
使用静态网页
使用像 WordPress 这样的服务器端渲染解决方案,每次用户尝试加载页面时,都会处理返回给用户的信息。这会导致服务器消耗更多电量。您可以使用静态生成器工具来分发内容,这样就无需每次页面浏览都从数据库获取数据。您还可以通过在客户端使用缓存来进一步优化。
不要使用 GIF
GIF 动画很有趣,但它们会显著增大文件大小,消耗大量流量和能源。好消息是,你可以用<video>
元素来替代它们。
<video autoplay loop muted playsinline>
<source src="/saving-energy.webm" type="video/webm">
<source src="/saving-energy.mp4" type="video/mp4">
</video>
注意:标签的顺序<source>
很重要!请先指定 WebM <source>
,否则浏览器将跳过它并播放 mp4 版本。
使用 DevTools 中的“Lighthouse”选项卡,检查您的网站上是否有可转换为视频的 GIF。如果您有任何可转换的 GIF,您应该会在报告中看到“使用视频格式制作动画内容”的建议。
优化图像
图片是页面重量的最大来源。使用的图片文件越大,需要传输的数据就越多,耗电量也就越大。您可以使用一些技巧和工具来解决这个问题。
使用 WebP 格式
WebP 图片比 JPEG 和 PNG 图片更小,通常文件大小可减少 25% 到 35%。这可以减少页面大小并提升性能。使用以下方法,即使浏览器不支持 WebP,也能确保其渲染正确的图片。
<!--
The browser uses the first listed source that's in
a format it supports. If the browser does not support
any of the formats listed in the <source> tags, it
falls back to loading the image specified by the <img> tag.
-->
<picture>
<source type="image/webp" srcset="green-environment.webp">
<source type="image/jpeg" srcset="green-environment.jpg">
<img src="green-environment.jpg" alt="">
</picture>
延迟加载图像
原生支持!目前最流行的 Chromium 浏览器(Chrome、Edge、Opera)和 Firefox 都支持loading
图像元素的该属性。Safari 的实现正在进行中。您也可以访问caniuse.com查看此功能的可用性。不支持该loading
属性的浏览器会直接忽略它,不会产生任何副作用。
<img src="image.png" loading="lazy" alt="…" width="200" height="200"/>
查看MDN 文档中有关延迟加载属性的更多详细信息。
图像优化工具
您可以使用TinyPNG、TinyJPG、SvgHero和ShortPixel等工具。您还可以使用image-webpack-loader、gulp-imagemin或grunt-contrib-imagemin等软件包。
停止使用 Google 搜索
艺术家乔安娜·莫尔(Joana Moll)**创建了 一个**项目,用户可以从访问该网站开始知道通过谷歌搜索排放了多少公斤的二氧化碳。
谷歌有一个不错的替代品:Ecosia搜索引擎!Ecosia 不仅是一个环保的搜索引擎,而且还注重隐私保护。
结论
减少技术足迹不仅仅意味着减少能源消耗,更是一个双赢的游戏!
-
公司可以优化其资源消耗和成本
-
更快、更轻的应用让用户获得更好的体验
-
环境污染将大幅度减少。
你还知道哪些更环保的小窍门?欢迎在评论区分享!