讲师中心 微信公众号

工具推荐

视频效率加速
AniShort
AniShort

AI短剧协同制作平台

Seko
Seko

AI短剧一键生成成片

Laper
Laper

剧本策划到成片协作

剧云
剧云

中文短剧剧本制作平台

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

千雪吖_7503

千雪吖_7503

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

|

1059人浏览过

|

来源于dev.to

转载

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

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

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

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

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

绿色托管!我用那个吗?

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

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

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

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

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

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

优化资产,小就是快

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

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

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

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

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

CSS
CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面,查看 CSS 标准、学习资料与工作组动态;CSS 是 Web 标准,无需下载安装。

下载

缓存取决于项目,但请尝试缓存尽可能靠近访问者的数据。对于 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!

热门AI工具

更多
Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

讯飞智文

一款面向学习和办公场景的AI文档创作工具,可辅助生成PPT与Word文档,提高资料整理和内容制作效率。

花生AI
花生AI Hot

一款AI视频创作工具,主要用于B站推出的AI视频创作工具,适合需要提升相关任务效率的用户。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

函子Zion

一款支持AI搭建、可视化编辑和多端发布的全栈无代码开发平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

相关专题

更多
什么是分布式
什么是分布式

分布式是一种计算和数据处理的方式,将计算任务或数据分散到多个计算机或节点中进行处理。本专题为大家提供分布式相关的文章、下载、课程内容,供大家免费下载体验。

2193

2023.08.11

分布式和微服务的区别
分布式和微服务的区别

分布式和微服务的区别在定义和概念、设计思想、粒度和复杂性、服务边界和自治性、技术栈和部署方式等。本专题为大家提供分布式和微服务相关的文章、下载、课程内容,供大家免费下载体验。

3654

2023.10.07

jquery插件有哪些
jquery插件有哪些

jquery插件有jQuery UI、jQuery Validate、jQuery DataTables、jQuery Slick、jQuery LazyLoad、jQuery Countdown、jQuery Lightbox、jQuery FullCalendar、jQuery Chosen和jQuery EasyUI等。本专题为大家提供jquery插件相关的文章、下载、课程内容,供大家免费下载体验。

621

2023.09.12

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

1256

2023.10.13

jquery删除元素的方法
jquery删除元素的方法

jquery可以通过.remove() 方法、 .detach() 方法、.empty() 方法、.unwrap() 方法、.replaceWith() 方法、.html('') 方法和.hide() 方法来删除元素。更多关于jquery相关的问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

2342

2023.11.10

jQuery hover()方法的使用
jQuery hover()方法的使用

hover()是jQuery中一个常用的方法,它用于绑定两个事件处理函数,这两个函数将在鼠标指针进入和离开匹配的元素时执行。想了解更多hover()的相关内容,可以阅读本专题下面的文章。

2168

2023.12.04

jquery实现分页方法
jquery实现分页方法

在jQuery中实现分页可以使用插件或者自定义实现。想了解更多jquery分页的相关内容,可以阅读本专题下面的文章。

513

2023.12.06

jquery中隐藏元素是什么
jquery中隐藏元素是什么

jquery中隐藏元素是非常重要的一个概念,在使用jquery隐藏元素之前,需要先了解css样式中关于元素隐藏的属性,比如display、visibility、opacity等属性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

337

2024.02.23

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

80

2026.11.06

热门下载

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

精品课程

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn