css - 背景图像需要一段时间才能加载到 wordpress divi 主题中

Question

我有一个网站，其中标题背景图像需要一段时间才能加载。

我在部分模块设置中应用了背景图像，如下所示，并启用了视差效果。

应用于背景图像的 CSS 代码是：

element.style {
    background-image: url();
    height: 627px;
    transform: translate(0px, 101.1px);
}

.et_parallax_bg {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

问题陈述

我想知道是否需要在 CSS 代码中添加任何内容以使背景图像加载更快，或者我需要调整图像大小。

标签： csswordpressimage

Answer 1

问题出在你的形象上；与 CSS 或主题无关。尝试使用一些在线图像优化器来优化您的图像。

谷歌：在线图像优化器或在线图像压缩器。这是一个建议：www.optimizilla.com；这将修复加载时间并保持图像质量。

您当前的背景信息：4793x1905px 宽x高，文件大小为 924KB，几乎 1MB。

我想知道你为什么要设计这么大的尺寸？

试试这个优化的图像，让我们知道结果？

图片：1900x755 像素和 139KB。

在过去，标准页面应该超过 150KB。

在 Photoshop 中尝试以下方法来减小图像大小和质量：

A) Photoshop Menu --> Image --> Image size ... 然后调整

B）当您另存为PNG时，请尝试将质量调整为公平的：

这就是GIMP 中的方法。

或者您可以尝试在线调整图像大小和质量的图像大小。

注意：不仅图像会导致您的网站加载缓慢；您可能需要一些 WordPress 速度优化大师或研究互联网如何做到这一点。

您的网站有很多速度问题。

检查并比较：

这是加载当前背景的速度。

这是优化图像的速度（尽管尺寸和质量仍然很大）

这是整个网站的首页加载时间；尺寸太大，加载时间慢。