A not useless guide to sustainable websites

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

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

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

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

绿色托管！我用那个吗？

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

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

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

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

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

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

优化资产，小就是快

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

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

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

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

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

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

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

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

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

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

别用JavaScript了，CSS太棒了！

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

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

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

You don’t have to make it boring

I’ve seen a lot of articles talking about using dark colours, system fonts and saying you should drop every little bell or whistle.

That sounds like a public service announcement to make life dull. I don’t want that. Websites, apps, design, tech, should be fun, inspiring, alive.

I’m not saying you have to build stupid features without any value that uses a lot of resources, be mindful, but don’t be boring.

Okay, bye.

That’s it for now, but it is a topic that interests me. Expect more articles about the nitty gritty details. Any questions or tips? Please drop a comment or send me a DM on Xwitter or LinkedIn!

The above is the detailed content of A not useless guide to sustainable websites. For more information, please follow other related articles on the PHP Chinese website!