随着企业对
网站设计要求不断的提升，各种辅助软件也应运而生。今天就和大家一起分享下用Drupal时会有什么样的效果。
安装Drupal时，您可以选择“演示”配置文件展示各种功能。这是一种有趣又安全的尝试各种功能的方式。如果您这样做并测试您的站点的性能，您可能会发现hero组件中使用的背景图像加载很慢。对于任何使用大图像文件作为背景图像的组件来说，这是一个非常常见的问题，为了避免这个问题我们用3个步骤来解决。
1、我们希望防止用CSS加载图像。相反，我们将把图像作为标准HTML加载<img>标记中。这允许浏览器的预加载扫描仪在处理过程的早期检测并下载图像——这是它无法从CSS文件中解析的。预加载扫描器做的和你想的差不多:它扫描仍在下载的HTML，并开始下载它认为重要的额外资源。
我们如何使用HTML<img>作为CSS的替代品background-image？我们不能简单地把一个图像放到标记中，然后把它作为真正的背景，至少在CSS意义上是这样的。相反，我们必须建立一个容器元素—让我们给它一个类名.hero—以堆叠的方式放置图像，随后，允许其他元素(如英雄内容)堆叠在其上。这给我们一种背景图像的错觉。这就要求我们使用绝对定位在CSS中。这将图像在外……的正常文件流程，这是一种奇特的说法，它周围的元素就像不存在一样。当然，图像是存在的，但是它的物理尺寸被忽略了，允许元素在它上面流动而不是围绕着它。
2、使用现代的图像格式，目前的图像是一个高度优化的JPG文件，这并不可怕，但我们可以做得更好。新的WebP图像格式是受所有现代浏览器支持并且通常以非常小的文件大小出现。让我们用它来代替标准的JPG。在配置Drupal以支持WebP图像格式之后，我们可以看到新的图像大小减少了10%,而质量没有明显下降！
3、使用响应图像，我们现在可以立即下载图像，并且我们还使用了新的WebP图像格式，这可以节省高达50%的文件大小。但是我们还没有完成，因为每个屏幕尺寸都提供相同的图像。如果我们在更小的屏幕上显示更小的图像，图像将会更快地下载到这些设备上。响应图像已经在浏览器中被支持了很长时间。其核心是，标记包含多个图像的路径，以及每个图像的屏幕尺寸信息，让浏览器知道何时显示。这使得浏览器能够自动下拉尺寸适合屏幕尺寸的图像。
在本文中我们识别测量并修复了一个非常常见的性能问题，不仅在Drupal中，在日常前端工作中也是如此。Web开发人员应该学会使用各种测试工具，例如灯塔和网页测试。我们应该学习通用指标，如首字节时间、LCP和其他web生命周期。最重要的是，我们需要时刻关注相关内容。网站上有丰富的信息可以帮助你沿着学习的道路前进。
