减少网页能源消耗的技巧

Tips to Make Your Ecommerce Website More Sustainable

全球约 10% 的总用电量是通过互联网消耗的,为了强调一点,2012 年这一比例为 8%! (来源:瑞典KTH) 来自不同国家的新用户的涌入预计将在未来5年内通过网站使能源消耗增加三倍! (来源:Userzoom)很抱歉让你们的泡沫破灭了,但运行一个网站可能不像你的汽车消耗汽油那么有害,但它会占世界能源消耗的很大一部分。

什么是的简单答案进行中;数据!互联网上有数百个网站,我们每分钟都在产生海量的数据。每一次搜索、每一次点击、每一个视频流、每张在您的网站上打开的照片都会设置多个服务器来工作,从而产生连锁反应!

作为网站所有者,您必须明白,任何网站若要降低其能耗,就必须对其进行完美优化以减少加载时间!在设计有助于降低网站能耗的网站时,请牢记以下几点:


通过网站作为商家的可持续能源消耗

可发现性

您越容易做到人们找到你的网站,消耗的能量越少。如果您的用户必须浏览多个页面,服务器请求的数量将会增加,这反过来会消耗更多的能量!可发现性在工作的服务器数量中起着重要作用,您的用户必须跳过的圈数越多才能到达所需的页面,消耗的能量就越多!出色的用户体验可以让所有人更轻松、更愉快地使用网络,并减少导航到与试图解读用户下一步应该做什么无关的页面所浪费的能量。


你能做什么?

  • 清楚地标记您的菜单,使它们易于导航
  • 在菜单中为类别和子类别提供正确的标题
  • 使用动态搜索框减少用户移动,让搜索更容易
  • 利用丰富的内容优化您网站的每个页面,以便在 Google 搜索中排名靠前
  • 清除网页上的 404 错误

性能

高效运行的网站将使用更少的能源并减少在其上工作的服务器数量!任何滞后,任何停机时间,任何问题,最终都会减慢您的网站消耗更多精力。我们都遇到过网站加载时间过长或某些部分加载而其他部分没有加载的问题。不断刷新并试图让网站打开是性能故障,最好的办法是通过改进 SEO 和 UX 来降低页面加载速度。


你能做什么?

  • 减少您网站上的重定向次数
  • 减少插件的数量,因为它们会降低整个网站的速度
  • 运行定期审核以评估能源消耗
  • 为用户启用浏览器缓存功能,避免每次访问您的网站时都重新下载页面
  • 通过加速的移动页面在移动访问者中使用精简、快速加载的网站版本
  • 从网站中移除阻止渲染的 JavaScript 以减少运行脚本所花费的时间
  • 通过淘汰缓慢的数据库查询、缓慢的路由、内存不足等来提高服务器响应时间
  • 使用 HTTP/2 通过单个 TCP 连接异步发送和接收 HTTP 请求和响应
  • 使用预取在需要资源和相关数据之前获取它们。
  • 在将内容发布到网站之前压缩内容

缩小

缩小只不过是从代码中删除不必要的字符以减小文件大小以提高速度、提高可访问性并为用户创建更好的用户体验。这些包括空格、换行符、注释和块分隔符,它们对我们人类有用但对机器不必要.


你能做什么?

  • 去掉空格,和发展中使用的注释
  • 压缩变量名称以最小化代码并减小文件大小
  • 使用内容交付网络 (CDN) 进行自动缩小并减少手动缩小负载
  • 对数千行代码使用压缩工具,避免人为错误
  • 尽可能使用包含缩小选项的缓存插件

字体
Web 字体可以增强视觉吸引力,但会显着增加使用它们的网站的文件重量。 Webfonts 允许文本是可选择的、可搜索的和可缩放的,同时无论屏幕大小和分辨率如何都能提供一致且清晰的渲染,但是每种字体都是用户在访问您的站点时必须下载的额外资源,这会增加时间您的网站需要加载。单个字体文件可能高达 250kb,这仅适用于标准重量!粗体和其他文本格式增加了额外的权重。文件越大,消耗的能量越多!


你能做什么?

  • 使用 Arial 和 Times New Roman 等系统字体,无需加载任何字体文件即可使用,因为它们已经在用户设备上
  • 使用较少的字体变体(例如粗体和斜体)来限制每种字体不同粗细的数量
  • 使用子集字体资源仅提供特定页面所需的字符
  • 检查 Google Analytics 以识别最受用户欢迎的浏览器和设备,并根据这些浏览器使用优化的字体格式
  • 使用 local() 检查字体是否已经在用户的系统上,以确保不会发出额外的 HTTP 请求

图片
任何电子商务网站的唯一目的都是向其用户销售商品。由于网站数量众多,总有两个网站销售类似产品或服务的机会。在这里,页面加载速度将使您的网站在搜索结果中排名更高。网站上的图像越多,需要传输的数据就越多,您的网站就越慢。您的网站越慢,使用的能源就越多。无论任何技术优化如何,都尝试结合降低能耗的方法:


你能做什么?

  • 为每个图像使用有效的文件格式,例如 WebP 而不是 JPEG
  • 减少用户看不到的图像,例如轮播中的图像
  • 为网站优化图片以减少负载
  • 根据用户的设备对适当大小的图像文件使用条件逻辑
  • 保持图像的标准分辨率
  • 使用 CSS3 方法将图像替换为渐变和阴影,以创建视觉上吸引人的效果
  • 为徽标和阴影区域使用矢量图形或 CSS


视频
最近流行的趋势是,视频是数据密集型和处理密集型的内容形式。网络用户喜欢高分辨率视频,但如果您的网站没有得到足够的优化并因此而变慢,这可能会导致性能问题。这些性能问题进一步占用了更多服务器,这反过来又消耗了更多能量!


你能做什么?

  • 尝试通过从视频中删除自动播放来减少视频流的数量
  • 保持视频内容简短和相关
  • 使用嵌入式视频,而不是在您的网站上本地运行它们
  • 使用数据压缩工具在不降低图像质量的情况下减小视频文件的大小
  • 将视频文件转换为 HTML5 格式,例如 MP4 和 WebM,以减少加载时间
  • 分析您的网站是否真的需要视频


后端技术栈
后端技术栈是为网站服务的以确保最节能的版本!如果您使用的是旧服务器,这将增加加载时间,从而增加能源使用量!


你能做什么?

  • 探索更新的 PHP 版本,它们不仅速度更快,而且使用的服务器资源更少,因此能耗更低
  • 使用 Node 和 Ruby 等服务器来减少我们在网页上的能耗
  • 探索为在线企业提供托管、存储、计算和其他解决方案以优化网站的虚拟专用服务器


网络节能的先驱公司

这似乎是一项任务,但是,一切都不会丢失!为减少网站对环境的影响,您可以做的最重要的事情是使用可再生能源为其提供动力,在过去几年中,主要科技公司已经敞开大门,为可持续能源使用铺平道路,并正在引入多次更改。


这里有两家公司向我们展示了它是如何完成的:


谷歌:
截至 2017 年,谷歌 100% 使用可再生能源,是全球最大的绿色能源企业买家!


Shopify:
Shopify 可持续发展基金致力于通过减少碳负承诺、创建碳中和平台以及从事碳中和运营!

Marmeto 对能源消耗的贡献:
作为多家 Shopify 商家的技术解决方案提供商,我们不断优化和努力为我们的商家减少未来问题的解决方案。作为专门的 Shopify 解决方案提供商,我们完全同意绿色倡议和实践,并强调为我们的客户提供节能方法。


测量网站能耗的工具
如果您要测量网站的能耗,请查看以下工具:

  • 移动效率指数,用于衡量网站或应用程序在真实移动设备上的能耗。
  • Greenspector 启动测试并测量能耗。
  • 网站碳计算器,了解零碳互联网。


结论
各种形式的能量是人类生活中最重要的方面之一。它是我们的动力和驱动力。是时候让我们站出来为我们的工作负责了!是时候让旧的工作方式休息并随着时间的需要而发展了!能源消耗是前进的唯一途径!
您的网站越环保,从长远来看对您越有利!

我们正在尽自己的一份力,你呢?

Get In touch