2分钟让Elementor hero images更快！

更快的Elementor hero images

Elementor是一款流行的WordPress页面编辑器，简化了页面设计。不幸的是，它经常拖慢网站速度。有时是用户操作错误，有时则是Elementor的设计选择所致。我几乎每天都能看到的一个例子是Elementor处理hero images的方式。默认情况下，Elementor使用背景图片来实现这些效果，这每次都会拖慢页面加载速度。

Elementor背景图片的吸引力

Elementor默认将hero images添加为背景图片。 在使用Elementor编辑页面时，只需点击第一个容器，导航到样式并添加图片。操作简单， 方便且不易出错。如果这对你来说足够了，可以停止阅读；但如果你关心访客体验，请继续阅读，了解如何正确创建Elementor hero images。

Elementor背景图片的问题

你可能会问，背景图片有什么问题？背景图片以这种行为著称：它们会铺满整个元素的背景。它确实完成了需要做的事情，但代价是性能损失：

• 发现延迟：从技术角度来看，背景图片远非理想。Elementor背景图片不会在HTML中被立即发现。这些背景图片链接在样式表中。由于样式表需要单独下载和解析，这意味着它们在渲染过程中被发现的时间要晚得多。
• 未针对速度优化：  背景图片未针对速度进行优化，因为它们缺少原生lazy loading、fetchpriority和异步解码等较新的属性。
• 非响应式：最后但同样重要的是，Elementor背景图片不是响应式的，始终会加载完整的桌面尺寸图片，即使在小型移动设备上也是如此。

我不会详细展开（如果你感兴趣，可以阅读为什么背景图片是有害的），但可以说，使用这种设置的页面很可能无法通过Core Web Vitals。

2分钟修复慢速背景图片

慢速背景图片不一定是问题。通过简单的CSS调整，它们可以转换为快速的响应式图片。  秘诀是什么？使用object-fit: cover来缩放图片，并将容器上的position: relative与图片上的 position: absolute结合使用。 

趣闻：我今天给自己计时，将Elementor背景图片转换为超快的响应式图片，用时不到2分钟！ 

如果这听起来很复杂，别担心！我会一步步指导你。最后还有一个教程视频等着你！

步骤1：添加必要的样式

要修复慢速背景图片，首先需要应用一些关键的CSS样式。这些样式将使图片表现得像一个正确的背景覆盖图片，并确保 它不会与Elementor辅助div冲突。

/* The relative parent container */
  .relative{
      position: relative;
  }
  
  /* Ensure Elementor helper divs are not relative */
  .relative .elementor-container, 
  .relative .elementor-column, 
  .relative .elementor-widget-wrap {
      position: initial;
  }
  
  /* The new and improved hero image */
  .heroimg, .heroimg img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
  }

这些样式的作用：

• .relative：使父容器成为相对定位，以便在其中定位子元素。
• .relative .elementor-*：重置Elementor辅助div以避免布局冲突。
• .heroimg：确保图片缩放以覆盖容器，同时位于容器后方。

如何添加样式：

• 导航到你的WordPress仪表板。
• 前往外观 > 自定义。
• 点击额外CSS。
• 粘贴上面的CSS代码并保存更改。

这为将那些慢速背景图片转换为响应式、优化的hero images奠定了基础。接下来，将.relative和.heroimg类应用到你的hero区域，见证奇迹！ 

步骤2：准备容器

样式设置好之后，接下来需要为新的hero image准备容器。这包括移除现有的背景图片，并将.relative类应用到容器上。

步骤：

• 编辑容器：
• 打开Elementor编辑器，选择当前应用了hero image的容器。
• 移除背景图片：
• 导航到样式选项卡。
• 找到应用了图片的背景部分。
• 点击垃圾桶图标移除背景图片。
• 应用.relative类：
• 切换到高级选项卡。
• 在CSS类下，输入relative。

步骤3：添加新图片并应用新类

容器准备好后，现在可以使用Elementor添加响应式优化的hero image了。方法如下：

预期效果：在最后一步中，应用类之前hero image可能看起来对不齐或者很奇怪！这是正常的！.heroimg类会将图片转换为响应式、全宽的hero image，表现得像背景覆盖效果。 完成后，你优化的hero image将位于容器后方，提供相同的视觉效果，同时性能显著提升。

步骤：

• 添加图片元素：
• 在Elementor编辑器中，点击左上角的加号图标添加新元素。
• 将图片小部件拖放到顶部容器中（即带有.relative类的容器）。
• 上传并选择图片：
• 在左侧面板的图片设置中，点击图片占位符。
• 上传你要使用的全屏图片，或从WordPress媒体库中选择现有图片。
• 应用.heroimg类：
• 保持图片选中状态，导航到Elementor菜单中的高级选项卡。
• 在CSS类字段中，输入heroimg。

完成，享受更快的页面！

你成功了！此时，你的hero image已完全优化，可以提供更快的页面体验了。 

发布页面后，检查元素，你会发现一个很棒的变化：慢速背景图片已被替换为响应式的快速前景图片。这张图片现在很可能以高fetchpriority加载，确保加载更快，同时改善Core Web Vitals和user experience。

恭喜你创建了一个更快、更高效的页面。你的访客会感受到不同！

之前：2.6秒

之后：0.6秒

额外技巧：预加载hero image

在YouTube上观看完整教程。