Фоновое изображение занимает некоторое время, чтобы загрузить в 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-коды, чтобы ускорить загрузку фонового изображения или мне нужно изменить его размер.

Answer 1

Проблема с вашим изображением; ничего общего с CSS или темой. Попробуйте оптимизировать изображение с помощью некоторых онлайн-оптимизаторов изображений.

Google: оптимизатор изображения онлайн или компрессор изображения онлайн . Вот предложение: www.optimizilla.com ; это установит время загрузки и сохранит качество изображения.

Ваша текущая справочная информация: ширина 4793x1905px, высота и размер файла 924 КБ, что почти 1 МБ.

Интересно, а почему вы планируете такой размер?

Попробуйте это оптимизированное изображение и сообщите нам результат?

изображение: 1900x755 пикселей и 139 КБ.

В старые времена стандартная страница должна была превышать 150 КБ.

В Photoshop попробуйте следующее, чтобы уменьшить размер и качество изображения:

A) Меню Photoshop -> Изображение -> Размер изображения ... затем настройте

B) Когда вы сохраняете в формате PNG, попробуйте настроить качество на что-то справедливое:

А это как в GIMP .

Или вы можете попробовать изменить размер изображения онлайн как для размера, так и для качества изображения.

Примечание: не только изображение, вызывающее медленную загрузку вашего сайта; вам может понадобиться гуру WordPress Speed ​​Optimization или изучить интернет, как это сделать.

У вас много проблем со скоростью на вашем сайте.

Проверьте это и сравните:

Это скорость загрузки текущего фона.

Это скорость для оптимизированного изображения (все же большой размер и качество)

Это время загрузки главной страницы всего сайта; слишком большой размер и медленное время загрузки.