载入Wordpress Divi主题需要花费背景图像 [英] Background image takes while to load in wordpress divi theme

问题描述

我有一个

应用于背景图片的CSS代码为:

  element.style {背景图片:url();高度:627px；转换:translate(0px，101.1px);}.et_parallax_bg {显示:块；位置:绝对；底部:0;左:0；宽度:100％;高度:100％;背景重复:不重复；背景位置:顶部居中；背景尺寸:封面；} 

问题陈述

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

解决方案

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

Google:在线图像优化器或在线图像压缩器.这是一个建议:图片:1900x755px和139KB.

过去，标准页面的大小都应该超过150KB.

在Photoshop中，尝试以下操作以减小图像尺寸和质量:

A)Photoshop菜单->图像->图像大小...然后进行调整

B)当另存为PNG时，请尝试调整质量以达到合理的水平:

这是

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

这是优化图像的速度(虽然仍然具有较大的尺寸和质量)

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

I have a website in which the header background image takes while to load.

I have applied background image in the section module settings as shown below with Parallax effect on.

The CSS codes applied on the background image is:

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;
}

Problem Statement

I am wondering is there anything I need to add in the CSS codes in order to make the background image loads faster or I need to resize the image.

解决方案

The problem is with your image; nothing to do with CSS or the theme. Try to optimize your image using some online image optimizers.

Google: image optimizer online or image compressor online. here is a suggestion: www.optimizilla.com ; this will fix load time and maintain image quality.

Your current background info: 4793x1905px widthxheight and file size is 924KB which almost 1MB.

I wonder why do you plan such size?

try this optimized image and let us know the result?

image: 1900x755px and 139KB.

In old times the standard page should be more more than 150KB all.

In Photoshop try the following to reduce image size and quality:

A) Photoshop Menu --> Image --> Image size ... then adjust

B) When you save as PNG try to adjust quality to something fair:

And this is how to in GIMP.

Or you can try online image resize for both image size and quality.

Note: Not only the image causing your website to load slow; you might need some WordPress Speed Optimization guru or to research internet how to do it.

You have lots of speed issue in your website.

Check this and compare:

This is the speed of loading current backgound.

This is the speed for optimized image (Still big size and quality though)

This is whole site's front page load time; too big size and slow load time.

这篇关于载入Wordpress Divi主题需要花费背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！