0

0

可持续网站的并非无用的指南

聖光之護

聖光之護

发布时间:2024-10-18 08:00:23

|

1059人浏览过

|

来源于dev.to

转载

可持续网站的并非无用的指南

让我们闭嘴关于地球,所有的世界末日恐慌,并从为什么你想让你的网站可持续发展开始?您正在构建网站或付费,这对您有什么好处?

更多性能,更好。它将加快您的网站速度,提高您的工作效率,您的访问者会喜欢这个活泼的网站,从而带来更高的转化率,并且谷歌会为您提供 SEO 奖励积分。对于高流量网站,它甚至可以省钱。

哦,是的,这会让地球变得幸福。由于 IT 使用大量能源,因此对地球的影响越来越大。如果我们都出力,我们就能产生巨大的影响。

您不仅在帮助地球。这是一个有效的商业案例。

绿色托管!我用那个吗?

为您的应用程序和网站使用可持续能源会产生巨大影响,因为服务器消耗大量能源并且日夜开启。这是一个很好的起点。

好奇您是否使用可持续能源?绿色网络基金会有一个很棒的工具来检查:绿色网络检查。

如果没有,该基金会也有一个绿色网络目录。在那里您可以找到很多本地和全球的可持续托管提供商。

使用绿色托管我的网站是否可持续?

这是一个很好的开始,但还不止于此。拥有一个资源消耗大的男孩网站将消耗大量能量并且传输缓慢,即使在绿色托管上也是如此。

我们可以进入所有有趣的事情发生的表演部分吗?

优化资产,小就是快

对于很多项目来说,这是您可以发挥巨大作用的地方。资产可能很庞大并且浪费大量带宽和资源。一些提示:

  • 最小化您需要和加载的字体数量,那些受到严重影响的字体(尝试使用最多 3 个,但越少越好)。
  • 尽可能使用 SVG,它们很小并且扩展性很好。
  • 将图像缩放并裁剪为您需要的尺寸,WordPress 等系统具有用于此目的的工具,并且 srcset 属性可以帮助切换尺寸。
  • 使用现代图像和视频格式,例如 WebP 和 WebM/AV1。这些提供了改进的压缩和质量。
  • 延迟加载图片就是使用loading="lazy",只加载你需要的东西。您不再需要任何脚本。
  • 对于视频,仅在确实需要时才使用自动播放。
  • 使用压缩(下一步)并且不要加载不需要的东西:)

跟踪代码管理器用户的奖励:检查您拥有的所有第三方脚本和工具。你用它们吗?你从他们身上得到任何价值吗?定期梳理是必要的。这不仅仅是关于您正在加载的资产,大数据处理需要大量的能量。

快速而小型地提供服务:缓存和压缩

启用压缩。所有现代网络服务器都有它,请确保使用它。像 Brotli 这样的现代选项更好,但即使是 GZIP 或 Deflate 也可以在带宽上产生很大的差异。移动访问者会更加感谢您。

天天团购系统
天天团购系统

天天团购系统是一套强大的开源团购程序,采用PHP+mysql开发,系统内置支付宝、财付通、GOOGLE地图等接口,支持短信发送团购券和实物团购快递发货等;另外可通过Ucenter模块,与网站已有系统无缝整合,实现用户同步注册、登陆、退出。 天天团购系统是一套创新的开源团购程序,拥有多达10项首创功能,同时支持虚拟和实物团购,内置类似淘宝的快递配送体系,并提供强大的抽奖、邀请返利等营销功能,让您轻松

下载

缓存取决于项目,但请尝试缓存尽可能靠近访问者的数据。对于 CSS/JS 等静态资源,您可以从浏览器的适当缓存标头开始,一遍又一遍地重复使用下载的文件。

您是否有一个内容页面的阅读量多于更新量?从磁盘或 CDN 静态提供服务。像 Astro 这样的框架可以静态生成 CDN,或者像 W3 Total Cache 这样的插件可以从磁盘为 WordPress 页面提供服务。

与您的朋友保持亲密关系,但让您的数据更紧密

谈论 CDN。想想你的访客,他们来自哪里?您是否需要一个配备边缘工作人员的全球分布式多区域设置来为您当地的面包店网站提供服务?

可能吧,但那是你内心的极客在享受乐趣。不要过度使用过度杀伤性的解决方案,并使服务器靠近用户。它将节省计算和传输资源,保持较低的延迟。

别用JavaScript了,CSS太棒了!

很多开发人员喜欢编写 JavaScript、制作各种奇特的动画、页面转换和其他恶作剧。不使用普通的 JS 或 CSS,而是使用大型框架或库。其中包括 jQuery。您不需要 jQuery 来获取 DOM 元素并切换类!甚至不让我开始使用 Next.js。

我太激动了,抱歉。老实说,这些网站可能很漂亮。问题是,现在普通的 JS 和 CSS 都很棒。丰富的功能使您能够构建各种炫酷的交互式组件、动画甚至页面转换。

通过使用它们,您可以编写、发布和运行更少的代码。这一切都由您的浏览器处理。动画更流畅,不会阻塞主线程。

你不必让它变得无聊

我看过很多文章谈论使用深色、系统字体,并说你应该放弃所有的小花哨。

这听起来像是一个让生活变得沉闷的公益广告。我不想那样。网站、应用程序、设计、技术应该有趣、鼓舞人心、充满活力。

我并不是说你必须构建没有任何价值、占用大量资源的愚蠢功能,要小心,但不要无聊。

好的,再见。

现在就这样,但这是我感兴趣的话题。期待更多有关具体细节的文章。有任何问题或提示吗?请在 Xwitter 或 LinkedIn 上发表评论或给我发送 DM!

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

556

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

374

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

733

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

477

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

414

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

1011

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

658

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

553

2023.09.20

PS使用蒙版相关教程
PS使用蒙版相关教程

本专题整合了ps使用蒙版相关教程,阅读专题下面的文章了解更多详细内容。

23

2026.01.19

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

CSS教程
CSS教程

共754课时 | 21万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号