Web 性能对于可持续性非常重要。我们传输的内容越少越好。我们还可以做很多工作来优化内容与浏览器的协同工作方式,以便最终用户尽快获得信息。
正如之前的文章 Green LAMP 和 Lean Wordpress 中讨论的那样,在服务器级别可以做很多事情来加速您的站点。但是,内容管理系统 (CMS) 可以很好地控制什么以及何时将代码呈现到屏幕上。最终,您希望尽快呈现您的主要内容,以便浏览器可以尽快呈现它。
在本文中,我将重点介绍开源 CMS Drupal,它驱动了大约 12% 的 CMS 市场。
(注意:Wordpress 有插件,而 Drupal 有模块。)
- 删除不必要的 HTML,通过使用 Fences 模块来帮助页面更快加载。要将更改为更轻的标记,请复制任何随 Fences 提供的模板 (*.tpl.php) 文件,并将其添加到您的自定义主题中。您还可以创建自己的 Fences 样式的 *.tpl.php 文件,并通过使用 fences 命名约定将其放置在您的主题中。Fences 将自动找到它们,并将它们添加到字段配置的下拉列表中。
- 通过启用 Advanced CSS/JS Aggregation (AddAgg) 模块,进一步聚合和压缩您的 CSS 和 Javascript。Drupal Core 自带的默认压缩/聚合代码还可以,但是此模块中有很多改进,可以进一步提高页面加载速度。这个 StackExchange 回答包含了一个关于如何使用 AddAgg 将 JavaScript 和 CSS 移动到页面页脚的很好的解释。在 Drupal 8 中,Javascript 默认在页脚中运行。此模块还允许站点使用 Google 的内容分发网络 (CDN) 来加载 jQuery。如果浏览器已经从 CDN 加载了 javascript 文件,它将只使用其缓存的文件,而不是再次下载它。有很多压缩代码的算法,Google's Closure Compiler 可以被 minify 或 Speedy 模块使用,以减小 JavaScript 的大小。
- 使用 Drupal Core 的 ImageCache 模块向您的访问者交付更小的图像。这对于浏览器呈现更小图像的移动设备尤其重要。Picture 模块是 Drupal 8 响应式图像显示格式化器的反向移植,它允许管理员通过将图像样式与 CSS 媒体查询配对来优化不同设备和分辨率的图像。如果大图像没有优化,页面加载速度会变慢。像 TinyPNG 这样的工具可以用来在将图像上传到您的站点之前减小图像大小。Lazy Loader 模块可以为您提供提升,通过延迟加载视口之外的图像。图像只有在用户滚动到它们时才会被加载,这既提高了页面速度,又减少了传输的总字节数,因为大多数人不会滚动到每个页面的底部。这对于图像密集型站点最有用。使用标量矢量图形 (SVG) 而不是 PNG 或 GIF,在可以减小文件大小的情况下。SVG 文件通常非常小,它们可以内联写入 HTML5 和 CSS 文件中,并且它们可以缩放而不会失去清晰度。这允许您在手机上和在桌面上使用相同的图像。Drupal 8 正在 用 SVG 文件替换其许多 PNG 文件 以达到此目的。
- 禁用不必要和未使用的模块。 有些模块像 Devel,无论如何都不应该在生产站点上启用,因为性能原因。Drupal 的统计模块也会减慢页面速度,因为它需要为每个页面加载写入数据库。还有一些模块像 Views UI,仅在您编辑视图时才需要,所以为什么不默认禁用它呢。来自已启用模块的一些代码将与每个页面视图一起加载,从而减慢您的站点速度。
- 启用 SEO Checklist 模块 并遵循其建议,以确保搜索引擎将访问者直接发送到他们想要的信息。许多访问您网站的人可能正在跳过主页,直接访问搜索引擎发送给他们的内容。这对用户来说很棒,对环境也很有好处。
- 首先考虑移动设备进行设计,并使用语义化 HTML5 和现代 CSS3。对于 Drupal,多年来我们一直建议从像 Zen 或 Adaptive Theme 这样的良好基础主题开始,以实现可访问性,部分原因是它们是很棒的响应式平台。首先为移动设备设计迫使组织优先考虑对他们来说最重要的事情并简化他们的站点。然后,当用户使用大型显示器和高带宽浏览您的站点时,可以添加这些内容。
- 缓存,缓存,缓存。在 Drupal 7 中,开发人员或管理员忘记在 Drupal 7 中简单地启用页面和块缓存(管理 > 配置 > 性能)是很常见的。在 Drupal 8 中,页面缓存和 CSS/JS 聚合默认启用,因此默认情况下将由更多站点使用。确保增加 Drupal 中的缓存生存期,以便您不会重新生成页面,除非需要。在 Green LAMP:通过优化您的网站来节省能源和保护环境 中,有关于如何进一步扩展此功能的示例。
- 不要使用 Flash。 除了在许多设备上无法工作外,Flash 还以消耗大量能量而闻名,这也是 Apple 过去不支持 iPhone 上的 Flash 的原因之一。使用 HTML5 的 <video> 格式,它具有巨大的可访问性优势以及对环境的影响。当然,还有其他原因不依赖 flash,因为 安全 或 可访问性 问题。
- 考虑您的内容。 能否用更少的图像清楚地传达含义?内容是否使用适当的语义标记创建,并使用集中式(和缓存的)CSS 文件进行样式化?Andrew Boardman 的博客 在 Manoverboard 上鼓励我们保持简单。Steve Krug 的书 Don’t Make Me Think 包含的原则“不仅与易用性和人类参与度高度相关,而且还与确定为我们的在线行为提供动力的能源消耗高度相关。” Andrew 还主张存档未使用的内容。用户期望网站包含新鲜内容,而不是包含已发布的所有页面的活动历史记录。页面越少意味着搜索引擎可以索引更多高质量的页面,并且维护它们所需的能量更少。内容应该是可查找的。具有深思熟虑的导航结构的站点将使用户受益。使用结构化分类法还可以让访问者找到相关内容。启用 Drupal 的核心搜索,或者更好的是设置 Apache Solr 并使用 Drupal 的 Apache Solr 模块 来提供令人惊叹的 faceted 搜索体验。在 Drupal 中,可以在前端、后端和服务器上完成很多工作。通过良好的内容策略,我们可以确保内容易于查找且易于使用。所有这些都将有助于减少用户使用您的站点所需的时间,这将减少其总碳排放量。
- 寻找回馈社区的方法。 现在有超过 100 万个站点正在运行 Drupal,约占互联网的 3%。如果您可以优化模块或主题,使您的站点运行速度更快,请考虑将其回馈给社区,以便其他人可以受益。
最后,首届 Sustainable UX 虚拟会议将于 2 月 9 日举行。它是免费的,并且是在线的。在此处获取门票 here。
3 条评论